摘要：對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑窗口表現(xiàn)設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間設(shè)置多等。

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

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

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

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

然后就拿個(gè)順手的api練練手，這里附上cnode代碼，跟著做完差不多就算入門(mén)了。

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

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

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è)面組成。

小程序注冊(cè)完成后，加載頁(yè)面，觸發(fā)onLoad方法。

頁(yè)面載入后觸發(fā)onShow方法，顯示頁(yè)面。

首次顯示頁(yè)面，會(huì)觸發(fā)onReady方法，渲染頁(yè)面元素和樣式，一個(gè)頁(yè)面只會(huì)調(diào)用一次。

當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁(yè)面時(shí)，觸發(fā)onHide方法。

當(dāng)小程序有后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁(yè)面時(shí)，觸發(fā)onShow方法。

當(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的生命周期邏輯

進(jìn)入A頁(yè)面：A執(zhí)行onLoad()-->onShow()-->onReady()；

A頁(yè)面navigateTo B頁(yè)面：A執(zhí)行onHide()，B執(zhí)行onLoad()-->onShow()-->onReady()；

B頁(yè)面返回A頁(yè)面：B執(zhí)行onUnload()，A執(zhí)行onReady()；

退出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)閉
  }
})

基本：view,text

表單：button,input,radio,slider

媒體：image,video,audio,canvas

模態(tài)：action-sheet,modal,toast,loading

容器：swiper,scroller

導(dǎo)航：navigator,tabbar

基本的防踩坑Q&A

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

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

小程序頁(yè)面空白

css兼容性問(wèn)webkit內(nèi)核

lineShopId長(zhǎng)度太長(zhǎng)，字符轉(zhuǎn)數(shù)字Number

post請(qǐng)求參數(shù)加上encodeURIComponent解析字符串

header要設(shè)置正確

get "content-type":"application/json"

post "content-type":"application/x-www-form-urlencoded"

content-Type:application/x-www-form-urlencoded,application/json

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

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

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

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ì)被真正的銷毀。

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();

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

數(shù)字鍵盤(pán)用 type="digit"

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

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

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

官方quick start★★★★★ 官方的小程序，可以自己改動(dòng)看看效果
https://github.com/junhey/wxa...

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

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

v2ex ★★★
https://github.com/liuyugang1...

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

電影推薦 ★★★
https://github.com/liuyugang1...

計(jì)算器 ★★★
https://github.com/dunizb/wxa...

豆瓣圖書(shū) ★★★
http://www.jianshu.com/p/c350...

天氣 ★★★
http://swiftcafe.io/2016/10/0...

空氣質(zhì)量查詢 ★★★
http://blog.csdn.net/yulianli...

github客戶端 ★★★
https://blog.zhengxiaowai.cc/...

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

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

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