碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2017-07-05 11:04   1512    微信小程序/ html&css/ js&jq

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

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

學習路徑

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

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

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

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

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

知識總結

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

目錄結構介紹

  • 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()
釋義：

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

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

  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來提問


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 微信小程序開發基礎知識總結 微信小程序開發基礎知識總結 微信小程序canvas小案例 微信小程序總結 微信小程序入門案例 微信小程序——簡易動畫案例 微信小程序源碼案例大全 微信小程序源碼案例大全 微信小程序案例大全 微信小程序源碼案例大全
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM