微信小程序全組件練習(xí)demo開(kāi)發(fā)總結(jié)

1、微信小程序全組件練習(xí) demo 開(kāi)發(fā)總結(jié)預(yù)覽圖片：開(kāi)發(fā)總結(jié)一、設(shè)計(jì) 無(wú)需開(kāi)發(fā)者開(kāi)發(fā)的1、小程序加載動(dòng)畫(huà)；2、頁(yè)面下拉刷新加載樣式；3、微信控件（擁有完整的操作反饋）；如彈出框、模態(tài)框。建議用微信自己的1、加載、反饋樣式（全局、局部）二、開(kāi)發(fā)1、注冊(cè)小程序在 app.js 中,通過(guò) app 函數(shù)App(/生命周期onLaunch:function(),onShow:function(),onHide:function()2、注冊(cè)頁(yè)面Page(data:,onLoad:function(),onReady:function(),onShow:function(),onHide:function()

2、,onUnload:function(),onPullDownRefresh(),onReachBottom()3、配置頁(yè)面在 app.json 的 pages 中寫(xiě)上自己的頁(yè)面路徑4、頁(yè)面路由1、不像react、vue 那樣需要單獨(dú)的路由，小程序已經(jīng)幫咱們集成了路由，依賴進(jìn)行頁(yè)面跳轉(zhuǎn)，js 端也可用 wx.navigateTo(url:,success:)、wx.redirectTo(url:,success:);進(jìn)行跳轉(zhuǎn)注意兩者區(qū)別，前者在新頁(yè)面打開(kāi)（小程序只允許最多打開(kāi) 5 層），后者則是覆蓋之前的頁(yè)面。2、對(duì)于全局的數(shù)據(jù)、頁(yè)面的公共邏輯判斷（如進(jìn)入頁(yè)面時(shí)的權(quán)限驗(yàn)證、登錄判斷），則可以卸

3、載 app.js 中，其他頁(yè)面中可以通過(guò) app.xxx 方法獲取5、寫(xiě)法類似于 vue 和 react 組件的綁定用：bindtap、binglongtap阻止冒泡用：catchtap6、支持 import 和 includebodyimport 是導(dǎo)入模板的比如定義了一個(gè)模板text在 index.wxml 中引用三、開(kāi)發(fā)中遇到的問(wèn)題1、 經(jīng)測(cè)試無(wú)法導(dǎo)入第三方 css，機(jī)制受到限制2、css 只能使用線上圖片或者 base64，無(wú)法使用本地圖片（因?yàn)樾〕绦蛴?1 兆的體積限制），除非是用 image 組件（此處 image 已經(jīng)被小程序重寫(xiě)成了自定義組件而非原來(lái)的組件）3、每個(gè)頁(yè)面的 XXX.js 不能為空，否則下面會(huì)出現(xiàn) 1. Forgot to add page route in app.json. 2. Invoking Page() inasync task. 的錯(cuò)誤四、以下是本人總結(jié)的官方樣例，在開(kāi)發(fā)者工具中打開(kāi)即可運(yùn)行,樣例代碼在官方基礎(chǔ)上稍作改動(dòng)，如果對(duì)你有幫助請(qǐng)點(diǎn) stargithub 地址：/gitwujiaolong/xiaochengxu_demo五、不重