微信小程序知識總結及案例集錦

時間 2019-12-07

標籤微信程序知識總結案例集錦简体版

原文原文鏈接

微信小程序知識總結及案例集錦

微信小程序的發展會和微信公衆號同樣，在某個時間點爆發css

學習路徑

微信小程序最好的教程確定是官方的文檔啦，點擊這裏直達 微信官方文檔html
認真跟着文檔看一遍，相信有vue前端經驗的看下應該就能上手了，而後安裝 微信小程序開發者工具前端
新建一個quick start項目，瞭解代碼結構，這裏附上整個quick start代碼。vue
而後就拿個順手的api練練手，這裏附上cnode代碼，跟着作完差很少就算入門了。node
入門以後就是看其餘項目的實現了，這裏會附上案例集錦，一些github的案例。git

知識總結

tip：看到了另外一份W3CSchool整理的文檔，能夠結合官方文檔一塊兒看github

目錄結構介紹

app.js — 對本頁面的窗口表現進行配置。web
app.json — 對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。json
app.wxss — 接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。canvas

頁面生命週期

小程序註冊完成後，加載頁面，觸發onLoad方法。
頁面載入後觸發onShow方法，顯示頁面。
首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次。
當小程序後臺運行或跳轉到其餘頁面時，觸發onHide方法。
當小程序有後臺進入到前臺運行或從新進入頁面時，觸發onShow方法。
當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload

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

onLoad()：監聽頁面加載，一個頁面只會調用一次
onShow()：監聽頁面顯示，每次打開頁面都會調用一次
onReady()：監聽頁面初次渲染完成，一個頁面只會調用一次，表明頁面加載完畢，視圖層和邏輯層可進行交互
onHide()：監聽頁面隱藏，當頁面被覆蓋或進入後臺執行
onUnload()：監聽頁面卸載，當頁面被關閉或內存不足主動銷燬頁面

wx.navigateTo跳轉狀態下，頁面A和頁面B的生命週期邏輯

進入A頁面：A執行onLoad()-->onShow()-->onReady()；
A頁面navigateTo B頁面：A執行onHide()，B執行onLoad()-->onShow()-->onReady()；
B頁面返回A頁面：B執行onUnload()，A執行onReady()；
退出A頁面：A執行onUnload()。

Page({
  data:{},
  onLoad:function(options){
    // 頁面初始化 options爲頁面跳轉所帶來的參數
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

組件

基本：view,text
表單：button,input,radio,slider
媒體：image,video,audio,canvas
模態：action-sheet,modal,toast,loading
容器：swiper,scroller
導航：navigator,tabbar

小程序開發踩坑記錄

基本的防踩坑Q&A
最佳防踩坑的方式就是看這個微信小程序常見FAQ
好友坑過的開發者社區已解決問題

小程序頁面空白
- css兼容性問webkit內核
- lineShopId長度太長，字符轉數字Number
- post請求參數加上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 獲取可使用網絡圖片，或者 base64，或者使用 <image/> 標籤
使用豎向滾動時，須要給scroll-view一個固定高度，經過 WXSS 設置 height。若是scroll-view高度設置爲100%,則不能觸發上拉刷新和下拉加載事件......

App() 小程序註冊入口，全局惟一。App()用來註冊一個小程序，全局只有一個，全局的數據也能夠放到這裏面來操做。

// 註冊微信小程序，全局只有一個
let appConfig = {
    // 小程序生命週期的各個階段
    onLaunch: function(){},
    onShow: function(){},
    onHide: function(){},
    onError: function(){},

    // 自定義函數或者屬性
    ...
};
App(appConfig);

// 在別的地方能夠獲取這個全局惟一的小程序實例
const app = getApp();

小程序並無提供銷燬的方式，因此只有當小程序進入後臺必定時間、或者系統資源佔用太高的時候，纔會被真正的銷燬。

Page() 頁面註冊入口。Page()用來註冊一個頁面，維護該頁面的生命週期以及數據。

// 註冊微信小程序，全局只有一個
let pageConfig = {
    data: {},
    // 頁面生命週期的各個階段
    onLoad: function(){},
    onShow: function(){},
    onReady: function(){},
    onHide: function(){},
    onUnload: function(){},
    onPullDownRefresh: function(){},
    onReachBottom: function(){},
    onShareAppMessage: function(){},

    // 自定義函數或者屬性
    ...
};
Page(pageConfig);

// 獲取頁面堆棧，表示歷史訪問過的頁面，最後一個元素爲當前頁面
const page = getCurrentPages();