本文從小程(cheng)序框(kuang)架(jia)、 api 、組件、應用四個方(fang)面入手，說明在開(kai)發過程(cheng)中遇到的(de)問題，并給出處(chu)理方(fang)案。

小(xiao)程(cheng)序(xu)雖(sui)然具有(you)相(xiang)對完善的(de)(de)文檔，但難(nan)免文檔中(zhong)會有(you)解釋不清晰，不易被人發(fa)現，甚至(zhi)未曾提(ti)及的(de)(de)問題。本文從(cong)具體(ti)的(de)(de)業務場景出發(fa)，匯(hui)總筆者在原(yuan)生小(xiao)程(cheng)序(xu)日常(chang)開發(fa)中(zhong)遇到的(de)(de)常(chang)見問題，并給出相(xiang)應的(de)(de)解決方案，希望能夠將這(zhe)些細節經驗分享給需(xu)要的(de)(de)童(tong)鞋(xie)。

框架

運行機制與更新機制

運行(xing)機制：

更新機制(zhi)：

小程(cheng)序冷啟動(dong)時(shi)如(ru)果發現有新(xin)版本(ben)，將會異(yi)步下載新(xin)版本(ben)的代碼包，并(bing)同時(shi)用客(ke)戶端本(ben)地的包進(jin)行(xing)(xing)啟動(dong)，即新(xin)版本(ben)的小程(cheng)序需要等下一次(ci)冷啟動(dong)才會應用上。 如(ru)果需要馬(ma)上應用最新(xin)版本(ben)，可以使(shi)用 wx.getUpdateManager API 進(jin)行(xing)(xing)處理。

雖然文檔中有對這一部分進行(xing)說(shuo)明，但是隱蔽比較深(shen)，還(huan)(huan)是需要(yao)重點說(shuo)明一下，理(li)解運行(xing)機(ji)制(zhi)就(jiu)可以解釋為(wei)什(shen)么剛關閉的小程序(xu)打開之后還(huan)(huan)能保存(cun)之前(qian)的狀態(tai)，理(li)解更新機(ji)制(zhi)就(jiu)明白新發版(ban)的小程序(xu)為(wei)什(shen)么需要(yao)刪除舊(jiu)的版(ban)本再下載新的版(ban)本再能有新版(ban)的內(nei)容了(le)。

如何清除小程(cheng)序緩(huan)存呢？

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

預覽與遠程調試的區別

小程序的調試(shi)方(fang)式有(you)多種(zhong)，可以通過預覽(lan)亦(yi)可通過遠程調試(shi)，這兩(liang)者有(you)何區別呢(ni)？

將兩者生成的(de)二維碼轉為(wei)url：

• 預覽 URL 為：//mp.weixin.qq.com/a/~~xxt10QprXmU~rsguk7Cm9P3v2MCXJdpacg~~
• 遠程調試 URL 為：//mp.weixin.qq.com/a/~~Rot_QPKUIn8~mzI5kQoA3w4QN0H6nkejvQ~~

  由(you)此可(ke)見(jian)工作方(fang)式(shi)都(dou)為將本地小程(cheng)(cheng)序(xu)打包上傳至微信側，掃碼訪問遠程(cheng)(cheng)小程(cheng)(cheng)序(xu)服務。不(bu)同點總結如(ru)下：

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

生命周期

生(sheng)命(ming)周(zhou)期(qi)(qi)又分(fen)頁(ye)面的(de)(de)生(sheng)命(ming)周(zhou)期(qi)(qi)與(yu)組件的(de)(de)生(sheng)命(ming)周(zhou)期(qi)(qi)，以頁(ye)面的(de)(de)生(sheng)命(ming)周(zhou)期(qi)(qi)為例，不(bu)同(tong)的(de)(de)生(sheng)命(ming)周(zhou)期(qi)(qi)會對(dui)應不(bu)同(tong)的(de)(de)生(sheng)命(ming)周(zhou)期(qi)(qi)方法。

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

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

Api

setData：

賦值操(cao)作(zuo)是(shi)做常用(yong)的操(cao)作(zuo)，可是(shi)對不(bu)同(tong)類型的數(shu)據賦值方式(shi)又稍有不(bu)同(tong)：

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

需要注意的是(shi)： setData 方法為異步方法，如不(bu)注意，頁(ye)面(mian)渲染(ran)會出現異常，因此不(bu)要將(jiang)頁(ye)面(mian)中(zhong)所有的數(shu)據(ju)都放到 data 對象(xiang)中(zhong)，只將(jiang)頁(ye)面(mian)展(zhan)示層的數(shu)據(ju)放到 data 中(zhong)，其他不(bu)需要展(zhan)示的數(shu)據(ju)掛(gua)載到全局(ju) this 中(zhong)即可。

chooiceVideo 視頻封面問題：

在 wx.chooseVideo 的回調函(han)數中(zhong)，res 中(zhong)會有(you) thumbTempFilePath 屬性值(zhi)，該(gai)屬性值(zhi)為封面圖片，問題(ti)是在模(mo)擬(ni)器(qi)中(zhong)可以獲取(qu)到(dao)該(gai)屬性但是在真機中(zhong)無法獲取(qu)到(dao)該(gai)屬性。目前(qian)獲取(qu)封面圖的方式(shi)通常為后(hou)端處理(li)獲取(qu)。

組件

Video

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

創(chuang)建并返回(hui) video 上下(xia)文 videoContext 對(dui)象。在(zai)自(zi)定義組件(jian)(jian)下(xia)，第二個參(can)數傳入(ru)組件(jian)(jian)實例 this ，以操作組件(jian)(jian)內 ‘video’ 組件(jian)(jian)。

需要注意(yi)(yi)的(de)(de)是在(zai)自(zi)定義組件內部(bu)需要傳第二個(ge)參數，其他情況不用(yong)，同(tong)時獲取視頻組件后執(zhi)(zhi)行(xing)play方法(fa)，會(hui)發(fa)現(xian)在(zai)模擬器中視頻不會(hui)執(zhi)(zhi)行(xing)播放,困惑許(xu)久，發(fa)現(xian)在(zai)真(zhen)機(ji)中可以(yi)執(zhi)(zhi)行(xing)播放動(dong)作，意(yi)(yi)外不意(yi)(yi)外？！！趟過此坑，再一(yi)次印證(zheng)了那句警世名言(yan)——“一(yi)切不在(zai)真(zhen)機(ji)上驗證(zheng)的(de)(de)自(zi)測，都是耍流(liu)氓！”

cover-view

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

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

Scroll-view

組件中有 scroll-left 屬(shu)性，該屬(shu)性是可以指定(ding)向左滾動的(de)(de)距(ju)離(li)(li)，但是此距(ju)離(li)(li)沒(mei)有單位，不由好奇，這個距(ju)離(li)(li)的(de)(de)單位是什(shen)么，于(yu)是做(zuo)如下(xia)測試:屏幕寬(kuan)度為(wei)750 rpx 設置每個小塊(kuai)的(de)(de)寬(kuan)度的(de)(de)寬(kuan)度為(wei)150 rpx ，分別在(zai) iphone5 、iphone6 、iphone6plus 中設置scroll-left 為(wei) 150,頁面表(biao)現如下(xia)：

會發現(xian)5下(xia)滾動超過兩(liang)個(ge)格(ge)，6下(xia)剛好兩(liang)個(ge)格(ge)，6p下(xia)小于兩(liang)個(ge)格(ge)，不(bu)難理(li)解，scroll-left的單(dan)位為(wei)px，不(bu)同(tong)機(ji)型會有不(bu)同(tong)的表現(xian)是由(you)于不(bu)同(tong)機(ji)型下(xia)單(dan)位的轉換(huan)不(bu)同(tong)導致的：

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

因此除非自己(ji)進行單(dan)位自適(shi)應(ying)，否則(ze) scroll-left 屬性實用(yong)性不(bu)強。

應用

下拉刷新問題：

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

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

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

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

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

視頻層級問題：

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

總結：

本文(wen)從框架、api、組件、應用(yong)四個方面入手，說明在開發過(guo)程(cheng)中遇到的(de)問(wen)題，問(wen)題分析相對(dui)淺顯，但是比較(jiao)實用(yong)。希望可以對(dui)讀者(zhe)提供些許幫助。同時面對(dui)小程(cheng)序時的(de)心態已由最(zui)初的(de)“純(chun)粹(cui)的(de)api編程(cheng)”到心懷敬畏之情。看似(si)簡單的(de)表象(xiang)下(xia)，會(hui)存在這一(yi)系列棘手的(de)情況。在此處(chu)做(zuo)下(xia)總結，歡(huan)迎(ying)各位拍磚指正！