小程序开发之热门电影

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

一、小程序主体部分

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

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.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&q