小程序開發(fā)常見問題實戰(zhàn)總結(jié)

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

小程序雖然具有相對完善的文檔，但難免文檔中會有解釋不清晰，不易被人發(fā)現(xiàn)，甚至未曾提及的問題。本文從具體的業(yè)務(wù)場景出發(fā)，匯總筆者在原生小程序日常開發(fā)中遇到的常見問題，并給出相應(yīng)的解決方案，希望能夠?qū)⑦@些細節(jié)經(jīng)驗分享給需要的童鞋。

框架運行機制與更新機制

運行機制：

更新機制：

小程序冷啟動時如果發(fā)現(xiàn)有新版本，將會異步下載新版本的代碼包，并同時用客戶端本地的包進行啟動，即新版本的小程序需要等下一次冷啟動才會應(yīng)用上。 如果需要馬上應(yīng)用最新版本，可以使用 wx.getUpdateManager API 進行處理。

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

如何清除小程序緩存呢？

• 通過太空囊’…’按鈕—打開調(diào)試—console—wechat—wx.clearStorage()方法清除，此方法刪除 storage 中的數(shù)據(jù)。
• 通過微信的”發(fā)現(xiàn)”tab簽—小程序—長按或者右滑刪除指定小程序，此方式徹底卸載該小程序，也就清除了所有內(nèi)容，包括 storage 中緩存數(shù)據(jù)、場景值、頁面堆棧等。

預(yù)覽與遠程調(diào)試的區(qū)別

小程序的調(diào)試方式有多種，可以通過預(yù)覽亦可通過遠程調(diào)試，這兩者有何區(qū)別呢？

將兩者生成的二維碼轉(zhuǎn)為url：

• 預(yù)覽 URL 為：https://mp.weixin.qq.com/a/~~xxt10QprXmU~rsguk7Cm9P3v2MCXJdpacg~~
• 遠程調(diào)試 URL 為：https://mp.weixin.qq.com/a/~~Rot_QPKUIn8~mzI5kQoA3w4QN0H6nkejvQ~~

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

• 可以有多臺真機同時預(yù)覽，只能有一臺真機遠程調(diào)試。
• 預(yù)覽忽略斷點，遠程調(diào)試會有斷點。
• 預(yù)覽可以忽略部分報錯，遠程調(diào)試有報錯將無法運行。

生命周期

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

• onLoad: 頁面加載，一個頁面只會調(diào)用一次。
• onShow: 頁面顯示，每次打開頁面都會調(diào)用一次。
• onReady: 頁面初次渲染完成，一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。
• onHide: 頁面隱藏，當 navigateTo 或底部 tab 切換時調(diào)用。
• onUnload: 頁面卸載。

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

ApisetData：

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

• 給字符串賦值: str:’value’
• 對象屬性賦值：[‘obj.prop’]:’value’
• 數(shù)組中的對象的屬性賦值：[‘arr[0].prop’]:’value’

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

chooiceVideo 視頻封面問題：

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

組件Video

• 層級： video 等的原生組件具有最高的層級，z-index 設(shè)置無效，會出現(xiàn)提示框被 video 覆蓋，或者 fixed 在頁面某位置的圖標被覆蓋的問題，處理方式見后文。
• 封面圖：封面圖的設(shè)置方式一般有兩種方式：通過 poster 屬性設(shè)置封面圖片，用這種方式開發(fā)工具上圖片閃一下就沒了，另一種方式是在 video 標簽中放置 cover-view 、 cover-img ,存在問題是如果 video 寬高為300*200，img 寬高為200*150，但是這是圖片寬高為300*200（與video一致），在模擬器中沒有問題，在真機中圖片不能拉伸，而且原生的播放按鈕和時間都被覆蓋了。
• 視頻播放：想要執(zhí)行視頻播放，先要獲取視頻組件，通過 wx.createVideoContext(videoId,this) 獲取視頻對象。 文檔中說明為：

創(chuàng)建并返回 video 上下文 videoContext 對象。在自定義組件下，第二個參數(shù)傳入組件實例 this ，以操作組件內(nèi) ‘video’ 組件。

需要注意的是在自定義組件內(nèi)部需要傳第二個參數(shù)，其他情況不用，同時獲取視頻組件后執(zhí)行play方法，會發(fā)現(xiàn)在模擬器中視頻不會執(zhí)行播放,困惑許久，發(fā)現(xiàn)在真機中可以執(zhí)行播放動作，意外不意外？??！趟過此坑，再一次印證了那句警世名言——“一切不在真機上驗證的自測，都是耍流氓！”

cover-view

cover-view是官方制造出來，用來管制那群“無法無天”的原生組件的，這群組件包括： map 、 video 、 canvas 、 camera 、 live-player 、live-pusher 。他確實可以蓋住這些組件，但是 cover-view 自身存在一些缺陷，令人很苦惱。

• 部分樣式效果實現(xiàn)不了：只支持基本的定位、布局、文本樣式。不支持設(shè)置單邊的 border 、background-image 、shadow 、overflow : visible 等。
• 子節(jié)點如果溢出了父節(jié)點，溢出部分莫名其妙被干掉了。 建議子節(jié)點不要溢出父節(jié)點。
• 自定義組件嵌套 cover-view 時，自定義組件的 slot 及其父節(jié)點暫不支持通過 wx:if 控制顯隱，否則會導致 cover-view 不顯示。
• 對于 fixed 屬性支持不好，fixed 在頁面底部的按鈕，可能會隨頁面滾動而上下“瞬移”哦。

Scroll-view

組件中有 scroll-left 屬性，該屬性是可以指定向左滾動的距離，但是此距離沒有單位，不由好奇，這個距離的單位是什么，于是做如下測試:屏幕寬度為750 rpx 設(shè)置每個小塊的寬度的寬度為150 rpx ，分別在 iphone5 、iphone6 、iphone6plus 中設(shè)置scroll-left 為 150,頁面表現(xiàn)如下：

會發(fā)現(xiàn)5下滾動超過兩個格，6下剛好兩個格，6p下小于兩個格，不難理解，scroll-left的單位為px，不同機型會有不同的表現(xiàn)是由于不同機型下單位的轉(zhuǎn)換不同導致的：

• iPhone6 Plus : 1rpx = 0.552px 150px = 271.5rpx
• phone6 : 1rpx = 0.5px 150px = 300rpx
• phone5 : 1rpx = 0.42px 150px = 357rpx

因此除非自己進行單位自適應(yīng)，否則 scroll-left 屬性實用性不強。

應(yīng)用下拉刷新問題：

• 場景：頁面需要下拉重新加載數(shù)據(jù)，刷新頁面，小程序開啟下拉刷新時， Fixed 在頂部的 tabbar （橫欄）下拉時，在 ios 端會出現(xiàn)斷層，并顯示背景，安卓端無此表現(xiàn)。
• 解決方案：由于安卓跟 ios 端的變現(xiàn)差異過大，因此需要避免在需要做下拉刷新的頁面放置 fixed 在頁面頂部的tabbar,可以通過自定義頁面頭部，并將該tabbar寫到自定義頭部中。

那么如何自定義頭部呢？ 通過在app.js中設(shè)置navigationStyle屬性，默認值為‘default’，自定義為‘custom’。

• 默認頭部樣式展示如下：

• 自定義頭部樣式展示如下：

可以看到自定義頭部樣式時，頭部只保留膠囊，其他部分可以自己實現(xiàn)。

視頻層級問題：

• 場景：頁面中存在video標簽，同時會存在彈框，并且頁面底部有fixed在底部的按鈕，這兩部分不允許video覆蓋。
• 解決方案：官方給出的覆蓋video組件的方式是，通過cover-view，但由于cover-view對樣式的支持不足及自身的問題（見上文），因此我們不使用cover-view處理。處理方式是使用圖片和video交替展示的方式，初始化展示為一張圖片，當點擊播放時切換video組件進行展示。頁面滾動，以及彈框出現(xiàn)的時候，將視頻組件隱藏，注意是隱藏，通過hidden屬性隱藏，而不是wx:if直接干掉，因為視頻播放中途暫停，下次播放需要從上次結(jié)束的位置開始播放，如果使用wx:if則無疑增加了實現(xiàn)的難度。

總結(jié)：

本文從框架、api、組件、應(yīng)用四個方面入手，說明在開發(fā)過程中遇到的問題，問題分析相對淺顯，但是比較實用。希望可以對讀者提供些許幫助。同時面對小程序時的心態(tài)已由最初的“純粹的api編程”到心懷敬畏之情?？此坪唵蔚谋硐笙拢瑫嬖谶@一系列棘手的情況。在此處做下總結(jié)，歡迎各位拍磚指正！