設(shè)計(jì)一款豆瓣電影微信小程序汞贸，可以用它查看上映的電影以及電影詳情等內(nèi)容侥蒙。

image.png

1.電影頂部頁(yè)簽切換效果

在電影界面有3頁(yè)頁(yè)簽：上映暗膜、影院、我看鞭衩。頁(yè)簽的切換回帶動(dòng)相應(yīng)的內(nèi)容進(jìn)行切換顯示学搜；采用頂部頁(yè)簽切換的方式娃善，來(lái)完成各個(gè)頁(yè)面的顯示。
（1）添加一個(gè)項(xiàng)目瑞佩，進(jìn)入到app.json文件中聚磺，添加"pages/movie/movie","pages/movieDetail/movieDetail"2個(gè)文件路徑，刪除默認(rèn)創(chuàng)建的index炬丸、logs文件路徑瘫寝，將窗口導(dǎo)航欄背景色設(shè)置為黑色（#1A1A1A），導(dǎo)航標(biāo)題為豆瓣電影稠炬，文字顏色設(shè)置為白色（white）焕阿。

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

（2）在movie.wxml文件中，使用view視圖容器來(lái)布局頂部的3個(gè)標(biāo)簽首启。需要設(shè)置兩種樣式暮屡，一種是選中樣式select，另外一種是正常樣式normal毅桃。定義currentTab變量與頁(yè)簽索引值做比較褒纲，id為索引值，添加switchNav綁定事件钥飞。在movie.wxss添加相應(yīng)樣式莺掠。
點(diǎn)擊頁(yè)簽切換時(shí)，頁(yè)簽內(nèi)容滑動(dòng)進(jìn)行切換读宙，需要使用swiper滑塊視圖組件彻秆，根據(jù)currentTab變量的索引值來(lái)判斷顯示swiper哪個(gè)面板的內(nèi)容。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>上映內(nèi)容</view>
  </swiper-item>
  <swiper-item>
    <view>影院內(nèi)容</view>
  </swiper-item>
  <swiper-item>
    <view>我看內(nèi)容</view>
  </swiper-item>
</swiper>

(3)在movie.js文件中论悴，定義currentTab變量默認(rèn)值為0掖棉，添加swItchNav頁(yè)簽點(diǎn)擊事件墓律，點(diǎn)擊時(shí)獲取頁(yè)簽的id索引賦值給currentTab變量膀估。
添加onLoad生命周期函數(shù)，使用wx.getSystemInfo獲取窗口的高度和寬度耻讽，并且分別賦值給頁(yè)簽內(nèi)容高度winHeight和頁(yè)簽內(nèi)容寬度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.電影海報(bào)輪播效果

海報(bào)輪播效果是很多網(wǎng)站都會(huì)使用到的察纯，可以在有限的區(qū)域內(nèi)動(dòng)態(tài)地展示商品圖片信息等內(nèi)容。本次也涉及到的輪播圖效果针肥。
（1）進(jìn)行輪播圖的頁(yè)面布局饼记，引入所需的圖片。
（2）movie.js文件中定義海報(bào)輪播需要的變量值,indicatorDots: false慰枕，autoplay: true具则，interval: 5000，duration: 1000具帮。這樣就實(shí)現(xiàn)了海報(bào)的輪播效果圖博肋。具體實(shí)現(xiàn)可參考之前寫的關(guān)于swiper組件的使用文章低斋。

3.電影列表方式布局

電影列表布局采用每行3列的方式來(lái)展示電影海報(bào)和電影名稱。
（1）在movie.js文件匪凡，定義loadMovies函數(shù)使用wx.request來(lái)獲取豆瓣電影的電影列表消息膊畴，在onLoadMovies函數(shù)中進(jìn)行調(diào)用。定義movies變量用于承載電影列表數(shù)據(jù)病游。
（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;//電影總數(shù)量
        var len = parseInt(size / 3);//每行放置3個(gè)電影衬衬，計(jì)算出需要多少行
        console.log(len);
        console.log(subjects);
        page.setData({ movies: subjects });
        page.setData({ winHeight: (len + 1) * 230 });//動(dòng)態(tài)的設(shè)置電影內(nèi)容的高度
      }
    })
  },
  loadDetail: function (e) {
    var id = e.currentTarget.id;
    console.log(e.currentTarget.id)
    wx.navigateTo({
      url: '../movieDetail/movieDetail?id=' + id
    })
  }
})

注意：由于微信小程序請(qǐng)求服務(wù)器發(fā)起的是HTTPS請(qǐng)求买猖，需要在微信公眾平臺(tái)配置HTTPS服務(wù)器域名。否則會(huì)報(bào)錯(cuò)無(wú)法成功請(qǐng)求數(shù)據(jù)滋尉。假如沒(méi)有在微信公眾平臺(tái)配置只是想做些練習(xí)啥的政勃，可以按照這個(gè)方法配置下，就可以成功請(qǐng)求了兼砖。

image.png

4.電影詳情頁(yè)

在電影列表界面中奸远，點(diǎn)擊電影海報(bào)圖片可以進(jìn)入到電影詳情頁(yè)面查看具體的信息。電影詳情頁(yè)面在頂部也是采用頁(yè)面切換的方式進(jìn)行布局讽挟，布局方式與電影首頁(yè)一樣懒叛，在這不做過(guò)多描述。頁(yè)簽的下面是介紹電影相關(guān)的信息的區(qū)域往下就是電影其他詳細(xì)信息耽梅。
（1）可以看到在movie.js中l(wèi)oadDetail函數(shù)跳轉(zhuǎn)到詳情頁(yè)里將電影的id帶過(guò)去薛窥，在movieDetail.js通過(guò)拿到的id獲取電影詳情的信息并展示在頁(yè)面上。具體布局就不贅述了眼姐，以下是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 });
  }
})

小結(jié)：
demo主要介紹了微信小程序如何請(qǐng)求服務(wù)器數(shù)據(jù)及頁(yè)面布局等內(nèi)容诅迷。
下次可能會(huì)介紹微信小程序文件上傳，下載等API的使用众旗。