JDC京東設計中心--小程序實戰總結

本文從小程序框架、api、組件、應用四個方面入手，說明在開發過程中碰到的問題，并給出處理方案。

小程序雖然具有相對完善的文檔，但難免文檔中會有解釋不清楚，不易被人發現，甚至未曾提及的問題。本文從具體的業務場景出發，匯總筆者在原生小程序日常開發中碰到的常見問題，并給出相應的解決方案，希望能夠將這些細節經驗分享給需要的童鞋。

框架

運行機制與更新機制

運行機制：

小程序啟動會有兩種情況，一種是「冷啟動」，一種是「熱啟動」。假如用戶已經打開過某小程序，然后在一定時間內再次打開該小程序，此時無需重新啟動，只需將后臺態的小程序切換到前臺，這個過程就是熱啟動；冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況，此時小程序需要重新加載啟動。

小程序沒有重啟的概念。

當小程序進入后臺，客戶端會維持一段時間的運行狀態，超過一定時間后（目前是5分鐘）會被微信主動銷毀。

當短時間內（5s）連續收到兩次以上收到系統內存告警，會進行小程序的銷毀。

更新機制：

小程序冷啟動時假如發現有新版本，將會異步下載新版本的代碼包，并同時用客戶端本地的包進行啟動，即新版本的小程序需要等下一次冷啟動才會應用上。假如需要馬上應用很新版本，可以使用wx.getUpdateManagerAPI進行處理。

雖然文檔中有對這一部分進行說明，但是隱蔽比較深，還是需要重點說明一下，理解運行機制就可以解釋為什么剛關閉的小程序打開之后還能保存之前的狀態，理解更新機制就明白新發版的小程序為什么需要刪除舊的版本再下載新的版本再能有新版的內容了。

如何清除小程序緩存呢？

通過太空囊’…’按鈕—打開調試—console—wechat—wx.clearStorage()方法清除，此方法刪除storage中的數據。

通過微信的”發現”tab簽—小程序—長按或者右滑刪除指定小程序，此方式徹底卸載該小程序，也就清除了所有內容，包括storage中緩存數據、場景值、頁面堆棧等。

預覽與遠程調試的區別

小程序的調試方式有多種，可以通過預覽亦可通過遠程調試，這兩者有何區別呢？

將兩者生成的二維碼轉為url：

預覽URL為：s://mp.weixin.qq.com/a/~~xxt10QprXmU~rsguk7Cm9P3v2MCXJdpacg~~

遠程調試URL為：s://mp.weixin.qq.com/a/~~Rot_QPKUIn8~mzI5kQoA3w4QN0H6nkejvQ~~

由此可見工作方式都為將本地小程序打包上傳至微信側，掃碼訪問遠程小程序服務。不同點總結如下：

可以有多臺真機同時預覽，只能有一臺真機遠程調試。

預覽忽略斷點，遠程調試會有斷點。

預覽可以忽略部分報錯，遠程調試有報錯將無法運行。

生命周期

生命周期又分頁面的生命周期與組件的生命周期，以頁面的生命周期為例，不同的生命周期會對應不同的生命周期方法。

onLoad:頁面加載，一個頁面只會調用一次。

onShow:頁面顯示，每次打開頁面都會調用一次。

onReady:頁面初次渲染完成，一個頁面只會調用一次，代表頁面已經預備妥當，可以和視圖層進行交互。

onHide:頁面隱藏，當navigateTo或底部tab切換時調用。

onUnload:頁面卸載。

進行頁面編碼之前需要考慮到哪些數據是只需要加載一次的（放到onload中），哪些數據需要每次在頁面切換出來的時候進行實時更新（放到onShow中執行）。

Api

setData：

賦值操作是做常用的操作，可是對不同類型的數據賦值方式又稍有不同：

給字符串賦值:str:’value’

對象屬性賦值：[‘obj.prop’]:’value’

數組中的對象的屬性賦值：[‘arr[0].prop’]:’value’

需要注重的是：setData方法為異步方法，如不注重，頁面渲染會出現異常，因此不要將頁面中所有的數據都放到data對象中，只將頁面展示層的數據放到data中，其他不需要展示的數據掛載到全局this中即可。

chooiceVideo視頻封面問題：

在wx.chooseVideo的回調函數中，res中會有thumbTempFilePath屬性值，該屬性值為封面圖片，問題是在模擬器中可以獲取到該屬性但是在真機中無法獲取到該屬性。目前獲取封面圖的方式通常為后端處理獲取。

組件

Video