微信小程序知識(shí)總結(jié)及案例集錦

微信小程序的發(fā)展會(huì)和微信公眾號(hào)一樣循头，在某個(gè)時(shí)間點(diǎn)爆發(fā)

學(xué)習(xí)路徑

1. 微信小程序最好的教程肯定是官方的文檔啦忿等，點(diǎn)擊這里直達(dá) 微信官方文檔

2. 認(rèn)真跟著文檔看一遍誊役，相信有vue前端經(jīng)驗(yàn)的看下應(yīng)該就能上手了因块，然后安裝 微信小程序開(kāi)發(fā)者工具

3. 新建一個(gè)quick start項(xiàng)目革娄，了解代碼結(jié)構(gòu)捅膘，這里附上整個(gè)quick start代碼翘地。

4. 然后就拿個(gè)順手的api練練手申尤，這里附上cnode代碼，跟著做完差不多就算入門了衙耕。

5. 入門之后就是看其他項(xiàng)目的實(shí)現(xiàn)了昧穿，這里會(huì)附上案例集錦，一些github的案例橙喘。

知識(shí)總結(jié)

tip：看到了另一份W3CSchool整理的文檔时鸵，可以結(jié)合官方文檔一起看

目錄結(jié)構(gòu)介紹

• app.js — 對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置。
• app.json — 對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑饰潜、窗口表現(xiàn)初坠、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等彭雾。
• app.wxss — 接受一個(gè)數(shù)組，每一項(xiàng)都是字符串，來(lái)指定小程序由哪些頁(yè)面組成丧失。

頁(yè)面生命周期

1. 小程序注冊(cè)完成后母截，加載頁(yè)面，觸發(fā)onLoad方法吴菠。
2. 頁(yè)面載入后觸發(fā)onShow方法者填，顯示頁(yè)面。
3. 首次顯示頁(yè)面做葵，會(huì)觸發(fā)onReady方法占哟，渲染頁(yè)面元素和樣式，一個(gè)頁(yè)面只會(huì)調(diào)用一次蜂挪。
4. 當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁(yè)面時(shí)重挑，觸發(fā)onHide方法。
5. 當(dāng)小程序有后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁(yè)面時(shí)棠涮，觸發(fā)onShow方法谬哀。
6. 當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁(yè)返回上一頁(yè)wx.navigateBack()，觸發(fā)onUnload

常規(guī)頁(yè)面A：onLoad()-->onShow()-->onReady()-->onHide()-->onUnload()
釋義：

• onLoad()：監(jiān)聽(tīng)頁(yè)面加載严肪，一個(gè)頁(yè)面只會(huì)調(diào)用一次
• onShow()：監(jiān)聽(tīng)頁(yè)面顯示史煎，每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次
• onReady()：監(jiān)聽(tīng)頁(yè)面初次渲染完成，一個(gè)頁(yè)面只會(huì)調(diào)用一次驳糯，代表頁(yè)面加載完畢篇梭，視圖層和邏輯層可進(jìn)行交互
• onHide()：監(jiān)聽(tīng)頁(yè)面隱藏，當(dāng)頁(yè)面被覆蓋或進(jìn)入后臺(tái)執(zhí)行
• onUnload()：監(jiān)聽(tīng)頁(yè)面卸載酝枢，當(dāng)頁(yè)面被關(guān)閉或內(nèi)存不足主動(dòng)銷毀頁(yè)面

wx.navigateTo跳轉(zhuǎn)狀態(tài)下恬偷，頁(yè)面A和頁(yè)面B的生命周期邏輯

1. 進(jìn)入A頁(yè)面：A執(zhí)行onLoad()-->onShow()-->onReady()；
2. A頁(yè)面navigateTo B頁(yè)面：A執(zhí)行onHide()帘睦，B執(zhí)行onLoad()-->onShow()-->onReady()袍患；
3. B頁(yè)面返回A頁(yè)面：B執(zhí)行onUnload()，A執(zhí)行onReady()竣付；
4. 退出A頁(yè)面：A執(zhí)行onUnload()诡延。

Page({
  data:{},
  onLoad:function(options){
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
  },
  onReady:function(){
    // 頁(yè)面渲染完成
  },
  onShow:function(){
    // 頁(yè)面顯示
  },
  onHide:function(){
    // 頁(yè)面隱藏
  },
  onUnload:function(){
    // 頁(yè)面關(guān)閉
  }
})

Page 實(shí)例的生命周期

組件

• 基本：view,text
• 表單：button,input,radio,slider
• 媒體：image,video,audio,canvas
• 模態(tài)：action-sheet,modal,toast,loading
• 容器：swiper,scroller
• 導(dǎo)航：navigator,tabbar

小程序開(kāi)發(fā)踩坑記錄

• 基本的防踩坑Q&A

• 最佳防踩坑的方式就是看這個(gè)微信小程序常見(jiàn)FAQ

• 好友坑過(guò)的開(kāi)發(fā)者社區(qū)已解決問(wèn)題

1. 小程序頁(yè)面空白

   • css兼容性問(wèn)webkit內(nèi)核
   • lineShopId長(zhǎng)度太長(zhǎng)，字符轉(zhuǎn)數(shù)字Number
   • post請(qǐng)求參數(shù)加上encodeURIComponent解析字符串

2. header要設(shè)置正確

   • get "content-type":'application/json'
   • post "content-type":'application/x-www-form-urlencoded'
   • content-Type:application/x-www-form-urlencoded,application/json

3. bind事件綁定不會(huì)阻止冒泡事件向上冒泡古胆，catch事件綁定可以阻止冒泡事件向上冒泡

4. image背景圖片地址必須是url或者base64/本地資源無(wú)法通過(guò) css 獲取 可以使用網(wǎng)絡(luò)圖片肆良，或者 base64，或者使用 <image/> 標(biāo)簽

5. 使用豎向滾動(dòng)時(shí)，需要給scroll-view一個(gè)固定高度惹恃，通過(guò) WXSS 設(shè)置 height夭谤。如果scroll-view高度設(shè)置為100%,則不能觸發(fā)上拉刷新和下拉加載事件......

6. App() 小程序注冊(cè)入口，全局唯一座舍。App()用來(lái)注冊(cè)一個(gè)小程序沮翔，全局只有一個(gè)，全局的數(shù)據(jù)也可以放到這里面來(lái)操作曲秉。

   // 注冊(cè)微信小程序采蚀，全局只有一個(gè)
   let appConfig = {
       // 小程序生命周期的各個(gè)階段
       onLaunch: function(){},
       onShow: function(){},
       onHide: function(){},
       onError: function(){},
   
       // 自定義函數(shù)或者屬性
       ...
   };
   App(appConfig);
   
   // 在別的地方可以獲取這個(gè)全局唯一的小程序?qū)嵗?const app = getApp();
   

   小程序并沒(méi)有提供銷毀的方式，所以只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間承二、或者系統(tǒng)資源占用過(guò)高的時(shí)候榆鼠，才會(huì)被真正的銷毀。

7. Page() 頁(yè)面注冊(cè)入口亥鸠。Page()用來(lái)注冊(cè)一個(gè)頁(yè)面妆够，維護(hù)該頁(yè)面的生命周期以及數(shù)據(jù)。

   // 注冊(cè)微信小程序负蚊，全局只有一個(gè)
   let pageConfig = {
       data: {},
       // 頁(yè)面生命周期的各個(gè)階段
       onLoad: function(){},
       onShow: function(){},
       onReady: function(){},
       onHide: function(){},
       onUnload: function(){},
       onPullDownRefresh: function(){},
       onReachBottom: function(){},
       onShareAppMessage: function(){},
   
       // 自定義函數(shù)或者屬性
       ...
   };
   Page(pageConfig);
   
   // 獲取頁(yè)面堆棧神妹，表示歷史訪問(wèn)過(guò)的頁(yè)面，最后一個(gè)元素為當(dāng)前頁(yè)面
   const page = getCurrentPages();
   

8. {{}} 不能執(zhí)行方法家妆，只能處理簡(jiǎn)單的運(yùn)算如 “+ - * /”鸵荠，比如遇到遍歷list，每個(gè)item的金額需要格式化伤极，只能在js里預(yù)先格式化好再setData一遍( ╯□╰ )

9. 數(shù)字鍵盤用 type="digit"

10. 禁止頁(yè)面下拉需要設(shè)置 "disableScroll": true

案例集錦

tip：從案例里可以看到很多其他小程序?qū)崿F(xiàn)的方式蛹找，多多看代碼

• 官方demo★★★★★ 官方demo可以看看布局啥的，實(shí)現(xiàn)啥的
  https://mp.weixin.qq.com/debug/wxadoc/dev/demo.html

• 官方quick start★★★★★ 官方的小程序哨坪，可以自己改動(dòng)看看效果
  https://github.com/junhey/wxapp/tree/master/quickStart

• cnodejs ★★★★ 自己做的第一款小程序庸疾，基本上覆蓋小程序的基本操作，推薦通過(guò)cnodejs的api來(lái)實(shí)踐開(kāi)發(fā)小程序
  https://github.com/junhey/wxapp-cnode

• 石頭剪刀布★★★★ 騰訊云團(tuán)隊(duì)出品当编，里面有websocket的使用
  https://github.com/CFETeam/weapp-demo-websocket

• v2ex ★★★
  https://github.com/liuyugang123/V2EX

• 精簡(jiǎn)版百思不得姐 ★★★
  https://github.com/shuncaigao/BS

• 電影推薦 ★★★
  https://github.com/liuyugang123/movie

• 計(jì)算器 ★★★
  https://github.com/dunizb/wxapp-sCalc

• 豆瓣圖書(shū) ★★★
  http://www.reibang.com/p/c35084200470

• 天氣 ★★★
  http://swiftcafe.io/2016/10/03/wx-weather-app/

• 空氣質(zhì)量查詢 ★★★
  http://blog.csdn.net/yulianlin/article/details/52692066

• github客戶端 ★★★
  https://blog.zhengxiaowai.cc/post/weapp-demo.html

• 知乎日?qǐng)?bào) ★★★
  https://github.com/liuyugang123/zhihuAPP

• 區(qū)塊鏈小程序 ★★★
  https://github.com/ghostjzf/xiaolian

• 時(shí)間管理小程序 ★★★
  https://github.com/FatDong1/time-record

更多

持續(xù)踩坑中...

后續(xù)會(huì)進(jìn)行不斷更新届慈，訂閱請(qǐng)點(diǎn)watch，收藏請(qǐng)點(diǎn)star忿偷，歡迎開(kāi)issues來(lái)提問(wèn)

原文鏈接：https://github.com/junhey/wxapp