微信小程序的發(fā)展會和微信公眾號一樣，在某個時間點爆發(fā)

學習路徑

  1. 微信小程序最好的教程肯定是官方的文檔啦，點擊這里直達 微信官方文檔

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

  3. 新建一個quick start項目，了解代碼結構，這里附上整個quick start代碼。

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

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

知識總結

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

目錄結構介紹

  • app.js — 對本頁面的窗口表現(xiàn)進行配置。

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

  • app.wxss — 接受一個數(shù)組，每一項都是字符串，來指定小程序由哪些頁面組成。

頁面生命周期

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

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

  3. 首次顯示頁面，會觸發(fā)onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次。

  4. 當小程序后臺運行或跳轉到其他頁面時，觸發(fā)onHide方法。

  5. 當小程序有后臺進入到前臺運行或重新進入頁面時，觸發(fā)onShow方法。

  6. 當使用重定向方法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)聽頁面卸載，當頁面被關閉或內存不足主動銷毀頁面

wx.navigateTo跳轉狀態(tài)下，頁面A和頁面B的生命周期邏輯

  1. 進入A頁面：A執(zhí)行onLoad()-->onShow()-->onReady()；

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

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

  4. 退出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ā)踩坑記錄

  1. 小程序頁面空白

    • css兼容性問webkit內核

    • lineShopId長度太長，字符轉數(shù)字Number

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

  2. header要設置正確

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

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

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

  3. bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡

  4. image背景圖片地址必須是url或者base64/本地資源無法通過 css 獲取 可以使用網(wǎng)絡圖片，或者 base64，或者使用 萬碼學堂,電腦培訓,計算機培訓,Java培訓,JavaEE開發(fā)培訓,青島軟件培訓,軟件工程師培訓 標簽

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

  6. App() 小程序注冊入口，全局唯一。App()用來注冊一個小程序，全局只有一個，全局的數(shù)據(jù)也可以放到這里面來操作。

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

    小程序并沒有提供銷毀的方式，所以只有當小程序進入后臺一定時間、或者系統(tǒng)資源占用過高的時候，才會被真正的銷毀。

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

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

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

  10. 禁止頁面下拉需要設置 "disableScroll": true

案例集錦

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

更多

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

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

http://www.cnblogs.com/junhey/p/7120174.html