微信小程式開發(3) 熱門電影
阿新 • • 發佈：2019-01-14
在這篇微信小程式開發教程中，我們將介紹如何使用微信小程式開發熱門電影及預覽功能。
本文主要分為兩個部分，小程式主體部分及電影主頁和詳情頁頁面部分
一、小程式主體部分
一個小程式主體部分由三個檔案組成，必須放在專案的根目錄，如下：
1. 小程式邏輯
App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() {// Do something when hide. }, globalData: 'I am global data' })
2. 小程式公共設定
主要註冊兩個頁面，熱門電影的主頁及詳情頁
{ "pages":[ "pages/index/index", "pages/details/details" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#FF4D64", "navigationBarTitleText": "熱門電影", "backgroundColor":"#FFF", "navigationBarTextStyle":"white" } }
二、電影頁面部分
小程式頁面主要由以下檔案組成。
本專案程式分為兩個頁面：主頁及詳情頁。
主頁部分
主頁效果圖如下
1. 頁面結構
其頁面結構程式碼如下
<loading hidden="{{loading}}"> 載入中... </loading> <scroll-view class="container img-content" style="height: {{windowHeight}}px; width: {{windowWidth}}px; " scroll-y="true" bindscrolltoupper="pullDownRefresh" bindscrolltolower="pullUpLoad" lower-threshold="800"> <navigator class="list flex-box" wx:for="{{films}}" url="../details/details?title=navigate&id={{item.id}}&titles={{item.nm}}"> <view class="list-img"><image class="img" src="{{item.img}}"></image><image class="list-play" src="../../images/i-play.png"></image></view> <view class="list-main flex-btn"> <view class="list-title list-brief"> <text>{{item.nm}}</text> <test class="i-imax" wx:if="{{item.imax && item['3d']}}" src="../../tests/i-imax.png">3Dimax</test> <test class="i-imax" wx:elif="{{item['3d']}}" src="../../images/i-play.png">3d</test> <test class="i-imax" wx:elif="{{item['imax']}}" src="../../tests/i-star.png">imax</test> <test class="i-imax" wx:else="{{item['imax']}}" src="../../images/i-stars.png">2d</test> </view> <view class="list-size" wx:if="{{!item.preSale}}"><view class="star"><view style="width: {{item.sc * 10}}%" class="stars"></view></view>{{item.sc}}</view> <view class="list-brief" wx:if="{{item.preSale}}"><text class="wish">{{item.wish}}人想看</text>{{item.showInfo}}</view> <view class="list-brief">{{item.scm}}</view> <view class="list-brief">{{item.dir}} {{item.star}}</view> <view class="list-sale"><text wx:if="{{!item.preSale}}" class="sales">購票</text><text wx:if="{{item.preSale}}" class="pre-sale">預售</text></view> </view> </navigator> </scroll-view>
2. 樣式表
樣式程式碼如下所示
/**index.wxss**/ .flex-box{ display: flex; } .flex-btn{ flex: 1; } .list{ border-bottom: 1rpx solid #e5e5e5; padding: 30rpx; } .list-img{ width: 130rpx; height: 180rpx; margin-right: 20rpx; position: relative; } .list-img .img{ width: 130rpx; height: 180rpx; } .list-play{ position: absolute; left: 45rpx; top: 70rpx; width: 40rpx; height: 40rpx; } .list-title{ height: 52rpx; } .list-title text{ font-size: 18px; line-height: 52rpx; color: #000; } .i-imax{ width: 52rpx; height: 28rpx; margin-left: 10rpx; } .list-size{ height: 40rpx; font-size: 14px; color: #8a869e; } .list-size .star{ width: 100rpx; height: 20rpx; background: url(../../images/i-star.png) no-repeat; background-size: 100rpx; display: inline-block; margin-right: 10rpx; } .stars{ width: 100rpx; height: 20rpx; background: url(../../images/i-stars.png) no-repeat; background-size: 100rpx; float: left; margin-right: 10rpx; } .list-brief{ font-size: 12px; line-height: 48rpx; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 400rpx; } .list-brief .wish{ color: #108ee9; border-right: 1rpx solid #666; padding-right: 10rpx; margin-right: 10rpx; } .list-main{ position: relative; } .list-sale{ position: absolute; right: 10rpx; top: 70rpx; } .list-sale text{ padding: 10rpx 18rpx; border: 1rpx solid #37b7ff; font-size: 14px; color: #37b7ff; border-radius: 6rpx; } .list-sale .pre-sale{ border: 1rpx solid #fea54c; color: #fea54c; }
3、 頁面邏輯處理
//index.js Page({ data: { films: [], limit: 6, loading: false, windowHeight: 0, windowWidth: 0 }, onLoad: function () { this.setData({ loading: false }) }, onShow: function(){ var that = this wx.request({ url: 'http://m.maoyan.com/movie/list.json', //僅為示例，並非真實的介面地址 data: { offset: 0, type: 'hot', limit: that.data.limit }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res.data) that.setData({ films: res.data.data.movies, loading: true }) } }) wx.getSystemInfo({ success: (res) => { that.setData({ windowHeight: res.windowHeight, windowWidth: res.windowWidth }) } }) }, pullDownRefresh: function(e) { this.onLoad() }, pullUpLoad: function(e) { var limit = this.data.limit + 6 console.log(limit) this.setData({ limit: limit }) this.onShow() } })
這裡使用是的貓眼電影的api
其介面為
http://m.maoyan.com/movie/list.json
返回資料如下所示：
{ "control":{ "expires":1800 }, "status":0, "data":{ "hasNext":true, "movies":[ { "showInfo":"今天64家影院放映1083場", "cnms":0, "sn":0, "late":false, "img":"http://p0.meituan.net/165.220/movie/fbe5f97c016c9f4520109dc70f458d4d83363.jpg", "sc":9.1, "ver":"2D/3D/IMAX 3D/中國巨幕", "rt":"本週五上映", "dur":136, "nm":"銀河護衛隊2", "showDate":"", "src":"", "vd":"", "dir":"詹姆斯·古恩", "star":"克里斯·帕拉特,佐伊·索爾達娜,戴夫·巴蒂斯塔", "cat":"動作,冒險,科幻", "wish":154543, "3d":true, "pn":188, "scm":"星爵身世迷，終於見爹地", "preSale":0, "imax":true, "snum":41866, "time":"", "id":248683 }, { "showInfo":"今天62家影院放映335場", "cnms":0, "sn":0, "late":false, "img":"http://p0.meituan.net/165.220/movie/aeb864fa21d578d845b9cefc056e40cb2874891.jpg", "sc":9.8, "ver":"2D", "rt":"本週五上映", "dur":140, "nm":"摔跤吧！爸爸", "showDate":"", "src":"", "vd":"", "dir":"尼特什·提瓦瑞", "star":"阿米爾·汗,薩卡詩·泰瓦,法緹瑪·薩那·紗卡", "cat":"喜劇,動作,家庭", "wish":27412, "3d":false, "pn":54, "scm":"為圓摔跤夢，女兒不心疼", "preSale":0, "imax":false, "snum":19166, "time":"", "id":588362 }, { "showInfo":"今天63家影院放映256場", "cnms":0, "sn":0, "late":false, "img":"http://p1.meituan.net/165.220/movie/cc50791238502ae1fa08df764c5f5c97223987.jpg", "sc":9.1, "ver":"2D/中國巨幕", "rt":"2017-04-28上映", "dur":120, "nm":"拆彈·專家", "showDate":"", "src":"", "vd":"", "dir":"邱禮濤", "star":"劉德華,姜武,宋佳", "cat":"動作,懸疑,犯罪", "wish":49007, "3d":false, "pn":167, "scm":"爆炸襲擊案，拆彈反恐難", "preSale":0, "imax":false, "snum":95491, "time":"", "id":346103 }, { "showInfo":"今天48家影院放映156場", "cnms":0, "sn":0, "late":false, "img":"http://p1.meituan.net/165.220/movie/af297f59e363ce96290dfea22f6fea0c153020.jpg", "sc":9.4, "ver":"2D/3D/IMAX 3D/中國巨幕/全景聲", "rt":"2017-04-14上映", "dur":136, "nm":"速度與激情8", "showDate":"", "src":"", "vd":"", "dir":"F·加里·格雷", "star":"範·迪塞爾,傑森·斯坦森,道恩·強森", "cat":"動作,驚悚,犯罪", "wish":320713, "3d":true, "pn":226, "scm":"車王要黑化，家族被擊垮", "preSale":0, "imax":true, "snum":899592, "time":"", "id":248700 }, { "showInfo":"今天46家影院放映133場", "cnms":0, "sn":0, "late":false, "img":"http://p1.meituan.net/165.220/movie/ea0131b3e9e40f226c7c2664f6185a3792752.jpg", "sc":8.9, "ver":"2D", "rt":"2017-04-27上映", "dur":107, "nm":"喜歡·你", "showDate":"", "src":"", "vd":"", "dir":"許巨集宇", "star":"金城武,周冬雨,孫藝洲", "cat":"喜劇,愛情", "wish":30224, "3d":false, "pn":216, "scm":"美食嘉年華，愛情甜掉牙", "preSale":0, "imax":false, "snum":68306, "time":"", "id":672175 } ] } }
詳情頁部分
1. 頁面結構
頁面結構用一個檢視顯示電影的常用資訊，以及一個預覽視訊的功能。
其頁面結構程式碼如下
<loading hidden="{{loading}}"> 載入中... </loading> <view class="detail flex-box" url=""> <view class="detail-img"><image class="img" src="{{films.MovieDetailModel.img}}"></image><image bindtap="vShow" class="detail-play" src="../../images/i-play.png"></image></view> <view class="detail-main flex-btn"> <view class="detail-title detail-brief"> <text>{{films.MovieDetailModel.nm}}</text> <image class="i-imax" wx:if="{{films.MovieDetailModel.imax}}" src="../../images/i-imax.png"></image> <image class="i-imax" wx:if="{{films.MovieDetailModel.preSale}}" src="../../images/i-imax.png"></image> </view> <view class="detail-brief">{{films.MovieDetailModel.scm}}</view> <view class="detail-brief">{{films.MovieDetailModel.cat}}</view> <view class="detail-brief">{{films.MovieDetailModel.src}} / {{films.MovieDetailModel.dur}}分鐘</view> <view class="detail-brief">{{films.MovieDetailModel.rt}}</view> <view class="detail-brief" wx:if="{{films.MovieDetailModel.preSale}}"><text class="wish">{{films.MovieDetailModel.wish}}人想看</text>{{films.MovieDetailModel.showInfo}}</view> <view class="detail-size" wx:if="{{!films.MovieDetailModel.preSale}}"><view class="star"><view style="width: {{films.MovieDetailModel.sc * 10}}%" class="stars"></view></view>{{films.MovieDetailModel.sc}}</view> </view> <image class="bg" src="https://gw.alicdn.com/tps/i4/TB1pa7pJFXXXXX6XFXXwwg20FXX-640-448.png"></image> <video class="{{video}}" autoplay="false" bindended="vHid" src="{{films.MovieDetailModel.vd}}" controls></video> </view> <scroll-view class="details-dra"><view>{{details}}</view></scroll-view> <button type="primary" size="{{primarySize}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="pay">立即購票 </button>
2. 樣式表
樣式程式碼如下所示
/**index.wxss**/ .flex-box{ display: flex; } .flex-btn{ flex: 1; } .detail{ border-bottom: 1rpx solid #e5e5e5; padding: 30rpx 30rpx 0 30rpx; overflow: hidden; position: relative; } .video-hide{ display: none; } .video-show{ display: block; position: absolute; width: 750rpx; height: 406rpx; top: 0; left: 0; } .bg{ position: absolute; left: 0; top: 0; width: 750rpx; height: 1048rpx; z-index: -1; } .detail-img{ width: 236rpx; height: 376rpx; margin-right: 20rpx; position: relative; } .detail-img .img{ width: 236rpx; height: 376rpx; } .detail-play{ position: absolute; left: 70rpx; top: 130rpx; width: 80rpx; height: 80rpx; } .detail-title{ height: 70rpx; } .detail-title text{ font-size: 18px; line-height: 70rpx; color: #FFF; } .i-imax{ width: 52rpx; height: 28rpx; margin-left: 10rpx; } .detail-size{ height: 40rpx; font-size: 14px; color: #FFF; } .detail-size .star{ width: 100rpx; height: 20rpx; background: url(../../images/i-star.png) no-repeat; background-size: 100rpx; display: inline-block; margin-right: 10rpx; } .stars{ width: 100rpx; height: 20rpx; background: url(../../images/i-stars.png) no-repeat; background-size: 100rpx; float: left; margin-right: 10rpx; } .detail-brief{ font-size: 14px; line-height: 50rpx; color: #FFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 400rpx; } .detail-brief .wish{ color: #FFF; border-right: 1rpx solid #666; padding-right: 10rpx; margin-right: 10rpx; } .detail-main{ position: relative; } .detail-sale{ position: absolute; right: 10rpx; top: 70rpx; } .detail-sale text{ padding: 10rpx 18rpx; border: 1rpx solid #37b7ff; font-size: 14px; color: #37b7ff; border-radius: 6rpx; } .detail-sale .pre-sale{ border: 1rpx solid #fea54c; color: #fea54c; } .details-dra view{ margin: 23rpx; color: #333; font-size: 14px; line-height: 20px; }
3、 頁面邏輯處理
//index.js Page({ data: { films: [], loading: false, title: '正在熱映', video: 'video-hide', datails: '', windowWidth: 0 }, onLoad: function (options) { var id = 'http://m.maoyan.com/movie/' + options.id + '.json' this.setData({ title: options.titles }) var that = this wx.request({ url: id, //僅為示例，並非真實的介面地址 data: { }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res.data) that.setData({ films: res.data.data, loading: true }) var pages = that.data.films.MovieDetailModel.dra pages = pages.replace(/<.*?>/ig,"") that.setData({ details: pages }) console.log(pages) } }) }, onReady: function(){ var that = this wx.setNavigationBarTitle({ title: that.data.title }) wx.getSystemInfo({ success: (res) => { that.setData({ windowHeight: res.windowHeight, windowWidth: res.windowWidth }) } }) }, pay: function(){ console.log('pay'); wx.requestPayment({ 'timeStamp': '', 'nonceStr': '', 'package': '', 'signType': 'MD5', 'paySign': '', 'success':function(res){ console.log('success'); }, 'fail':function(res){ console.log('fail'); } }) }, vShow: function(){ this.setData({ video: 'video-show' }) }, vHid: function(){ this.setData({ video: 'video-hide' }) } })
這裡使用是的貓眼電影詳情的api
其介面為
http://m.maoyan.com/movie/248683.json
其中248683為電影ID
返回資料如下所示：
{ "control":{ "expires":3600 }, "status":0, "data":{ "MovieDetailModel":{ "cat":"動作,冒險,科幻", "dealsum":0, "dir":"詹姆斯·古恩 ", "dra":"<p>以全新的發燒音樂為背景，銀河護衛隊將繼續他們的冒險，並解開“星爵”彼得·奎爾（克里斯·帕拉特 飾）身世之謎，同時護衛隊成員們必須共同作戰，守護彼此，保衛護衛隊這個大家庭。</p>", "dur":136, "id":248683, "imax":true, "img":"http://p0.meituan.net/165.220/movie/fbe5f97c016c9f4520109dc70f458d4d83363.jpg", "isShowing":true, "late":false, "mk":0, "nm":"銀河護衛隊2", "photos":[ "http://p0.meituan.net/w.h/mmdb/8c0f7925dc5eac7725b31ebe3d43bfcb4096.jpeg", "http://p1.meituan.net/w.h/mmdb/91cfef170d8d6a8fc12eab5a20b590f36144.jpeg", "http://p1.meituan.net/w.h/mmdb/c49ddd3bcd2bfae834149de5ae937cc66144.jpeg", "http://p0.meituan.net/w.h/mmdb/f013e2d55285caab02873ec5a1947c796144.jpeg", "http://p0.meituan.net/w.h/mmdb/a16addab2c993eed9ec39a344df59c856144.jpeg", "http://p1.meituan.net/w.h/mmdb/62a5468f1062d0a5770e950946e72c4f6144.jpeg", "http://p0.meituan.net/w.h/mmdb/4f34d56d9b319bf4c502a043d682ee276144.jpeg", "http://p0.meituan.net/w.h/mmdb/5705531218da628cff533c316d22b6be8192.jpeg", "http://p1.meituan.net/w.h/mmdb/e67687ad91308b720e8fbba82dab11bf8192.jpeg", "http://p0.meituan.net/w.h/mmdb/27b52dba6932a94f7a06dd4bc645c1818192.jpeg", "http://p1.meituan.net/w.h/mmdb/cf43bd1f446b2871b06aad952e4e21156144.jpeg", "http://p1.meituan.net/w.h/mmdb/5132bc175e4d0655949fd4c11f3e606c6144.jpeg", "http://p0.meituan.net/w.h/mmdb/db3a390c46806873cb896f7a8185e9ac10240.jpeg", "http://p0.meituan.net/w.h/mmdb/a6d2b54c3b4677adbfa4b5144f8967b16144.jpeg", "http://p0.meituan.net/w.h/mmdb/d2951058ecb7d99562baf2cea24521d76144.jpeg", "http://p1.meituan.net/w.h/mmdb/700a0e47b8377f3b97a063543503987c8192.jpeg