本文從小程序框架、 api 、組件、應用四個方面入手,說明在開發(fā)過程中遇到的問題,并給出處理方案。 小程序雖然具有相對完善的文檔,但難免文檔中會有解釋不清晰,不易被人發(fā)現(xiàn),甚至未曾提及的問題。本文從具體的業(yè)務場景出發(fā),匯總筆者在原生小程序日常開發(fā)中遇到的常見問題,并給出相應的解決方案,希望能夠?qū)⑦@些細節(jié)經(jīng)驗分享給需要的童鞋。
框架運行機制與更新機制運行機制: 小程序啟動會有兩種情況,一種是「冷啟動」,一種是「熱啟動」。 假如用戶已經(jīng)打開過某小程序,然后在一定時間內(nèi)再次打開該小程序,此時無需重新啟動,只需將后臺態(tài)的小程序切換到前臺,這個過程就是熱啟動;冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況,此時小程序需要重新加載啟動。
更新機制: 小程序冷啟動時如果發(fā)現(xiàn)有新版本,將會異步下載新版本的代碼包,并同時用客戶端本地的包進行啟動,即新版本的小程序需要等下一次冷啟動才會應用上。 如果需要馬上應用最新版本,可以使用 wx.getUpdateManager API 進行處理。 雖然文檔中有對這一部分進行說明,但是隱蔽比較深,還是需要重點說明一下,理解運行機制就可以解釋為什么剛關(guān)閉的小程序打開之后還能保存之前的狀態(tài),理解更新機制就明白新發(fā)版的小程序為什么需要刪除舊的版本再下載新的版本再能有新版的內(nèi)容了。 如何清除小程序緩存呢?
預覽與遠程調(diào)試的區(qū)別小程序的調(diào)試方式有多種,可以通過預覽亦可通過遠程調(diào)試,這兩者有何區(qū)別呢? 將兩者生成的二維碼轉(zhuǎn)為url:
由此可見工作方式都為將本地小程序打包上傳至微信側(cè),掃碼訪問遠程小程序服務。不同點總結(jié)如下:
生命周期
生命周期又分頁面的生命周期與組件的生命周期,以頁面的生命周期為例,不同的生命周期會對應不同的生命周期方法。
進行頁面編碼之前需要考慮到哪些數(shù)據(jù)是只需要加載一次的(放到 onload 中),哪些數(shù)據(jù)需要每次在頁面切換出來的時候進行實時更新(放到 onShow 中執(zhí)行)。 ApisetData:賦值操作是做常用的操作,可是對不同類型的數(shù)據(jù)賦值方式又稍有不同:
需要注意的是: setData 方法為異步方法,如不注意,頁面渲染會出現(xiàn)異常,因此不要將頁面中所有的數(shù)據(jù)都放到 data 對象中,只將頁面展示層的數(shù)據(jù)放到 data 中,其他不需要展示的數(shù)據(jù)掛載到全局 this 中即可。 chooiceVideo 視頻封面問題:在 wx.chooseVideo 的回調(diào)函數(shù)中,res 中會有 thumbTempFilePath 屬性值,該屬性值為封面圖片,問題是在模擬器中可以獲取到該屬性但是在真機中無法獲取到該屬性。目前獲取封面圖的方式通常為后端處理獲取。 組件Video
創(chuàng)建并返回 video 上下文 videoContext 對象。在自定義組件下,第二個參數(shù)傳入組件實例 this ,以操作組件內(nèi) ‘video’ 組件。 需要注意的是在自定義組件內(nèi)部需要傳第二個參數(shù),其他情況不用,同時獲取視頻組件后執(zhí)行play方法,會發(fā)現(xiàn)在模擬器中視頻不會執(zhí)行播放,困惑許久,發(fā)現(xiàn)在真機中可以執(zhí)行播放動作,意外不意外??。√诉^此坑,再一次印證了那句警世名言——“一切不在真機上驗證的自測,都是耍流氓!” cover-viewcover-view是官方制造出來,用來管制那群“無法無天”的原生組件的,這群組件包括: map 、 video 、 canvas 、 camera 、 live-player 、live-pusher 。他確實可以蓋住這些組件,但是 cover-view 自身存在一些缺陷,令人很苦惱。
Scroll-view組件中有 scroll-left 屬性,該屬性是可以指定向左滾動的距離,但是此距離沒有單位,不由好奇,這個距離的單位是什么,于是做如下測試:屏幕寬度為750 rpx 設置每個小塊的寬度的寬度為150 rpx ,分別在 iphone5 、iphone6 、iphone6plus 中設置scroll-left 為 150,頁面表現(xiàn)如下:
會發(fā)現(xiàn)5下滾動超過兩個格,6下剛好兩個格,6p下小于兩個格,不難理解,scroll-left的單位為px,不同機型會有不同的表現(xiàn)是由于不同機型下單位的轉(zhuǎn)換不同導致的:
因此除非自己進行單位自適應,否則 scroll-left 屬性實用性不強。 應用下拉刷新問題:
那么如何自定義頭部呢? 通過在app.js中設置navigationStyle屬性,默認值為‘default’,自定義為‘custom’。
可以看到自定義頭部樣式時,頭部只保留膠囊,其他部分可以自己實現(xiàn)。 視頻層級問題:
總結(jié):本文從框架、api、組件、應用四個方面入手,說明在開發(fā)過程中遇到的問題,問題分析相對淺顯,但是比較實用。希望可以對讀者提供些許幫助。同時面對小程序時的心態(tài)已由最初的“純粹的api編程”到心懷敬畏之情。看似簡單的表象下,會存在這一系列棘手的情況。在此處做下總結(jié),歡迎各位拍磚指正! |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務