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

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

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

學習路徑

  1. 微信小程序最好的教程確定是官方的文檔啦,點擊這裏直達 微信官方文檔html

  2. 認真跟着文檔看一遍,相信有vue前端經驗的看下應該就能上手了,而後安裝 微信小程序開發者工具前端

  3. 新建一個quick start項目,瞭解代碼結構,這裏附上整個quick start代碼vue

  4. 而後就拿個順手的api練練手,這裏附上cnode代碼,跟着作完差很少就算入門了。node

  5. 入門以後就是看其餘項目的實現了,這裏會附上案例集錦,一些github的案例。git

知識總結

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

目錄結構介紹

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

頁面生命週期

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

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

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

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

  1. 進入A頁面:A執行onLoad()-->onShow()-->onReady();
  2. A頁面navigateTo B頁面:A執行onHide(),B執行onLoad()-->onShow()-->onReady();
  3. B頁面返回A頁面:B執行onUnload(),A執行onReady();
  4. 退出A頁面:A執行onUnload()。
Page({
  data:{},
  onLoad:function(options){
    // 頁面初始化 options爲頁面跳轉所帶來的參數
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

Page 實例的生命週期

組件

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

小程序開發踩坑記錄

  1. 小程序頁面空白
    • css兼容性問webkit內核
    • lineShopId長度太長,字符轉數字Number
    • post請求參數加上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 獲取 可使用網絡圖片,或者 base64,或者使用 標籤
  5. 使用豎向滾動時,須要給scroll-view一個固定高度,經過 WXSS 設置 height。若是scroll-view高度設置爲100%,則不能觸發上拉刷新和下拉加載事件......
  6. App() 小程序註冊入口,全局惟一。App()用來註冊一個小程序,全局只有一個,全局的數據也能夠放到這裏面來操做。
    ```
    // 註冊微信小程序,全局只有一個
    let appConfig = {
    // 小程序生命週期的各個階段
    onLaunch: function(){},
    onShow: function(){},
    onHide: function(){},
    onError: function(){},

    // 自定義函數或者屬性
     ...

    };
    App(appConfig);

    // 在別的地方能夠獲取這個全局惟一的小程序實例
    const app = getApp();
    ```
    小程序並無提供銷燬的方式,因此只有當小程序進入後臺必定時間、或者系統資源佔用太高的時候,纔會被真正的銷燬。

  7. 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();
    ```
  8. {{}} 不能執行方法,只能處理簡單的運算如 「+ - * /」,好比遇到遍歷list,每一個item的金額須要格式化,只能在js裏預先格式化好再setData一遍( ╯□╰ )
  9. 數字鍵盤用 type="digit"
  10. 禁止頁面下拉須要設置 "disableScroll": true

案例集錦

tip:從案例裏能夠看到不少其餘小程序實現的方式,多多看代碼

更多

持續踩坑中...

後續會進行不斷更新,訂閱請點watch,收藏請點star,歡迎開issues來提問

相關文章
相關標籤/搜索