小程序开发之热门电影

6 阅读 0 评论 0 点赞

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

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

一、小程序主体部分

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

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. 页面结构

其页面结构代码如下


  加载中...
    
        
        
            
                {{item.nm}}
                3Dimax
                3d
                imax
                2d
            
            {{item.sc}}
            {{item.wish}}人想看{{item.showInfo}}
            {{item.scm}}
            {{item.dir}} {{item.star}}
            购票预售

登录后复制

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.jsPage({
  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

其接口为

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. 页面结构

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

其页面结构代码如下


  加载中...
    
    
        
            {{films.MovieDetailModel.nm}}
            
            
        
        {{films.MovieDetailModel.scm}}
        {{films.MovieDetailModel.cat}}
        {{films.MovieDetailModel.src}} / {{films.MovieDetailModel.dur}}分钟
        {{films.MovieDetailModel.rt}}
        {{films.MovieDetailModel.wish}}人想看{{films.MovieDetailModel.showInfo}}
        {{films.MovieDetailModel.sc}}
    
    <video class="{{video}}" autoplay="false" bindended="vHid" src="{{films.MovieDetailModel.vd}}" controls></video>{{details}}<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.jsPage({
  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

其接口为

m.maoyan.com/movie/248683.json

登录后复制

其中248683为电影ID

返回数据如下所示：

{ "control":{ "expires":3600 }, "status":0, "data":{ "MovieDetailModel":{ "cat":"动作,冒险,科幻", "dealsum":0, "dir":"詹姆斯·古恩 ", "dra":"

以全新的发烧音乐为背景，银河护卫队将继续他们的冒险，并解开“星爵”彼得·奎尔（克里斯·帕拉特饰）身世之谜，同时护卫队成员们必须共同作战，守护彼此，保卫护卫队这个大家庭。

", "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", "http://p0.meituan.net/w.h/mmdb/3480a419b83b4cce2e5348eeac99c60a10240.jpeg", "http://p1.meituan.net/w.h/mmdb/5314fd2fb5aee9f4b9ae2973189bb0b44096.jpeg", "http://p0.meituan.net/w.h/mmdb/a191b5903f8472a1f453a62c20ce21ff4096.jpeg", "http://p0.meituan.net/w.h/mmdb/ed4bb3e125ba3be4f3fb854706d0734d16384.png" ], "pn":188, "preSale":0, "rt":"本周五上映", "sc":9.1, "scm":"星爵身世迷，终于见爹地", "showSnum":true, "snum":45359, "src":"美国", "star":"克里斯·帕拉特佐伊·索尔达娜戴夫·巴蒂斯塔范·迪塞尔布莱德利·库珀迈克尔·鲁克凯伦·吉兰庞·克莱门捷夫西尔维斯特·史泰龙库尔特·拉塞尔伊丽莎白·德比齐克里斯·沙利文肖恩·冈汤米·弗拉纳根劳拉·哈德克艾伦·史瓦兹汉娜·戈特斯曼希尔提·伯恩本·布劳德亚历克斯·克莱因卢克·库克埃文·琼斯乔·弗里亚特伦斯·罗斯摩尔吉米·尤因史蒂芬·布莱克哈特史提夫·阿吉布隆迪·巴鲁蒂理查·克里斯帝罗布·赞比塞拉·拉乌 Kendra Staub Milynn Sarley 赛斯·格林莫莉·奎恩迈克尔·罗森巴姆罗达·格里菲斯麦莉·赛勒斯斯坦·李大卫·哈塞尔霍夫 Mac Wells Elizabeth Ludlow 瓦耶特·奥莱夫格雷格·亨利 Damita Jane Howard 杰夫·高布伦文·瑞姆斯杨紫琼弗莱德·加勒 ", "vd":"http://maoyan.meituan.net/movie/videos/854x4807011e019c4ef46239c91f6636435051b.mp4", "ver":"2D/3D/IMAX 3D/中国巨幕", "vnum":47, "wish":154543, "wishst":0 } } }

登录后复制

三、程序效果图

【相关推荐】

1.微信小程序完整源码下载

2.微信小程序demo：阳淘

以上就是小程序开发之热门电影的详细内容，更多请关注慧达安全导航其它相关文章！

免责声明
1、本网站名称：慧达安全导航
2、本站永久网址：https//www.huida178.com/
3、本站所有资源来源于网友投稿和高价购买，所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习，本站不提供任何技术服务!
4、本站所有资源的属示图片和信息不代表本站的立场!本站只是储蓄平台及搬运
5、下载者禁止在服务器和虚拟机下进行搭建运营，本站所有资源不支持联网运行!只允许调试，参考和研究!!!!
6、未经原版权作者许可禁止用于任何商业环境，任何人不得擅作它用，下载者不得用于违反国家法律，否则发生的一切法律后果自行承担!
7、为尊重作者版权，请在下载24小时内删除!请购买原版授权作品，支持你喜欢的作者，谢谢!
8.若资源侵犯了您的合法权益，请持您的版权证书和相关原作品信息来信通知我们！QQ：1247526623我们会及时删除，给您带来的不便，我们深表歉意!
9、如下载链接失效、广告或者压缩包问题请联系站长处理
10、如果你也有好源码或者教程，可以发布到网站，分享有金币奖励和额外收入!
11、本站资源售价只是赞助，收取费用仅维持本站的日常运营所需
12、因源码具有可复制性，一经赞助，不得以任何形式退款。
13、本文内容由网友自发贡献和站长收集，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系1247526623@qq.com

转载请注明出处：慧达安全导航 » 小程序开发之热门电影

本文分类：微信小程序
本文标签：慧达安全导航
浏览次数：6 次浏览
发布日期：2024-12-24 20:33:57
本文链接：https://huida178.com/weixinxiaochengxu/136135

小程序开发之热门电影

一、小程序主体部分

二、电影页面部分

主页部分

详情页部分

三、程序效果图

评论列表共有 0 条评论

发表评论取消回复

小程序开发之热门电影

一、小程序主体部分

二、电影页面部分

主页部分

详情页部分

三、程序效果图

华硕bios定时开机设置

华硕怎么设置bios启动项

金山毒霸如何杀毒

mac系统rar解压软件

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复