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


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控件
May 07 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
js完整倒计时代码分享
Sep 18 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
jQuery实现评论模块
Aug 19 jQuery
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基础知识:函数基础知识
2006/12/13 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python框架中flask知识点总结
2018/08/17 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
Python @property使用方法解析
2019/09/17 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
优秀广告词大全
2014/03/19 职场文书
2015年班干部工作总结
2015/04/29 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers