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

微信小程序的發(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

基本的防踩坑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，或者使用 標簽

使用豎向滾動時，需要給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/debu...

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

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

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

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

精簡版百思不得姐 ★★★
https://github.com/shuncaigao/BS

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

計算器 ★★★
https://github.com/dunizb/wxa...

豆瓣圖書 ★★★
http://www.jianshu.com/p/c350...

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

空氣質量查詢 ★★★
http://blog.csdn.net/yulianli...

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

知乎日報 ★★★
https://github.com/liuyugang1...

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

后續(xù)會進行不斷更新，訂閱請點watch，收藏請點star，歡迎開issues來提問