微信小程序之电影影评小程序制作代码


Posted in Javascript onAugust 03, 2017

本文实例为大家分享了微信小程序制作影评小程序的具体代码,供大家参考,具体内容如下

这是博主的项目包含的文件截图:

微信小程序之电影影评小程序制作代码

首先如图建立文件夹和page页面

然后app.json页面更新代码如下:

{
 "pages": [
 "pages/hotPage/hotPage",
 "pages/comingSoon/comingSoon",
 "pages/search/search",
 "pages/more/more"
 ],
 "window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle": "black"
 },
 "tabBar": {
 "list": [{
 "pagePath": "pages/hotPage/hotPage",
 "text": "本地热映"
 },{
 "pagePath": "pages/comingSoon/comingSoon",
 "text": "即将上映"
 },{
 "pagePath": "pages/search/search",
 "text": "影片搜索"
 }]
 }
}

是app.wxss页面(为后面的页面样式写的):

/**app.wxss**/
.container {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 200rpx 0;
 box-sizing: border-box;
} 
/* hotPage.wxss */
.movies{
 display:flex;
}
.myimage{
 flex: 1;
}
.moveInfo{
 flex: 2;
}
.yanyuanlist{
 display:flex;
}
.left{
 flex:1;
}
.right{
 flex:2;
}

页面显示如图:

微信小程序之电影影评小程序制作代码

然后是hotPage.wxml页面:

<view class="movies" wx:for="{{movies}}" id="{{item.id}}" bindtap="jumpTomore">

 <view class="myimage">
 <image src="{{item.images.medium}}"></image>
 </view>
 <view class="moveInfo">
 <view class="title">
 名称:{{item.title}}
 </view>
 <view class="daoyan">
 导演:{{item.directors["0"].name}}
 </view>
 <view class="yanyuanlist">
 <view class="left">演员:</view>
 <view class="right">
 <block wx:for="{{item.casts}}">{{item.name}} </block>
 </view>
 </view>
 <view class="fenlei">
 分类:{{item.genres}}
 </view>
 <view class="year">
 上映时间:{{item.year}}
 </view>
 </view>

</view>

然后是hotPage.js页面:

var that;
var page = 0;
// more.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 movies: []
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 that = this;
 that.linkNet(0);
 },
 jumpTomore: function (e) {
 console.log(e.currentTarget.id);
 wx.navigateTo({
 url: '/pages/more/more?id=' + e.currentTarget.id,
 })
 },
 linkNet: function (page) {
 wx.request({
 header: {
 "Content-Type": "json"
 },
 url: 'https://api.douban.com/v2/movie/in_theaters',
 data: {
 start: 10 * page,
 count: 10,
 city: '成都'
 },
 success: function (e) {
 console.log(e);
 if (e.data.subjects.length == 0) {
 wx.showToast({
 title: '没有更多数据',
 })
 } else {
 that.setData({
 movies: that.data.movies.concat(e.data.subjects)
 })
 }
 }
 })
 },
 onReachBottom: function () {
 that.linkNet(++page);
 }
})

运行程序结果如图:

微信小程序之电影影评小程序制作代码

然后是hotPage.wxss:

image{
 width:350rpx;
 height:280rpx;
}

接着是第二个页面的布局和第一个页面一样,所以直接把第一个页面hotPage.wxml代码copy过来就好了;
同样comingSoon.js代码和hotPage.js代码也差不多,唯一需要改动的地方只有一个:

微信小程序之电影影评小程序制作代码

url和data改一下就好了

.wxss代码一致;

运行结果如下:

微信小程序之电影影评小程序制作代码

接着是第三个页面的代码:

search.wxml页面代码:

<input placeholder="输入关键字" bindinput="myInput" />
<button bindtap="mySearch">搜索</button>

<view class="movies" wx:for="{{movies}}" id="{{item.id}}" bindtap="jumpTomore">

 <view class="myimage">
 <image src="{{item.images.medium}}"></image>
 </view>
 <view class="moveInfo">
 <view class="title">
 名称:{{item.title}}
 </view>
 <view class="daoyan">
 导演:{{item.directors["0"].name}}
 </view>
 <view class="yanyuanlist">
 <view class="left">演员:</view>
 <view class="right">
 <block wx:for="{{item.casts}}">{{item.name}} </block>
 </view>
 </view>
 <view class="fenlei">
 分类:{{item.genres}}
 </view>
 <view class="year">
 上映时间:{{item.year}}
 </view>
 </view>

</view>

页面代码:

var input;
var that;
// search.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 movies: []
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 that = this;
 },
 myInput: function (e) {
 input = e.detail.value;
 },
 mySearch: function () {
 wx.request({
 header: {
 "Content-Type": "json"
 },
 url: 'https://api.douban.com/v2/movie/search?q=' + input,
 success: function (e) {
 that.setData({
 movies: e.data.subjects
 })
 }
 })
 }


})

.wxss代码同hotPage.wxss代码一致;

运行代码结果如下:

微信小程序之电影影评小程序制作代码

最后是详情页面,点击影片后会跳转到详情页面获得影片的详细信息:

more.wxml页面代码:

<!--more.wxml-->
<image src="{{imageUrl}}"></image>
<view class="moveInfo">
 <view class="title">名字:{{title}}</view>
 <view class="director">导演:{{director}}</view>
 <view class="castleft">主演:</view>
 <view class="casts" wx:for="{{casts}}">
 <block class="castright">{{item.name}}</block>
 </view>
 <view class="year">年份:{{year}}</view>
 <view class="rate">评分:{{rate}}</view>
 <view class="summary">介绍:{{summary}}</view>
</view>

more.js代码:

var that;
// more.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 title: 0,
 imageUrl: 0,
 director: 0,
 casts: [],
 year: 0,
 rate: 0,
 summary: 0
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 that = this;
 wx.request({
 header: {
 "Content-Type": "json"
 },
 url: 'https://api.douban.com/v2/movie/subject/' + options.id,
 success: function (e) {
 console.log(e)
 that.setData({
 title: e.data.original_title,
 imageUrl: e.data.images.large,
 director: e.data.directors["0"].name,
 casts: e.data.casts,
 year: e.data.year,
 rate: e.data.rating.average,
 summary: e.data.summary
 })
 }
 })
 }

})

运行代码结果如下:

微信小程序之电影影评小程序制作代码

好了、全部代码如上都给出了..加油

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
js字符串转成JSON
Nov 07 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 #Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 #Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 #Javascript
浅谈pc端rem字体设置的问题
Aug 03 #Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 #Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 #Javascript
老生常谈js数据类型
Aug 03 #Javascript
You might like
使用PHP批量生成随机用户名
2008/07/10 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
浅谈PHP中的
2016/04/23 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
form中限制文本字节数js代码
2007/06/10 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
Python元组及文件核心对象类型详解
2018/02/11 Python
Python从零开始创建区块链
2018/03/06 Python
python内置数据类型之列表操作
2018/11/12 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
python 怎样进行内存管理
2020/11/10 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
《赶海》教学反思
2014/04/20 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
Python图像处理库PIL详细使用说明
2022/04/06 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS