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

源碼&效果圖

源碼點擊這(zhè)裏，歡迎star

運行方法：

下載微信web開發者工具
新建項目，項目目錄爲(wéi / wèi)代碼存放目錄
點擊開發者工具中的(de)編譯即可在(zài)模拟器裏看到(dào)

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

開發環境與項目簡介

微信提供了(le／liǎo)一個(gè)微信開發者工具，可以(yǐ)完成小程序的(de) API 和(hé / huò)頁面的(de)開發調試、代碼查看和(hé / huò)編輯、小程序預覽和(hé / huò)發布等功能。下載地(dì / de)址
下載後，打開該工具，選擇代碼目錄和(hé / huò)申請的(de)AppID，勾選quickStart選項，這(zhè)樣會創建幾個(gè)基礎頁面。

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

項目代碼結構

這(zhè)裏說(shuō)一下，在(zài)新建目錄後，可以(yǐ)選擇添加page,js,wxml,wxss,json文件，如果直接添加page文件的(de)話，會直接在(zài)該目錄下生成與目錄相同名字的(de)四個(gè)不(bù)同後綴文件的(de)組成，如：index.js、index.wxml、index.wxss、index.json。.js後綴的(de)文件是(shì)腳本文件，.json後綴的(de)文件是(shì)配置文件，.wxss後綴的(de)是(shì)樣式表文件，.wxml後綴的(de)文件是(shì)頁面結構文件。

豆瓣電影API

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

其實前三個(gè)API返回的(de)數據都是(shì)一緻的(de)，隻是(shì)返回的(de)電影類型數據不(bù)一樣而(ér)已，所以(yǐ)在(zài)list頁面，我們隻要(yào / yāo)傳入不(bù)同的(de)類型即可。在(zài)電影列表頁和(hé / huò)首頁，都有展示電影的(de)基礎信息（海報，名字，評分），所以(yǐ)可以(yǐ)把這(zhè)個(gè)部分拿出(chū)來(lái)做一個(gè)模闆公用。
大(dà)體的(de)思路就(jiù)是(shì)這(zhè)樣，比較簡單。

配置小程序窗口和(hé / huò)導航欄

在(zài)根目錄下的(de)app.json文件中配置小程序的(de)窗口樣式和(hé / huò)導航欄

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

點擊上(shàng)方的(de)“編譯”，就(jiù)可以(yǐ)看到(dào)效果

我們在(zài)調試具體某一個(gè)頁面的(de)時(shí)候，可以(yǐ)添加面闆上(shàng)方中間的(de)”添加編譯模式”，填寫相關參數，這(zhè)樣就(jiù)不(bù)用從首頁進去調試了(le／liǎo)。

具體代碼編寫

這(zhè)裏隻講一下首頁代碼的(de)情況，其他(tā)頁面用到(dào)的(de)屬性基本雷同。這(zhè)裏不(bù)介紹小程序的(de)使用語法，請先在(zài)官網上(shàng)浏覽個(gè)大(dà)概

wx.showLoading()

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

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

加載完，需要(yào / yāo)關閉時(shí)，就(jiù)隻需要(yào / yāo)調用即可wx.hideLoading();
onLoad 表示監聽頁面加載

wx.request()

請求數據調用wx.request();
詳細屬性介紹點擊這(zhè)裏

因爲(wéi / wèi)請求電影列表在(zài)list和(hé / huò)index頁面都需要(yào / yāo)用到(dào)，所以(yǐ)我在(zài)app.js作爲(wéi / wèi)一個(gè)全局的(de)方法來(lái)寫

getFilminfo:function(pageType,start,count,cb) {//電影列表類型，開始數據下标，請求總數，callback函數
    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":"即将上(shàng)映","in_theaters":"正在(zài)熱映","top250":"TOP250電影"}
  }

然而(ér)，在(zài)調用接口的(de)時(shí)候發現了(le／liǎo)這(zhè)樣的(de)錯誤

原因是(shì)我在(zài)開發配置裏，沒有豆瓣api的(de)域名添加到(dào)request合法域名裏，
所以(yǐ)隻要(yào / yāo)在(zài)配置裏加上(shàng)需要(yào / yāo)的(de)即可

所以(yǐ)在(zài)index.js中，調用這(zhè)個(gè)全局方法如下：

1 2	//獲取應用實例 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 = ["正在(zài)熱映","即将上(shàng)映", "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);
      })
    }
  }
})

我們通過“更多”按鈕跳轉到(dào)對應的(de)電影列表list頁面，所以(yǐ)需要(yào / yāo)綁定事件

在(zài)index.wxml中，

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

bindtap就(jiù)是(shì)對應是(shì)事件名字，同時(shí)我們需要(yào / yāo)設置data-type屬性，屬性值即是(shì)電影列表類型
在(zài)index.js中

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

wx.navigateTo(）就(jiù)是(shì)路由跳轉的(de)api

模闆

因爲(wéi / wèi)電影的(de)基礎信息展示在(zài)多個(gè)頁面中都有用到(dào)，我們單獨提出(chū)來(lái)寫個(gè)電影預覽模闆

<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>暫無評分</text>  
</view>
</template>

模闆名字設置爲(wéi / wèi)“movieThumb”

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

<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>