微信小程序：仿豆瓣电影

设计一款豆瓣电影微信小程序，可以用它查看上映的电影以及电影详情等内容。

image.png

1.电影顶部页签切换效果

在电影界面有3页页签：上映、影院、我看。页签的切换回带动相应的内容进行切换显示；采用顶部页签切换的方式，来完成各个页面的显示。
（1）添加一个项目，进入到app.json文件中，添加"pages/movie/movie","pages/movieDetail/movieDetail"2个文件路径，删除默认创建的index、logs文件路径，将窗口导航栏背景色设置为黑色（#1A1A1A），导航标题为豆瓣电影，文字颜色设置为白色（white）。

{
  "pages": [
    "pages/movie/movie",
    "pages/movieDetail/movieDetail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#1A1A1A",
    "navigationBarTitleText": "豆瓣电影",
    "navigationBarTextStyle": "white"
  }
}

（2）在movie.wxml文件中，使用view视图容器来布局顶部的3个标签。需要设置两种样式，一种是选中样式select，另外一种是正常样式normal。定义currentTab变量与页签索引值做比较，id为索引值，添加switchNav绑定事件。在movie.wxss添加相应样式。
点击页签切换时，页签内容滑动进行切换，需要使用swiper滑块视图组件，根据currentTab变量的索引值来判断显示swiper哪个面板的内容。movie.wxml代码如下：

<view class="nav">
  <view id="0" class="{{currentTab == 0?'select':'normal'}}" bindtap="switchNav">上映</view>
  <view class="line">|</view>
  <view id="1" class="{{currentTab == 1?'select':'normal'}}" bindtap="switchNav">影院</view>
  <view class="line">|</view>
  <view id="2" class="{{currentTab == 2?'select':'normal'}}" bindtap="switchNav">我看</view>
</view>
<swiper current="{{currentTab}}" style="height:{{winHeight}}px">
  <swiper-item>
    <view>上映内容</view>
  </swiper-item>
  <swiper-item>
    <view>影院内容</view>
  </swiper-item>
  <swiper-item>
    <view>我看内容</view>
  </swiper-item>
</swiper>

(3)在movie.js文件中，定义currentTab变量默认值为0，添加swItchNav页签点击事件，点击时获取页签的id索引赋值给currentTab变量。
添加onLoad生命周期函数，使用wx.getSystemInfo获取窗口的高度和宽度，并且分别赋值给页签内容高度winHeight和页签内容宽度winWidth.

Page({
  data: {
    currentTab: 0
  },
  onLoad: function (e) {
    var page = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        page.setData({ winWidth: res.windowWidth });
        page.setData({ winHeight: res.windowHeight });
      }
    });
    this.loadMovies();
  },
  switchNav: function (e) {
    var id = e.currentTarget.id;
    this.setData({ currentTab: id });
  }
})

2.电影海报轮播效果

海报轮播效果是很多网站都会使用到的，可以在有限的区域内动态地展示商品图片信息等内容。本次也涉及到的轮播图效果。
（1）进行轮播图的页面布局，引入所需的图片。
（2）movie.js文件中定义海报轮播需要的变量值,indicatorDots: false，autoplay: true，interval: 5000，duration: 1000。这样就实现了海报的轮播效果图。具体实现可参考之前写的关于swiper组件的使用文章。

3.电影列表方式布局

电影列表布局采用每行3列的方式来展示电影海报和电影名称。
（1）在movie.js文件，定义loadMovies函数使用wx.request来获取豆瓣电影的电影列表消息，在onLoadMovies函数中进行调用。定义movies变量用于承载电影列表数据。
（2）获取到电影列表信息后，在movie.wxml中绑定loadDetail查看电影详情事件。

Page({
  onLoad: function (e) {
    var page = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        page.setData({ winWidth: res.windowWidth });
        page.setData({ winHeight: res.windowHeight });
      }
    });
    this.loadMovies();
  },
  loadMovies: function () {
    var page = this;
    var key = util.getDataKey();
    wx.request({
      url: 'https://api.douban.com/v2/movie/in_theaters?apikey=' + key,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
        console.log(res);
        var subjects = res.data.subjects;
        var size = subjects.length;//电影总数量
        var len = parseInt(size / 3);//每行放置3个电影，计算出需要多少行
        console.log(len);
        console.log(subjects);
        page.setData({ movies: subjects });
        page.setData({ winHeight: (len + 1) * 230 });//动态的设置电影内容的高度
      }
    })
  },
  loadDetail: function (e) {
    var id = e.currentTarget.id;
    console.log(e.currentTarget.id)
    wx.navigateTo({
      url: '../movieDetail/movieDetail?id=' + id
    })
  }
})

注意：由于微信小程序请求服务器发起的是HTTPS请求，需要在微信公众平台配置HTTPS服务器域名。否则会报错无法成功请求数据。假如没有在微信公众平台配置只是想做些练习啥的，可以按照这个方法配置下，就可以成功请求了。

image.png

4.电影详情页

在电影列表界面中，点击电影海报图片可以进入到电影详情页面查看具体的信息。电影详情页面在顶部也是采用页面切换的方式进行布局，布局方式与电影首页一样，在这不做过多描述。页签的下面是介绍电影相关的信息的区域往下就是电影其他详细信息。
（1）可以看到在movie.js中loadDetail函数跳转到详情页里将电影的id带过去，在movieDetail.js通过拿到的id获取电影详情的信息并展示在页面上。具体布局就不赘述了，以下是movieDetail.js的代码：

var util = require('../../utils/util.js')
Page({
  data: {
    currentTab: 0,
    winWidth: 0,
    winHeight: 0,
    movie: {},
    directors: [],
    casts: []
  },
  onLoad: function (e) {
    var page = this;
    var key = util.getDataKey();
    wx.request({
      url: 'https://api.douban.com/v2/movie/subject/' + e.id + '?apikey=' + key,
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
        console.log(res);
        var movie = res.data;
        page.setData({ movie: movie });
        page.setData({ directors: movie.directors });
        page.setData({ casts: movie.casts });
        wx.setNavigationBarTitle({
          title: movie.title
        })
      }
    });
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        page.setData({ winWidth: res.windowWidth });
        page.setData({ winHeight: res.windowHeight });
      }
    });
  },
  switchNav: function (e) {
    var id = e.currentTarget.id;
    this.setData({ currentTab: id });
  }
})

小结：
demo主要介绍了微信小程序如何请求服务器数据及页面布局等内容。
下次可能会介绍微信小程序文件上传，下载等API的使用。