小程序模板網(wǎng)

精品!微信小程序電影推薦demo實(shí)戰(zhàn)開發(fā)小結(jié)(附源碼及思維導(dǎo)圖)

發(fā)布時(shí)間:2017-11-23 17:43 所屬欄目:小程序開發(fā)教程

第一步 項(xiàng)目配置 一、編寫app.json 對(duì)整個(gè)項(xiàng)目的公共配置 1、pages:配置頁(yè)面路徑(必須),列出所有的頁(yè)面的路徑,所有存在的頁(yè)面都需要在此寫出,否則在頁(yè)面跳轉(zhuǎn)的時(shí)候會(huì)報(bào)出找不到頁(yè)面的錯(cuò)誤2、window:窗口配置 ...

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

V2.0版本

2016-12-28 更新到v2.0

UI

更新日志

  • 2016-11-20

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

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

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

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

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

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

    • 1.完成電影收藏和人物收藏功能
    • 2.搜索頁(yè)面添加為空時(shí)的提示頁(yè)面并封裝成組件
  • 2016-12-14

    • 1.完成相冊(cè)功能和關(guān)于頁(yè)面
    • 2.添加定位功能(gps)
  • 2016-12-24

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

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

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


一、編寫app.json

對(duì)整個(gè)項(xiàng)目的公共配置

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


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/17933.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢