最近不想寫論文，就想搗鼓點(diǎn)新東西吧，就邊看官方文檔，花了3天時(shí)間寫了一個(gè)簡(jiǎn)單的仿豆瓣電影的微信小程序，給大家分享一下教程吧。

源碼&效果圖

源碼點(diǎn)擊這里，歡迎star

運(yùn)行方法：

下載微信web開發(fā)者工具
新建項(xiàng)目，項(xiàng)目目錄為代碼存放目錄
點(diǎn)擊開發(fā)者工具中的編譯即可在模擬器里看到

效果圖如下
效果1 效果2
效果3 效果4

開發(fā)環(huán)境與項(xiàng)目簡(jiǎn)介

微信提供了一個(gè)微信開發(fā)者工具，可以完成小程序的 API 和頁(yè)面的開發(fā)調(diào)試、代碼查看和編輯、小程序預(yù)覽和發(fā)布等功能。下載地址
下載后，打開該工具，選擇代碼目錄和申請(qǐng)的AppID，勾選quickStart選項(xiàng)，這樣會(huì)創(chuàng)建幾個(gè)基礎(chǔ)頁(yè)面。

正好在寫代碼的第二天，微信開發(fā)者工具就全新改版，比原來(lái)好多了，原來(lái)的console調(diào)試界面與編輯代碼不在同一個(gè)頁(yè)面，十分麻煩，現(xiàn)在就像平時(shí)前端調(diào)試一樣，調(diào)試界面與代碼編輯頁(yè)面在同一個(gè)界面，方便多了。

項(xiàng)目代碼結(jié)構(gòu)

這里說(shuō)一下，在新建目錄后，可以選擇添加page,js,wxml,wxss,json文件，如果直接添加page文件的話，會(huì)直接在該目錄下生成與目錄相同名字的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件。

豆瓣電影API

【獲取正在上映電影】
https://api.douban.com/v2/movie/in_theaters
【獲取豆瓣TOP250電影】
https://api.douban.com/v2/movie/top250
【獲取即將上映電影】
https://api.douban.com/v2/movie/coming_soon
【獲取具體某一電影信息】
https://api.douban.com/v2/movie/subject/:id
詳細(xì)數(shù)據(jù)情況可看
https://developers.douban.com/wiki/?title=movie_v2

其實(shí)前三個(gè)API返回的數(shù)據(jù)都是一致的，只是返回的電影類型數(shù)據(jù)不一樣而已，所以在list頁(yè)面，我們只要傳入不同的類型即可。在電影列表頁(yè)和首頁(yè)，都有展示電影的基礎(chǔ)信息（海報(bào)，名字，評(píng)分），所以可以把這個(gè)部分拿出來(lái)做一個(gè)模板公用。
大體的思路就是這樣，比較簡(jiǎn)單。

配置小程序窗口和導(dǎo)航欄

在根目錄下的app.json文件中配置小程序的窗口樣式和導(dǎo)航欄

屬性信息如圖，來(lái)自官網(wǎng)

點(diǎn)擊上方的“編譯”，就可以看到效果

我們?cè)谡{(diào)試具體某一個(gè)頁(yè)面的時(shí)候，可以添加面板上方中間的”添加編譯模式”，填寫相關(guān)參數(shù)，這樣就不用從首頁(yè)進(jìn)去調(diào)試了。

具體代碼編寫

這里只講一下首頁(yè)代碼的情況，其他頁(yè)面用到的屬性基本雷同。這里不介紹小程序的使用語(yǔ)法，請(qǐng)先在官網(wǎng)上瀏覽個(gè)大概

wx.showLoading()

在最開始進(jìn)入頁(yè)面時(shí)，還沒(méi)加載完數(shù)據(jù)時(shí)，我們想要有一個(gè)loading效果，可直接使用小程序的api
wx.showLoading(OBJECT)
顯示 loading 提示框, 需主動(dòng)調(diào)用 wx.hideLoading 才能關(guān)閉提示框

onLoad: function () {
    wx.showLoading({
      title: '全力加載中...',
    })
   
}

加載完，需要關(guān)閉時(shí)，就只需要調(diào)用即可wx.hideLoading();
onLoad 表示監(jiān)聽(tīng)頁(yè)面加載

wx.request()

請(qǐng)求數(shù)據(jù)調(diào)用wx.request();
詳細(xì)屬性介紹點(diǎn)擊這里

因?yàn)檎?qǐng)求電影列表在list和index頁(yè)面都需要用到，所以我在app.js作為一個(gè)全局的方法來(lái)寫

getFilminfo:function(pageType,start,count,cb) {//電影列表類型，開始數(shù)據(jù)下標(biāo)，請(qǐng)求總數(shù)，callback函數(shù)
    var that = this;
    wx.request({
      url: that.globalData.basicUrl +"/" + pageType + '?start=' + start + '&count=' + count,
      // url:url,
      header: {
        "Content-Type": "json",
      },
      success: function (res) {
        cb(res);
      }
    }) 
  },
  globalData: {
    userInfo: null,
    basicUrl:"https://api.douban.com/v2/movie",
    pageTypelist: {"coming_soon":"即將上映","in_theaters":"正在熱映","top250":"TOP250電影"}
  }

然而，在調(diào)用接口的時(shí)候發(fā)現(xiàn)了這樣的錯(cuò)誤

原因是我在開發(fā)配置里，沒(méi)有豆瓣api的域名添加到request合法域名里，
所以只要在配置里加上需要的即可

所以在index.js中，調(diào)用這個(gè)全局方法如下：

1 2	//獲取應(yīng)用實(shí)例 var app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    films:[{},{},{}]
  },
  onLoad: function () {
    wx.showLoading({
      title: '全力加載中...',
    })
    console.log('onLoad')
    var that = this;
    var typelist = ["in_theaters","coming_soon","top250"];
    var titlelist = ["正在熱映","即將上映", "TOP250電影"];
    for(let i = 0;i<typelist.length;i++){
      var type = typelist[i];
      app.getFilminfo(type, 0, 8, function (res) {
        wx.hideLoading();
        var data = https://www.wxapp-union.com/res.data;
        data.subjects.map(function (item) {
          if (item.title.length > 8) {
            item.title = item.title.slice(0, 7) + "...";
          }
          if (item.rating.average>=9.5){
            item.rating.star = "star10";
          }else{
            item.rating.star = "star" + Math.round(item.rating.average);
          }
          console.log(item.rating.star);
        })
        that.data.films[i] = {title:titlelist[i],data:data.subjects,type:typelist[i]};
        that.setData({
          films: that.data.films
        });
        console.log(that.data.films);
      })
    }
  }
})

我們通過(guò)“更多”按鈕跳轉(zhuǎn)到對(duì)應(yīng)的電影列表list頁(yè)面，所以需要綁定事件

在index.wxml中，

1	<button bindtap="toView" data-type="{{filminfo.type}}" class="more-btn" plain="false">更多></button>

bindtap就是對(duì)應(yīng)是事件名字，同時(shí)我們需要設(shè)置data-type屬性，屬性值即是電影列表類型
在index.js中

toView: function(e) {
    var temp = e.currentTarget.dataset;//獲取當(dāng)前組件上由data-開頭的自定義屬性組成的集合
    wx.navigateTo({
      url: '../list/list?type=' + temp.type//temp.type即是當(dāng)時(shí)data-type屬性值
    })
  },

wx.navigateTo(）就是路由跳轉(zhuǎn)的api

模板

因?yàn)殡娪暗幕A(chǔ)信息展示在多個(gè)頁(yè)面中都有用到，我們單獨(dú)提出來(lái)寫個(gè)電影預(yù)覽模板

<template name="movieThumb">  
<view wx:key="id" class="film-item" data-title="{{title}}" data-id="{{id}}"  bindtap="detail">
  <image src=https://www.wxapp-union.com/"{{images.medium}}" alt="{{alt}}" class="film-image"></image>  
  <text class="film-title">{{title}}</text>  
  <view class="film-rate" wx:if="{{rating.average!=0}}">
    <view class="film-star {{rating.star}}"></view>
    <text>{{rating.average}}</text>
  </view>
  <text class="film-rate" wx:else>暫無(wú)評(píng)分</text>  
</view>
</template>

模板名字設(shè)置為“movieThumb”

例如在首頁(yè)中有用到該模塊，那在index.wxml中如下調(diào)用即可

<import src=https://www.wxapp-union.com/"../template/movieThumb.wxml" />
 
 <scroll-view scroll-x="true" class="filmlist">
        <template is="movieThumb" wx:for-items="{{filminfo.data}}"  wx:for-item="film" wx:key="id" data=https://www.wxapp-union.com/"{{...film}}">   
        </template>
</scroll-view>