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


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 相关文章推荐
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
谈谈vue中mixin的一点理解
Dec 12 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 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
通过文字传递创建的图形按钮
2006/10/09 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
Yii学习总结之安装配置
2015/02/22 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
javascript如何创建对象
2016/08/29 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
python中二维阵列的变换实例
2014/10/09 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
高二地理教学反思
2014/01/24 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
环保公益策划方案
2014/08/15 职场文书
公司总经理岗位职责
2015/04/01 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
nginx之内存池的实现
2022/06/28 Servers