本文已獲作者sesine授權(quán)轉(zhuǎn)載，授權(quán)地址：http://www.jianshu.com/p/447b36463f09

V2.0版本

2016-12-28 更新到v2.0

更新日志

• 2016-11-20

  • 1.添加下拉刷新功能
  • 2.列表改為模板渲染
  • 3.封裝了api請求的代碼提高可復(fù)用性

• 2016-11-21

  • 1.添加人物的詳情頁
  • 2.將電影詳情和人物詳情的網(wǎng)絡(luò)請求進(jìn)行了封裝

• 2016-11-22

  • 1.添加了消息通知組件
  • 2.搜索頁調(diào)整
  • 3.調(diào)整了目錄結(jié)構(gòu)，整合靜態(tài)資源(dist)和組件文件(component)

• 2016-11-25

  • 1.將網(wǎng)絡(luò)請求從wx.request改為fetch的方式
  • 2.完成搜索功能
  • 3.完成消息通知組件
  • 4.刪除了沒有用到的util文件夾

• 2016-12-03

  • 1.將電影列表的下拉刷新從scroll-view的bindscrolltolower改為Page的onReachBottom事件觸發(fā)
  • 2.將“我的”頁面的文件補(bǔ)全，功能列表改為數(shù)據(jù)渲染，添加跳轉(zhuǎn)。新增換膚
  • 3.刪除了tabBar中的搜索選項(xiàng)，添加“我的”選項(xiàng)
  • 4.首頁搜索欄（點(diǎn)擊跳轉(zhuǎn)到搜索頁）添加輪播圖
  • 5.添加定位功能，在小程序載入時進(jìn)行定位
  • 6.添加瀏覽記錄、收藏、相冊、設(shè)置、搖一搖功能（都在開發(fā)中）

• 2016-12-04

  • 1.將api列表 banner列表、搜索關(guān)鍵詞列表、皮膚列表整合配置文件(config.js)
  • 2.完成換膚、設(shè)置、個人資料（還差修改）、搖一搖功能（再次進(jìn)入不能搖的問題還需解決）
  • 3.添加util文件及文件夾，用于封裝獲取并格式化時間等工具類方法
  • 4.消息組件修改，刪除了成功、失敗等情況，避免與wx.showToast重合，添加了網(wǎng)絡(luò)不正常的提示
  • 5.電影詳情頁面添加存儲瀏覽歷史的功能

• 2016-12-06

  • 1.完成電影收藏和人物收藏功能
  • 2.搜索頁面添加為空時的提示頁面并封裝成組件

• 2016-12-14

  • 1.完成相冊功能和關(guān)于頁面
  • 2.添加定位功能（gps）

• 2016-12-24

  • 1.相冊的背景圖片方式改成image標(biāo)簽的方式
  • 2.添加搖一搖debug測試開關(guān)變量

github地址：https://github.com/yesifeng/wechat-weapp-movie
提示：v2.0代碼會跟文檔有一些出入，但大部分都是相同的

第一步 項(xiàng)目配置

---

一、編寫app.json

對整個項(xiàng)目的公共配置

1、pages：配置頁面路徑（必須），列出所有的頁面的路徑，所有存在的頁面都需要在此寫出，否則在頁面跳轉(zhuǎn)的時候會報出找不到頁面的錯誤
2、window：窗口配置，配置導(dǎo)航及窗口的背景色和文字顏色，還有導(dǎo)航文字和是否允許窗口進(jìn)行下拉刷新
3、tabBar：tab欄配置，配置tab欄背景色及出現(xiàn)位置，上邊框的顏色（目前只支持黑或白），文字顏色及文字選中顏色，最核心的配置是list即tab欄的列表，官方規(guī)定最少2個，最多5個，每個列表項(xiàng)目可配置頁面路徑、文字、圖標(biāo)及選中時圖標(biāo)的地址
4、network：網(wǎng)絡(luò)配置，配置網(wǎng)絡(luò)請求、上傳下載文件、socket連接的超時時間
5、debug：調(diào)試模式，建議開發(fā)時開啟（true），可以看到頁面注冊、頁面跳轉(zhuǎn)及數(shù)據(jù)初始化的信息，另外報錯的錯誤信息也會比較詳細(xì)

{
  "pages": [
    "pages/popular/popular",
    "pages/coming/coming",
    "pages/top/top",
    "pages/search/search",
    "pages/filmDetail/filmDetail",
    "pages/personDetail/personDetail",
    "pages/searchResult/searchResult"
  ],
  "window": {
    "navigationBarBackgroundColor": "#47a86c",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText":  "電影推薦",
    "backgroundColor": "#fff",
    "backgroundTextStyle": "dark"
  },
  "tabBar": {
    "color": "#686868",
    "selectedColor": "#47a86c",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/popular/popular",
      "iconPath": "dist/images/popular_icon.png",
      "selectedIconPath": "dist/images/popular_active_icon.png",
      "text": "熱映"
    }, {
      "pagePath": "pages/coming/coming",
      "iconPath": "dist/images/coming_icon.png",
      "selectedIconPath": "dist/images/coming_active_icon.png",
      "text": "待映"
    },{
      "pagePath": "pages/search/search",
      "iconPath": "dist/images/search_icon.png",
      "selectedIconPath": "dist/images/search_active_icon.png",
      "text": "搜索"
    },
    {
      "pagePath": "pages/top/top",
      "iconPath": "dist/images/top_icon.png",
      "selectedIconPath": "dist/images/top_active_icon.png",
      "text": "口碑"
    }]
  },
  "networkTimeout": {
    "request": 10000,