在这篇微信小程序开发教程中，我们将介绍如何使用微信小程序开发热门电影及预览功能。

本文主要分为两个部分，小程序主体部分及电影主页和详情页页面部分

一、小程序主体部分

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

1. 小程序逻辑

  1. App({
  2.   onLaunch: function() {
  3.     // Do something initial when launch.
  4.   },
  5.   onShow: function() {
  6.       // Do something when show.
  7.   },
  8.   onHide: function() {
  9.       // Do something when hide.
  10.   },
  11.   globalData: 'I am global data'
  12. })

2. 小程序公共设置

主要注册两个页面，热门电影的主页及详情页

  1. {
  2.   "pages":[
  3.     "pages/index/index",
  4.     "pages/details/details"
  5.   ],
  6.   "window":{
  7.     "backgroundTextStyle":"light",
  8.     "navigationBarBackgroundColor": "#FF4D64",
  9.     "navigationBarTitleText": "热门电影",
  10.     "backgroundColor":"#FFF",
  11.     "navigationBarTextStyle":"white"
  12.   }
  13. }

二、电影页面部分

小程序页面主要由以下文件组成。

本项目程序分为两个页面：主页及详情页。

主页部分

主页效果图如下

1. 页面结构

其页面结构代码如下

  1. <loading hidden="{{loading}}">
  2.   加载中...
  3. </loading>
  4. <scroll-view class="container img-content" style="height: {{windowHeight}}px; width: {{windowWidth}}px; " scroll-y="true" bindscrolltoupper="pullDownRefresh" bindscrolltolower="pullUpLoad" lower-threshold="800">
  5.     <navigator class="list flex-box" wx:for="{{films}}" url="../details/details?title=navigate&id={{item.id}}&titles={{item.nm}}">
  6.         <view class="list-img"><image class="img" src="{{item.img}}"></image><image class="list-play" src="../../images/i-play.png"></image></view>
  7.         <view class="list-main flex-btn">
  8.             <view class="list-title list-brief">
  9.                 <text>{{item.nm}}</text>
  10.                 <test class="i-imax" wx:if="{{item.imax && item['3d']}}" src="../../tests/i-imax.png">3Dimax</test>
  11.                 <test class="i-imax" wx:elif="{{item['3d']}}" src="../../images/i-play.png">3d</test>
  12.                 <test class="i-imax" wx:elif="{{item['imax']}}" src="../../tests/i-star.png">imax</test>
  13.                 <test class="i-imax" wx:else="{{item['imax']}}" src="../../images/i-stars.png">2d</test>
  14.             </view>
  15.             <view class="list-size" wx:if="{{!item.preSale}}"><view class="star"><view style="width: {{item.sc * 10}}%" class="stars"></view></view>{{item.sc}}</view>
  16.             <view class="list-brief" wx:if="{{item.preSale}}"><text class="wish">{{item.wish}}人想看</text>{{item.showInfo}}</view>
  17.             <view class="list-brief">{{item.scm}}</view>
  18.             <view class="list-brief">{{item.dir}} {{item.star}}</view>
  19.             <view class="list-sale"><text wx:if="{{!item.preSale}}" class="sales">购票</text><text wx:if="{{item.preSale}}" class="pre-sale">预售</text></view>
  20.         </view>
  21.     </navigator>
  22. </scroll-view>

2. 样式表

样式代码如下所示

  1. /**index.wxss**/
  2. .flex-box{
  3.     display: flex;
  4. }
  5. .flex-btn{
  6.     flex:;
  7. }
  8. .list{
  9.     border-bottom: 1rpx solid #e5e5e5;
  10.     padding: 30rpx;
  11. }
  12. .list-img{
  13.     width: 130rpx;
  14.     height: 180rpx;
  15.     margin-right: 20rpx;
  16.     position: relative;
  17. }
  18. .list-img .img{
  19.     width: 130rpx;
  20.     height: 180rpx;
  21. }
  22. .list-play{
  23.     position: absolute;
  24.     left: 45rpx;
  25.     top: 70rpx;
  26.     width: 40rpx;
  27.     height: 40rpx;
  28. }
  29. .list-title{
  30.     height: 52rpx;
  31. }
  32. .list-title text{
  33.     font-size: 18px;
  34.     line-height: 52rpx;
  35.     color: #000;
  36. }
  37. .i-imax{
  38.     width: 52rpx;
  39.     height: 28rpx;
  40.     margin-left: 10rpx;
  41. }
  42. .list-size{
  43.     height: 40rpx;
  44.     font-size: 14px;
  45.     color: #8a869e;
  46. }
  47. .list-size .star{
  48.     width: 100rpx;
  49.     height: 20rpx;
  50.     background: url(../../images/i-star.png) no-repeat;
  51.     background-size: 100rpx;
  52.     display: inline-block;
  53.     margin-right: 10rpx;
  54. }
  55. .stars{
  56.     width: 100rpx;
  57.     height: 20rpx;
  58.     background: url(../../images/i-stars.png) no-repeat;
  59.     background-size: 100rpx;
  60.     float: left;
  61.     margin-right: 10rpx;
  62. }
  63. .list-brief{
  64.     font-size: 12px;
  65.     line-height: 48rpx;
  66.     color: #666;
  67.     overflow: hidden;
  68.     text-overflow: ellipsis;
  69.     white-space: nowrap;
  70.     width: 400rpx;
  71. }
  72. .list-brief .wish{
  73.     color: #108ee9;
  74.     border-right: 1rpx solid #666;
  75.     padding-right: 10rpx;
  76.     margin-right: 10rpx;
  77. }
  78. .list-main{
  79.     position: relative;
  80. }
  81. .list-sale{
  82.     position: absolute;
  83.     right: 10rpx;
  84.     top: 70rpx;
  85. }
  86. .list-sale text{
  87.     padding: 10rpx 18rpx;
  88.     border: 1rpx solid #37b7ff;
  89.     font-size: 14px;
  90.     color: #37b7ff;
  91.     border-radius: 6rpx;
  92. }
  93. .list-sale .pre-sale{
  94.     border: 1rpx solid #fea54c;
  95.     color: #fea54c;
  96. }

3、 页面逻辑处理

  1. //index.js
  2. Page({
  3.   data: {
  4.     films: [],
  5.     limit: 6,
  6.     loading: false,
  7.     windowHeight: 0,
  8.     windowWidth: 0
  9.   },
  10.   onLoad: function () {
  11.     this.setData({
  12.       loading: false
  13.     })
  14.   },
  15.   onShow: function(){
  16.     var that = this
  17.     wx.request({
  18.       url: 'http://m.maoyan.com/movie/list.json', //仅为示例，并非真实的接口地址
  19.       data: {
  20.         offset: 0,
  21.         type: 'hot',
  22.         limit: that.data.limit
  23.       },
  24.       header: {
  25.           'Content-Type': 'application/json'
  26.       },
  27.       success: function(res) {
  28.         console.log(res.data)
  29.         that.setData({
  30.           films: res.data.data.movies,
  31.           loading: true
  32.         })
  33.       }
  34.     })
  35.     wx.getSystemInfo({
  36.       success: (res) => {
  37.         that.setData({
  38.           windowHeight: res.windowHeight,
  39.           windowWidth: res.windowWidth
  40.         })
  41.       }
  42.     })
  43.   },
  44.   pullDownRefresh: function(e) {
  45.     this.onLoad()
  46.   },
  47.   pullUpLoad: function(e) {
  48.     var limit = this.data.limit + 6
  49.     console.log(limit)
  50.     this.setData({
  51.       limit: limit
  52.     })
  53.     this.onShow()
  54.   }
  55. })

这里使用是的猫眼电影的api

其接口为

  1. http://m.maoyan.com/movie/list.json

返回数据如下所示：

  1. {
  2.     "control":{
  3.         "expires":1800
  4.     },
  5.     "status":0,
  6.     "data":{
  7.         "hasNext":true,
  8.         "movies":[
  9.             {
  10.                 "showInfo":"今天64家影院放映1083场",
  11.                 "cnms":0,
  12.                 "sn":0,
  13.                 "late":false,
  14.                 "img":"http://p0.meituan.net/165.220/movie/fbe5f97c016c9f4520109dc70f458d4d83363.jpg",
  15.                 "sc":9.1,
  16.                 "ver":"2D/3D/IMAX 3D/中国巨幕",
  17.                 "rt":"本周五上映",
  18.                 "dur":136,
  19.                 "nm":"银河护卫队2",
  20.                 "showDate":"",
  21.                 "src":"",
  22.                 "vd":"",
  23.                 "dir":"詹姆斯·古恩",
  24.                 "star":"克里斯·帕拉特,佐伊·索尔达娜,戴夫·巴蒂斯塔",
  25.                 "cat":"动作,冒险,科幻",
  26.                 "wish":154543,
  27.                 "3d":true,
  28.                 "pn":188,
  29.                 "scm":"星爵身世迷，终于见爹地",
  30.                 "preSale":0,
  31.                 "imax":true,
  32.                 "snum":41866,
  33.                 "time":"",
  34.                 "id":248683
  35.             },
  36.             {
  37.                 "showInfo":"今天62家影院放映335场",
  38.                 "cnms":0,
  39.                 "sn":0,
  40.                 "late":false,
  41.                 "img":"http://p0.meituan.net/165.220/movie/aeb864fa21d578d845b9cefc056e40cb2874891.jpg",
  42.                 "sc":9.8,
  43.                 "ver":"2D",
  44.                 "rt":"本周五上映",
  45.                 "dur":140,
  46.                 "nm":"摔跤吧！爸爸",
  47.                 "showDate":"",
  48.                 "src":"",
  49.                 "vd":"",
  50.                 "dir":"尼特什·提瓦瑞",
  51.                 "star":"阿米尔·汗,萨卡诗·泰瓦,法缇玛·萨那·纱卡",
  52.                 "cat":"喜剧,动作,家庭",
  53.                 "wish":27412,
  54.                 "3d":false,
  55.                 "pn":54,
  56.                 "scm":"为圆摔跤梦，女儿不心疼",
  57.                 "preSale":0,
  58.                 "imax":false,
  59.                 "snum":19166,
  60.                 "time":"",
  61.                 "id":588362
  62.             },
  63.             {
  64.                 "showInfo":"今天63家影院放映256场",
  65.                 "cnms":0,
  66.                 "sn":0,
  67.                 "late":false,
  68.                 "img":"http://p1.meituan.net/165.220/movie/cc50791238502ae1fa08df764c5f5c97223987.jpg",
  69.                 "sc":9.1,
  70.                 "ver":"2D/中国巨幕",
  71.                 "rt":"2017-04-28上映",
  72.                 "dur":120,
  73.                 "nm":"拆弹·专家",
  74.                 "showDate":"",
  75.                 "src":"",
  76.                 "vd":"",
  77.                 "dir":"邱礼涛",
  78.                 "star":"刘德华,姜武,宋佳",
  79.                 "cat":"动作,悬疑,犯罪",
  80.                 "wish":49007,
  81.                 "3d":false,
  82.                 "pn":167,
  83.                 "scm":"爆炸袭击案，拆弹反恐难",
  84.                 "preSale":0,
  85.                 "imax":false,
  86.                 "snum":95491,
  87.                 "time":"",
  88.                 "id":346103
  89.             },
  90.             {
  91.                 "showInfo":"今天48家影院放映156场",
  92.                 "cnms":0,
  93.                 "sn":0,
  94.                 "late":false,
  95.                 "img":"http://p1.meituan.net/165.220/movie/af297f59e363ce96290dfea22f6fea0c153020.jpg",
  96.                 "sc":9.4,
  97.                 "ver":"2D/3D/IMAX 3D/中国巨幕/全景声",
  98.                 "rt":"2017-04-14上映",
  99.                 "dur":136,
  100.                 "nm":"速度与激情8",
  101.                 "showDate":"",
  102.                 "src":"",
  103.                 "vd":"",
  104.                 "dir":"F·加里·格雷",
  105.                 "star":"范·迪塞尔,杰森·斯坦森,道恩·强森",
  106.                 "cat":"动作,惊悚,犯罪",
  107.                 "wish":320713,
  108.                 "3d":true,
  109.                 "pn":226,
  110.                 "scm":"车王要黑化，家族被击垮",
  111.                 "preSale":0,
  112.                 "imax":true,
  113.                 "snum":899592,
  114.                 "time":"",
  115.                 "id":248700
  116.             },
  117.             {
  118.                 "showInfo":"今天46家影院放映133场",
  119.                 "cnms":0,
  120.                 "sn":0,
  121.                 "late":false,
  122.                 "img":"http://p1.meituan.net/165.220/movie/ea0131b3e9e40f226c7c2664f6185a3792752.jpg",
  123.                 "sc":8.9,
  124.                 "ver":"2D",
  125.                 "rt":"2017-04-27上映",
  126.                 "dur":107,
  127.                 "nm":"喜欢·你",
  128.                 "showDate":"",
  129.                 "src":"",
  130.                 "vd":"",
  131.                 "dir":"许宏宇",
  132.                 "star":"金城武,周冬雨,孙艺洲",
  133.                 "cat":"喜剧,爱情",
  134.                 "wish":30224,
  135.                 "3d":false,
  136.                 "pn":216,
  137.                 "scm":"美食嘉年华，爱情甜掉牙",
  138.                 "preSale":0,
  139.                 "imax":false,
  140.                 "snum":68306,
  141.                 "time":"",
  142.                 "id":672175
  143.             }
  144.         ]
  145.     }
  146. }

详情页部分

1. 页面结构

页面结构用一个视图显示电影的常用信息，以及一个预览视频的功能。

其页面结构代码如下

  1. <loading hidden="{{loading}}">
  2.   加载中...
  3. </loading>
  4. <view class="detail flex-box" url="">
  5.     <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>
  6.     <view class="detail-main flex-btn">
  7.         <view class="detail-title detail-brief">
  8.             <text>{{films.MovieDetailModel.nm}}</text>
  9.             <image class="i-imax" wx:if="{{films.MovieDetailModel.imax}}" src="../../images/i-imax.png"></image>
  10.             <image class="i-imax" wx:if="{{films.MovieDetailModel.preSale}}" src="../../images/i-imax.png"></image>
  11.         </view>
  12.         <view class="detail-brief">{{films.MovieDetailModel.scm}}</view>
  13.         <view class="detail-brief">{{films.MovieDetailModel.cat}}</view>
  14.         <view class="detail-brief">{{films.MovieDetailModel.src}} / {{films.MovieDetailModel.dur}}分钟</view>
  15.         <view class="detail-brief">{{films.MovieDetailModel.rt}}</view>
  16.         <view class="detail-brief" wx:if="{{films.MovieDetailModel.preSale}}"><text class="wish">{{films.MovieDetailModel.wish}}人想看</text>{{films.MovieDetailModel.showInfo}}</view>
  17.         <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>
  18.     </view>
  19.     <image class="bg" src="https://gw.alicdn.com/tps/i4/TB1pa7pJFXXXXX6XFXXwwg20FXX-640-448.png"></image>
  20. <video class="{{video}}" autoplay="false" bindended="vHid" src="{{films.MovieDetailModel.vd}}" controls></video>
  21. </view>
  22. <scroll-view class="details-dra"><view>{{details}}</view></scroll-view>
  23. <button type="primary" size="{{primarySize}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="pay">立即购票 </button>

2. 样式表

样式代码如下所示

  1. /**index.wxss**/
  2. .flex-box{
  3.     display: flex;
  4. }
  5. .flex-btn{
  6.     flex:;
  7. }
  8. .detail{
  9.     border-bottom: 1rpx solid #e5e5e5;
  10.     padding: 30rpx 30rpx 0 30rpx;
  11.     overflow: hidden;
  12.     position: relative;
  13. }
  14. .video-hide{
  15.     display: none;
  16. }
  17. .video-show{
  18.     display: block;
  19.     position: absolute;
  20.     width: 750rpx;
  21.     height: 406rpx;
  22.     top:;
  23.     left:;
  24. }
  25. .bg{
  26.     position: absolute;
  27.     left:;
  28.     top:;
  29.     width: 750rpx;
  30.     height: 1048rpx;
  31.     z-index: -1;
  32. }
  33. .detail-img{
  34.     width: 236rpx;
  35.     height: 376rpx;
  36.     margin-right: 20rpx;
  37.     position: relative;
  38. }
  39. .detail-img .img{
  40.     width: 236rpx;
  41.     height: 376rpx;
  42. }
  43. .detail-play{
  44.     position: absolute;
  45.     left: 70rpx;
  46.     top: 130rpx;
  47.     width: 80rpx;
  48.     height: 80rpx;
  49. }
  50. .detail-title{
  51.     height: 70rpx;
  52. }
  53. .detail-title text{
  54.     font-size: 18px;
  55.     line-height: 70rpx;
  56.     color: #FFF;
  57. }
  58. .i-imax{
  59.     width: 52rpx;
  60.     height: 28rpx;
  61.     margin-left: 10rpx;
  62. }
  63. .detail-size{
  64.     height: 40rpx;
  65.     font-size: 14px;
  66.     color: #FFF;
  67. }
  68. .detail-size .star{
  69.     width: 100rpx;
  70.     height: 20rpx;
  71.     background: url(../../images/i-star.png) no-repeat;
  72.     background-size: 100rpx;
  73.     display: inline-block;
  74.     margin-right: 10rpx;
  75. }
  76. .stars{
  77.     width: 100rpx;
  78.     height: 20rpx;
  79.     background: url(../../images/i-stars.png) no-repeat;
  80.     background-size: 100rpx;
  81.     float: left;
  82.     margin-right: 10rpx;
  83. }
  84. .detail-brief{
  85.     font-size: 14px;
  86.     line-height: 50rpx;
  87.     color: #FFF;
  88.     overflow: hidden;
  89.     text-overflow: ellipsis;
  90.     white-space: nowrap;
  91.     width: 400rpx;
  92. }
  93. .detail-brief .wish{
  94.     color: #FFF;
  95.     border-right: 1rpx solid #666;
  96.     padding-right: 10rpx;
  97.     margin-right: 10rpx;
  98. }
  99. .detail-main{
  100.     position: relative;
  101. }
  102. .detail-sale{
  103.     position: absolute;
  104.     right: 10rpx;
  105.     top: 70rpx;
  106. }
  107. .detail-sale text{
  108.     padding: 10rpx 18rpx;
  109.     border: 1rpx solid #37b7ff;
  110.     font-size: 14px;
  111.     color: #37b7ff;
  112.     border-radius: 6rpx;
  113. }
  114. .detail-sale .pre-sale{
  115.     border: 1rpx solid #fea54c;
  116.     color: #fea54c;
  117. }
  118. .details-dra view{
  119.     margin: 23rpx;
  120.     color: #333;
  121.     font-size: 14px;
  122.     line-height: 20px;
  123. }

3、 页面逻辑处理

  1. //index.js
  2. Page({
  3.   data: {
  4.     films: [],
  5.     loading: false,
  6.     title: '正在热映',
  7.     video: 'video-hide',
  8.     datails: '',
  9.     windowWidth: 0
  10.   },
  11.   onLoad: function (options) {
  12.     var id = 'http://m.maoyan.com/movie/' + options.id + '.json'
  13.     this.setData({
  14.       title: options.titles
  15.     })
  16.     var that = this
  17.     wx.request({
  18.       url: id, //仅为示例，并非真实的接口地址
  19.       data: {
  20.       },
  21.       header: {
  22.           'Content-Type': 'application/json'
  23.       },
  24.       success: function(res) {
  25.         console.log(res.data)
  26.         that.setData({
  27.           films: res.data.data,
  28.           loading: true
  29.         })
  30.         var pages = that.data.films.MovieDetailModel.dra
  31.         pages = pages.replace(/<.*?>/ig,"")
  32.         that.setData({
  33.           details: pages
  34.         })
  35.         console.log(pages)
  36.       }
  37.     })
  38.   },
  39.   onReady: function(){
  40.     var that = this
  41.     wx.setNavigationBarTitle({
  42.       title: that.data.title
  43.     })
  44.     wx.getSystemInfo({
  45.       success: (res) => {
  46.         that.setData({
  47.           windowHeight: res.windowHeight,
  48.           windowWidth: res.windowWidth
  49.         })
  50.       }
  51.     })
  52.   },
  53.   pay: function(){
  54.     console.log('pay');
  55.     wx.requestPayment({
  56.        'timeStamp': '',
  57.        'nonceStr': '',
  58.        'package': '',
  59.        'signType': 'MD5',
  60.        'paySign': '',
  61.        'success':function(res){
  62.           console.log('success');
  63.        },
  64.        'fail':function(res){
  65.           console.log('fail');
  66.        }
  67.     })
  68.   },
  69.   vShow: function(){
  70.     this.setData({
  71.       video: 'video-show'
  72.     })
  73.   },
  74.   vHid: function(){
  75.     this.setData({
  76.       video: 'video-hide'
  77.     })
  78.   }
  79. })

这里使用是的猫眼电影详情的api

其接口为

  1. http://m.maoyan.com/movie/248683.json

其中248683为电影ID

返回数据如下所示：

  1. {
  2.     "control":{
  3.         "expires":
  4.     },
  5.     "status":,
  6.     "data":{
  7.         "MovieDetailModel":{
  8.             "cat":"动作,冒险,科幻",
  9.             "dealsum":,
  10.             "dir":"詹姆斯·古恩 ",
  11.             "dra":"<p>以全新的发烧音乐为背景，银河护卫队将继续他们的冒险，并解开“星爵”彼得·奎尔（克里斯·帕拉特 饰）身世之谜，同时护卫队成员们必须共同作战，守护彼此，保卫护卫队这个大家庭。</p>",
  12.             "dur":,
  13.             "id":,
  14.             "imax":true,
  15.             "img":"http://p0.meituan.net/165.220/movie/fbe5f97c016c9f4520109dc70f458d4d83363.jpg",
  16.             "isShowing":true,
  17.             "late":false,
  18.             "mk":,
  19.             "nm":"银河护卫队2",
  20.             "photos":[
  21.                 "http://p0.meituan.net/w.h/mmdb/8c0f7925dc5eac7725b31ebe3d43bfcb4096.jpeg",
  22.                 "http://p1.meituan.net/w.h/mmdb/91cfef170d8d6a8fc12eab5a20b590f36144.jpeg",
  23.                 "http://p1.meituan.net/w.h/mmdb/c49ddd3bcd2bfae834149de5ae937cc66144.jpeg",
  24.                 "http://p0.meituan.net/w.h/mmdb/f013e2d55285caab02873ec5a1947c796144.jpeg",
  25.                 "http://p0.meituan.net/w.h/mmdb/a16addab2c993eed9ec39a344df59c856144.jpeg",
  26.                 "http://p1.meituan.net/w.h/mmdb/62a5468f1062d0a5770e950946e72c4f6144.jpeg",
  27.                 "http://p0.meituan.net/w.h/mmdb/4f34d56d9b319bf4c502a043d682ee276144.jpeg",
  28.                 "http://p0.meituan.net/w.h/mmdb/5705531218da628cff533c316d22b6be8192.jpeg",
  29.                 "http://p1.meituan.net/w.h/mmdb/e67687ad91308b720e8fbba82dab11bf8192.jpeg",
  30.                 "http://p0.meituan.net/w.h/mmdb/27b52dba6932a94f7a06dd4bc645c1818192.jpeg",
  31.                 "http://p1.meituan.net/w.h/mmdb/cf43bd1f446b2871b06aad952e4e21156144.jpeg",
  32.                 "http://p1.meituan.net/w.h/mmdb/5132bc175e4d0655949fd4c11f3e606c6144.jpeg",
  33.                 "http://p0.meituan.net/w.h/mmdb/db3a390c46806873cb896f7a8185e9ac10240.jpeg",
  34.                 "http://p0.meituan.net/w.h/mmdb/a6d2b54c3b4677adbfa4b5144f8967b16144.jpeg",
  35.                 "http://p0.meituan.net/w.h/mmdb/d2951058ecb7d99562baf2cea24521d76144.jpeg",
  36.                 "http://p1.meituan.net/w.h/mmdb/700a0e47b8377f3b97a063543503987c8192.jpeg",
  37.                 "http://p0.meituan.net/w.h/mmdb/3480a419b83b4cce2e5348eeac99c60a10240.jpeg",
  38.                 "http://p1.meituan.net/w.h/mmdb/5314fd2fb5aee9f4b9ae2973189bb0b44096.jpeg",
  39.                 "http://p0.meituan.net/w.h/mmdb/a191b5903f8472a1f453a62c20ce21ff4096.jpeg",
  40.                 "http://p0.meituan.net/w.h/mmdb/ed4bb3e125ba3be4f3fb854706d0734d16384.png"
  41.             ],
  42.             "pn":,
  43.             "preSale":,
  44.             "rt":"本周五上映",
  45.             "sc":9.1,
  46.             "scm":"星爵身世迷，终于见爹地",
  47.             "showSnum":true,
  48.             "snum":,
  49.             "src":"美国",
  50.             "star":"克里斯·帕拉特 佐伊·索尔达娜 戴夫·巴蒂斯塔 范·迪塞尔 布莱德利·库珀 迈克尔·鲁克 凯伦·吉兰 庞·克莱门捷夫 西尔维斯特·史泰龙 库尔特·拉塞尔 伊丽莎白·德比齐 克里斯·沙利文 肖恩·冈 汤米·弗拉纳根 劳拉·哈德克 艾伦·史瓦兹 汉娜·戈特斯曼 希尔提·伯恩 本·布劳德 亚历克斯·克莱因 卢克·库克 埃文·琼斯 乔·弗里亚 特伦斯·罗斯摩尔 吉米·尤因 史蒂芬·布莱克哈特 史提夫·阿吉 布隆迪·巴鲁蒂 理查·克里斯帝 罗布·赞比 塞拉·拉乌 Kendra Staub Milynn Sarley 赛斯·格林 莫莉·奎恩 迈克尔·罗森巴姆 罗达·格里菲斯 麦莉·赛勒斯 斯坦·李 大卫·哈塞尔霍夫 Mac Wells Elizabeth Ludlow 瓦耶特·奥莱夫 格雷格·亨利 Damita Jane Howard 杰夫·高布伦 文·瑞姆斯 杨紫琼 弗莱德·加勒 ",
  51.             "vd":"http://maoyan.meituan.net/movie/videos/854x4807011e019c4ef46239c91f6636435051b.mp4",
  52.             "ver":"2D/3D/IMAX 3D/中国巨幕",
  53.             "vnum":,
  54.             "wish":,
  55.             "wishst":
  56.         }
  57.     }
  58. }

三、程序效果图

  

四、源代码下载

扫描下方二维码并关注公众账号，回复 “1237” 获取

源代码使用方法，请参考  微信小程序开发入门教程

微信小程序开发(3) 热门电影的更多相关文章

  1. 微信小程序开发日记——高仿知乎日报（上）

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  2. 微信小程序开发之选项卡

    选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡 实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...

  3. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  4. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  5. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  6. 微信小程序开发日记——高仿知乎日报（下）

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  7. 微信小程序开发日记——高仿知乎日报（中）

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

  8. 微信小程序开发工具测评

    1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...

  9. 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?

    原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复   ...

随机推荐

  1. 【mysql】mysql尾部空格

    mysql 字段为varchar类型的在查询时候胡忽略尾部空格. 先看表结构 插入一条数据包含空格 在查询是可以查到的 所有在插入数据的时候要对插入字段的数据处理下,php可以用函数trim()去掉两 ...

  2. 20165223 week4测试补交与总结

    JDB调试程序 调试代码 public class SumofRecur1{ public static void main(String[] args) { int i = 0; for(Strin ...

  3. Golang Kernel For Jupyter-NoteBook

    上篇回顾:VSCode and NoteBook for JavaScript 正常流程 安装Go语言:sudo apt install golang 安装内核的相关依赖包:sudo apt inst ...

  4. js jquery select 操作 获取值,选中选项,增加,修改,删除

    select示例: <select id="sel"> <option value="1">one</option> < ...

  5. axios 使用

    <!DOCTYPE html> <html lang="en"> <head> {#导入静态文件#} {% load static %} < ...

  6. react-native中的navigator

    第一步安装相关插件 添加一些依赖 package com.awesomeproject; import com.facebook.react.ReactActivity; import com.fac ...

  7. TreeView CheckBox勾选联动

    http://www.cnblogs.com/excellently/p/TreeViewCheckBox.html 在C# Winform项目中用到了TreeView控件,并且需要勾选的功能.父子节 ...

  8. linux:awk修改输出分隔符

    file1的内容如下: a b c d e f g h 现在想要修改成 a b c:d e f g:h 则需要用到如下命令: awk -F " " '{print $1,$2,$3 ...

  9. CentOS 7 输入中文 & 安装搜狗输入法

    1.CentOS 7 输入中文 安装时,若选择了中文,CentOS 7 自带中文输入法:汉语(Intelligent Pinyin). 设置方法: 应用程序 → 系统工具 → 设置 → 区域和语言 → ...

  10. shiro:hasPermission 标签 ：验证当前用户是否拥有指定权限

    1.这些值是存在数据库里的,在哪里找呢?sys_menu 中的permission列. <shiro:hasPermission name="cms:article:edit" ...