微信小程序知識總結及案例集錦
微信小程序的發(fā)展會和微信公眾號一樣，在某個時間點爆發(fā)
學習路徑
微信小程序最好的教程肯定是官方的文檔啦，點擊這里直達 微信官方文檔
認真跟著文檔看一遍，相信有vue前端經(jīng)驗的看下應該就能上手了，然后安裝 微信小程序開發(fā)者工具
新建一個quick start項目，了解代碼結構，這里附上整個quick start代碼。
然后就拿個順手的api練練手，這里附上cnode代碼，跟著做完差不多就算入門了。
入門之后就是看其他項目的實現(xiàn)了，這里會附上案例集錦，一些github的案例。
知識總結
tip：看到了另一份W3CSchool整理的文檔，可以結合官方文檔一起看
目錄結構介紹
- app.js — 對本頁面的窗口表現(xiàn)進行配置。
- app.json — 對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設置網(wǎng)絡超時時間、設置多 tab 等。
- app.wxss — 接受一個數(shù)組，每一項都是字符串，來指定小程序由哪些頁面組成。
頁面生命周期
- 小程序注冊完成后，加載頁面，觸發(fā)onLoad方法。
- 頁面載入后觸發(fā)onShow方法，顯示頁面。
- 首次顯示頁面，會觸發(fā)onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次。
- 當小程序后臺運行或跳轉到其他頁面時，觸發(fā)onHide方法。
- 當小程序有后臺進入到前臺運行或重新進入頁面時，觸發(fā)onShow方法。
- 當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發(fā)onUnload
常規(guī)頁面A：onLoad()-->onShow()-->onReady()-->onHide()-->onUnload()
釋義：
- onLoad()：監(jiān)聽頁面加載，一個頁面只會調用一次
- onShow()：監(jiān)聽頁面顯示，每次打開頁面都會調用一次
- onReady()：監(jiān)聽頁面初次渲染完成，一個頁面只會調用一次，代表頁面加載完畢，視圖層和邏輯層可進行交互
- onHide()：監(jiān)聽頁面隱藏，當頁面被覆蓋或進入后臺執(zhí)行
- onUnload()：監(jiān)聽頁面卸載，當頁面被關閉或內(nèi)存不足主動銷毀頁面
wx.navigateTo跳轉狀態(tài)下，頁面A和頁面B的生命周期邏輯
- 進入A頁面：A執(zhí)行onLoad()-->onShow()-->onReady()；
- A頁面navigateTo B頁面：A執(zhí)行onHide()，B執(zhí)行onLoad()-->onShow()-->onReady()；
- B頁面返回A頁面：B執(zhí)行onUnload()，A執(zhí)行onReady()；
- 退出A頁面：A執(zhí)行onUnload()。
Page({
data:{},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關閉
}
})
組件
- 基本：view,text
- 表單：button,input,radio,slider
- 媒體：image,video,audio,canvas
- 模態(tài)：action-sheet,modal,toast,loading
- 容器：swiper,scroller
- 導航：navigator,tabbar
小程序開發(fā)踩坑記錄
基本的防踩坑Q&A
最佳防踩坑的方式就是看這個微信小程序常見FAQ
好友坑過的開發(fā)者社區(qū)已解決問題
-
小程序頁面空白
- css兼容性問webkit內(nèi)核
- lineShopId長度太長，字符轉數(shù)字Number
- post請求參數(shù)加上encodeURIComponent解析字符串
-
header要設置正確
- get "content-type":'application/json'
- post "content-type":'application/x-www-form-urlencoded'
- content-Type:application/x-www-form-urlencoded,application/json
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡
image背景圖片地址必須是url或者base64/本地資源無法通過 css 獲取 可以使用網(wǎng)絡圖片，或者 base64，或者使用 <image/> 標簽
使用豎向滾動時，需要給scroll-view一個固定高度，通過 WXSS 設置 height。如果scroll-view高度設置為100%,則不能觸發(fā)上拉刷新和下拉加載事件......
-
App() 小程序注冊入口，全局唯一。App()用來注冊一個小程序，全局只有一個，全局的數(shù)據(jù)也可以放到這里面來操作。
// 注冊微信小程序，全局只有一個 let appConfig = { // 小程序生命周期的各個階段 onLaunch: function(){}, onShow: function(){}, onHide: function(){}, onError: function(){}, // 自定義函數(shù)或者屬性 ... }; App(appConfig); // 在別的地方可以獲取這個全局唯一的小程序實例 const app = getApp();小程序并沒有提供銷毀的方式，所以只有當小程序進入后臺一定時間、或者系統(tǒng)資源占用過高的時候，才會被真正的銷毀。
-
Page() 頁面注冊入口。Page()用來注冊一個頁面，維護該頁面的生命周期以及數(shù)據(jù)。
// 注冊微信小程序，全局只有一個 let pageConfig = { data: {}, // 頁面生命周期的各個階段 onLoad: function(){}, onShow: function(){}, onReady: function(){}, onHide: function(){}, onUnload: function(){}, onPullDownRefresh: function(){}, onReachBottom: function(){}, onShareAppMessage: function(){}, // 自定義函數(shù)或者屬性 ... }; Page(pageConfig); // 獲取頁面堆棧，表示歷史訪問過的頁面，最后一個元素為當前頁面 const page = getCurrentPages(); {{}} 不能執(zhí)行方法，只能處理簡單的運算如 “+ - * /”，比如遇到遍歷list，每個item的金額需要格式化，只能在js里預先格式化好再setData一遍( ╯□╰ )
數(shù)字鍵盤用 type="digit"
禁止頁面下拉需要設置 "disableScroll": true
案例集錦
tip：從案例里可以看到很多其他小程序實現(xiàn)的方式，多多看代碼
官方demo★★★★★ 官方demo可以看看布局啥的，實現(xiàn)啥的
https://mp.weixin.qq.com/debug/wxadoc/dev/demo.html官方quick start★★★★★ 官方的小程序，可以自己改動看看效果
https://github.com/junhey/wxapp/tree/master/quickStartcnodejs ★★★★ 自己做的第一款小程序，基本上覆蓋小程序的基本操作，推薦通過cnodejs的api來實踐開發(fā)小程序
https://github.com/junhey/wxapp-cnode石頭剪刀布★★★★ 騰訊云團隊出品，里面有websocket的使用
https://github.com/CFETeam/weapp-demo-websocketv2ex ★★★
https://github.com/liuyugang123/V2EX精簡版百思不得姐 ★★★
https://github.com/shuncaigao/BS空氣質量查詢 ★★★
http://blog.csdn.net/yulianlin/article/details/52692066github客戶端 ★★★
https://blog.zhengxiaowai.cc/post/weapp-demo.html區(qū)塊鏈小程序 ★★★
https://github.com/ghostjzf/xiaolian時間管理小程序 ★★★
https://github.com/FatDong1/time-record
更多
持續(xù)踩坑中...
后續(xù)會進行不斷更新，訂閱請點watch，收藏請點star，歡迎開issues來提問
