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


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拦截alert对话框另类应用
Jan 16 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
Javascript函数的参数
Jul 16 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
JS实现瀑布流布局
Oct 21 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
微信小程序前端promise封装代码实例
Aug 24 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的array_multisort()使用方法介绍
2012/05/16 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
文字幻灯片
2006/06/26 Javascript
HTML中事件触发列表与解说
2007/07/09 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
轮播的简单实现方法
2016/07/28 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
React学习笔记之事件处理(二)
2017/07/02 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python之修改图片像素值的方法
2019/07/03 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
应届生程序员求职信
2013/11/05 职场文书
统计岗位职责
2014/02/21 职场文书
中学教师师德承诺书
2014/05/23 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书