第一步 項目配置

一、編寫app.json

對整個項目的公共配置

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

1. {
2. "pages": [
3. "pages/popular/popular",
4. "pages/coming/coming",
5. "pages/top/top",
6. "pages/search/search",
7. "pages/filmDetail/filmDetail",
8. "pages/personDetail/personDetail",
9. "pages/searchResult/searchResult"
10. ],
11. "window": {
12. "navigationBarBackgroundColor": "#47a86c",
13. "navigationBarTextStyle": "white",
14. "navigationBarTitleText": "電影推薦",
15. "backgroundColor": "#fff",
16. "backgroundTextStyle": "dark"
17. },
18. "tabBar": {
19. "color": "#686868",
20. "selectedColor": "#47a86c",
21. "backgroundColor": "#ffffff",
22. "borderStyle": "white",
23. "list": [{
24. "pagePath": "pages/popular/popular",
25. "iconPath": "dist/images/popular_icon.png",
26. "selectedIconPath": "dist/images/popular_active_icon.png",
27. "text": "熱映"
28. }, {
29. "pagePath": "pages/coming/coming",
30. "iconPath": "dist/images/coming_icon.png",
31. "selectedIconPath": "dist/images/coming_active_icon.png",
32. "text": "待映"
33. },{
34. "pagePath": "pages/search/search",
35. "iconPath": "dist/images/search_icon.png",
36. "selectedIconPath": "dist/images/search_active_icon.png",
37. "text": "搜索"
38. },
39. {
40. "pagePath": "pages/top/top",
41. "iconPath": "dist/images/top_icon.png",
42. "selectedIconPath": "dist/images/top_active_icon.png",
43. "text": "口碑"
44. }]
45. },
46. "networkTimeout": {
47. "request": 10000,
48. "downloadFile": 10000
49. },
50. "debug": true
51. }

二、確定目錄結構

根據(jù)UI圖，提取組件和公共樣式/腳本，以及page的目錄

• comm - 公用的腳本及樣式
  • script - 公共腳本
    • config.js 配置信息 （單頁數(shù)據(jù)量，城市等）
    • fetch.js 接口調(diào)用 （電影列表及詳情，人物詳情、搜索）
  • style - 公共樣式
    • animation.wxss 動畫
• component - 公用的組件
  • filmList - 電影列表
    • filmList.wxml - 組件結構
    • filmList.wxss - 組件樣式
• dist - 靜態(tài)資源
  • images 本地圖片，主要存導航的圖標 （樣式中不可引用本地圖像資源）
• pages - 頁面
  • popular - 頁面文件夾 （"popular"為自定義的頁面名稱，頁面相關文件的文件名需與頁面名相同）
    • popular.js 頁面邏輯
    • popular.wxml 頁面結構
    • popular.wxss 頁面樣式
    • popular.json 頁面窗口配置 （可參考app.json中的window配置）
• app.js - 小程序整體邏輯 （初始化、顯示、隱藏的事件，以及存放全局數(shù)據(jù)）
• app.json - 小程序公共配置
• app.wxss - 小程序公共樣式

第二步 編寫組件

電影列表

結構