2|weekly movie

科技2023-10-08 82

小程序运行环境与基本架构

条件渲染

什么时候用hidden或者wx:if呢，就是用户不会频繁去切换的时候，比较固定的时候用wx:if，然后用户去频繁会切换的的时候用hidden

列表渲染

第一种重复的渲染生成组件也就是有多少条数据就要写多少个wxml中的那些组件们

/* pages/weekly/weekly.wxss */ .movie{ display: flex; } .movie-details{ display:flex; flex-direction: column; width: 550rpx; } .movie-image{ width: 200rpx; height: 200rpx; }  <view class=""> <text>本周推荐</text> <view class="movie" wx:for="{{weekMovieList}}"> <image class="movie-image" src="{{item.imagePath}}"></image> <view class="movie-details"> <text>第{{index+1}}周：{{item.name}}</text> <text>点评：{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px;color:red;">强烈推荐</text> </view> </view> </view> // pages/weekly/weekly.js Page({ /** * 页面的初始数据 */ data: { weekMovieList:[ { name:"泰塔尼克号", comment:"失去的才是永恒的。", imagePath:"/images/icon/titanic.jpg", isHighlyRecommended:true }, { name:"这个杀手不太冷", comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事", imagePath:"/images/icon/leon.jpg", isHighlyRecommended:false }, { name:"教父", comment:"最精彩的剧本，最真实的黑帮电影。", imagePath:"/images/icon/jf.jpg", isHighlyRecommended:false }, ], count:24, score:36, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

使用swiper组件

因为swiper默认高度：150px,而图片默认高度240px

/* pages/weekly/weekly.wxss */ .movie{ display: flex; } .movie-details{ display:flex; flex-direction: column; width: 550rpx; } .movie-image{ width: 200rpx; height: 200rpx; } .movie-swiper{ height: 90vh; } .movie-card{ height: 100%; width: 100%; background:#eee; margin: 0 20rpx; } // pages/weekly/weekly.js Page({ /** * 页面的初始数据 */ data: { weekMovieList:[ { name:"泰塔尼克号", comment:"失去的才是永恒的。", imagePath:"/images/icon/titanic.jpg", isHighlyRecommended:true }, { name:"这个杀手不太冷", comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事", imagePath:"/images/icon/leon.jpg", isHighlyRecommended:false }, { name:"教父", comment:"最精彩的剧本，最真实的黑帮电影。", imagePath:"/images/icon/jf.jpg", isHighlyRecommended:false }, ], count:24, score:36, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) /**app.wxss**/ /* .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } */ .container{ background-color: #fff; height: 100vh; display: flex; flex-direction: column; justify-content: space-around; align-items: center; }

页面的生命周期函数

必须在视图渲染之前完成赋值

更新数据this.setData()

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

事件机制–响应用户交互

catchtap是非冒泡，bindtap是冒泡

组件的自定义数据属性

<view class="">  <swiper class="movie-swiper" indicator-dots="{{true}}" previous-margin="50rpx" next-margin="50rpx" current="{{currentIndex}}"> <swiper-item class="movie" wx:for="{{weekMovieList}}"> <view class="container movie-card" bindtap="f2" data-movie-id="{{item.id}}"> <image class="movie-image" src="{{item.imagePath}}"></image> <text>第{{index+1}}周：{{item.name}}</text> <text>点评：{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px;color:red;">强烈推荐</text> <text bindtap="f0" wx:if="{{index<(weekMovieList.length-1)}}" class="return-button">返回本周</text> <text>{{count}}</text> <button bindtap="f1">+1</button> </view> </swiper-item> </swiper> </view> // pages/weekly/weekly.js Page({ /** * 页面的初始数据 */ data: { weekMovieList:[ { name:"泰塔尼克号", comment:"失去的才是永恒的。", imagePath:"/images/icon/titanic.jpg", isHighlyRecommended:true, id:1 }, { name:"这个杀手不太冷", comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事", imagePath:"/images/icon/leon.jpg", isHighlyRecommended:false, id:2 }, { name:"教父", comment:"最精彩的剧本，最真实的黑帮电影。", imagePath:"/images/icon/jf.jpg", isHighlyRecommended:false, id:3 }, ], count:0, score:36, currentIndex:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ currentIndex:this.data.weekMovieList.length-1 }) }, f0:function(event){ console.log(event); this.setData({ currentIndex:this.data.weekMovieList.length-1 }) }, f1:function(event){ console.log(this.data.count); //错误的方式，不能直接复制 this.data.count=this.data.count+1 this.setData({ count:this.data.count+1, "weekMovieList[2].name":"教父3" }) }, f2:function(event){ var movieId=event.currentTarget.dataset.movieId; console.log(event.currentTarget); console.log(movieId); wx.navigateTo({ url: '/pages/detail/detail?id'+movieId }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) { "usingComponents": {}, "navigationBarTitleText": "每周推荐" } /* pages/weekly/weekly.wxss */ .movie{ display: flex; } .movie-details{ display:flex; flex-direction: column; width: 550rpx; } .movie-image{ width: 200rpx; height: 200rpx; } .movie-swiper{ height: 90vh; } .movie-card{ height: 100%; width: 100%; background:#eee; margin: 0 20rpx; position: relative; } .return-button{ position: absolute; right:0; top: 40px; font-size: 26rpx; font-style:italic; border:1px solid green; border-right: 0; border-radius: 10%; } { "pages":[ "pages/about/about", "pages/weekly/weekly", "pages/detail/detail" ], "window":{ "enablePullDownRefresh": true, "backgroundTextStyle":"dark", "navigationBarBackgroundColor": "#F0F8FF", "navigationBarTitleText": "电影周周看", "navigationBarTextStyle":"black" }, "tabBar": { "color": "#000000", "selectedColor": "#66CDAA", "borderStyle": "black", "backgroundColor": "#F0F8FF", "list": [ { "pagePath": "pages/weekly/weekly", "text": "每周推荐", "iconPath": "images/tabbar/weekly.png", "selectedIconPath": "images/tabbar/weekly-selected.png" }, { "pagePath": "pages/about/about", "text": "关于", "iconPath": "images/tabbar/about.png", "selectedIconPath": "images/tabbar/about-selected.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }

实现电影详情页的基本框架

用navigator访问的时候会发先到detail的onload方法去，在调用onload方法时，首先会将url中?后面的参数解析出来，然后组成一个javascript对象，然后将这个对象作为实参值传递给onload方法上面图中少了个=号，在id='movieId

// pages/weekly/weekly.js Page({ /** * 页面的初始数据 */ data: { weekMovieList:[ { name:"泰塔尼克号", comment:"失去的才是永恒的。", imagePath:"/images/icon/titanic.jpg", isHighlyRecommended:true, id:1 }, { name:"这个杀手不太冷", comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事", imagePath:"/images/icon/leon.jpg", isHighlyRecommended:false, id:2 }, { name:"教父", comment:"最精彩的剧本，最真实的黑帮电影。", imagePath:"/images/icon/jf.jpg", isHighlyRecommended:false, id:3 }, ], count:0, score:36, currentIndex:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ currentIndex:this.data.weekMovieList.length-1 }) }, //返回本周按钮 f0:function(event){ console.log(event); this.setData({ currentIndex:this.data.weekMovieList.length-1 }) }, //+1按钮 f1:function(event){ console.log(this.data.count); //错误的方式，不能直接复制 this.data.count=this.data.count+1 this.setData({ count:this.data.count+1, "weekMovieList[2].name":"教父3" }) }, //点weekly的某个电影就进入相应电影的详情页detail f2:function(event){ var movieId=event.currentTarget.dataset.movieId; console.log(event.currentTarget); console.log(movieId); wx.navigateTo({ url: '/pages/detail/detail?id='+movieId }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })  <view class="">  <swiper class="movie-swiper" indicator-dots="{{true}}" previous-margin="50rpx" next-margin="50rpx" current="{{currentIndex}}"> <swiper-item class="movie" wx:for="{{weekMovieList}}"> <view class="container movie-card" bindtap="f2" data-movie-id="{{item.id}}"> <image class="movie-image" src="{{item.imagePath}}"></image> <text>第{{index+1}}周：{{item.name}}</text> <text>点评：{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px;color:red;">强烈推荐</text> <text catchtap="f0" wx:if="{{index<(weekMovieList.length-1)}}" class="return-button">返回本周</text> <text>{{count}}</text> <button bindtap="f1">+1</button> </view> </swiper-item> </swiper> </view> /* pages/weekly/weekly.wxss */ .movie{ display: flex; } .movie-details{ display:flex; flex-direction: column; width: 550rpx; } .movie-image{ width: 200rpx; height: 200rpx; } .movie-swiper{ height: 90vh; } .movie-card{ height: 100%; width: 100%; background:#eee; margin: 0 20rpx; position: relative; } .return-button{ position: absolute; right:0; top: 40px; font-size: 26rpx; font-style:italic; border:1px solid green; border-right: 0; border-radius: 10%; }

发起请求API

data 参数说明最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：对于 GET 方法的数据，会将数据转换成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）示例代码： wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } })

在微信公众平台上配置下需要的服务器域名：异步调用

调用豆瓣API获取电影详情数据并展示

http://www.doubanapi.com/movie.html https://movie.douban.com/subject/1291841/

以上是调用豆瓣的API+Nginx，但是我自己随便找了个接口用：【我自己瞎弄的】

如下： https://movie.querydata.org/ 将weekly.js中的三部电影的id改成豆瓣的id

在detail.js中去请求下看得到的数据是什么【有点慢，耐心等待，爬取成功后第一次后再请求就会快点】

// pages/detail/detail.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that=this; console.log(options) wx.request({ url: 'https://movie.querydata.org/api?id='+options.id, method:"GET", data:{ }, header:{ "content-type":"json" }, success:function(res){ console.log(res); that.setData({ movie:res.data }) }, fail:function(){ }, complete:function(){ } }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

然后写detail.wxml和wxss把这些数据展示在视图中

最后结果：

动态设置导航栏loading状态和标题

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that=this; console.log(options) wx.request({ url: 'https://movie.querydata.org/api?id='+options.id, method:"GET", data:{ }, header:{ "content-type":"json" }, success:function(res){ console.log(res); that.setData({ movie:res.data }) wx.hideNavigationBarLoading() }, fail:function(){ }, complete:function(){ } }) wx.showNavigationBarLoading() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { },

<view class="container"> <image class="detail-image" src="{{movie.data[0].poster}}"></image> <text style="font-weight:bold;font-size:50rpx;">{{movie.data[0].name}}</text> <text>年份：{{movie.year}}</text> <text>类型：{{movie.data[0].genre}}</text> <text>评分：{{movie.doubanRating}}</text> <text selectable="true">简介：{{movie.data[0].description}}</text> </view> // pages/detail/detail.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that=this; console.log(options) wx.request({ url: 'https://movie.querydata.org/api?id='+options.id, method:"GET", data:{ }, header:{ "content-type":"json" }, success:function(res){ console.log(res); that.setData({ movie:res.data }) wx.setNavigationBarTitle({ title:res.data.doubanRating+"分："+res.data.data[0].name, }) wx.hideNavigationBarLoading() }, fail:function(){ }, complete:function(){ } }) wx.showNavigationBarLoading() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

页面事件处理函数和自定义页面转发

weekly.js

detail.js

// pages/detail/detail.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that=this; console.log(options) wx.request({ url: 'https://movie.querydata.org/api?id='+options.id, method:"GET", data:{ }, header:{ "content-type":"json" }, success:function(res){ console.log(res); that.setData({ movie:res.data }) wx.setNavigationBarTitle({ title:res.data.doubanRating+"分："+res.data.data[0].name, }) wx.hideNavigationBarLoading() }, fail:function(){ }, complete:function(){ } }) wx.showNavigationBarLoading() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { return{ title:"向你推荐:"+this.data.movie.data[0].name, } } })

Processed: 0.028, SQL: 8