[乾貨教程]仿網易雲課堂微信小程序開發實戰經驗

 本篇文章想跟你們分享下：咱們公司「湖北誠萬興科技」最近剛幫客戶定製開發、目前已上線的「哎咆課堂」微信小程序的開發經驗分享。首先大概介紹下這個小程序所涉及到的主要技術點：微信登陸、微信支付、微信小程序Flex佈局以及微信小程序視頻播放器的使用。

 

首先，任何一個微信小程序開發以前都須要先設計界面效果圖；既然是仿網易雲課堂App，那麼界面上都有很多地方是借鑑其佈局排版，先一睹爲快看下首頁和課程分類界面的效果吧

 

 

界面效果圖肯定，下面就開始作程序開發，這也是本文要講的重點，主要經驗總結以下：

 

1.使用"that"

建議在 page{}外面定義一個that變量，而後在onLoad中賦值爲this，之後全部的地方，均可以使用that,這樣就避免有些地方，this並非指向page的上下文對象

//上下文對象
var that;
page({
 onLoad: function (options) {
    // 頁面初始化 options爲頁面跳轉所帶來的參數
    that = this;
 }

...
that.setData({
        xxx: xxx,
      })
})

 

 

2.page的生命週期

• 只有onload中有options參數，能夠獲取頁面傳值等等，onload只會執行一次

• 可是onShow能夠每次切換頁面的時候執行，因此，須要每次刷新頁面的數據請求，能夠放在onShow中，測試過，性能體驗基本無影響

• page的生命週期沒有Android那麼豐富，頁面之間傳值也有必定的限制。

• 能夠經過普通的url的傳值方式傳值，xxx?key  = value ，可是要注意：咱們傳的值實際上是至關於字符串和url拼接在一塊兒，請不要直接傳一個對象,由於對象沒有toString方法。

• 傳遞json對象的步驟爲：

• 把json對象變成字符串，若是自己就是那就直接用，若是是json對象，須要 parseString(json)

• 和url進行參數拼接？key=value

• 取得時候在onload的options裏面取出，
  onLoad: function (options) {
  var value= options.key
  }

• 而後JSON.stringify(value)轉爲json對象使用

 

3.頁面間跳轉

從主頁跳轉一個新的界面   新界面處理完邏輯 成功與否 結束以後怎麼通知 主頁結果？
這種狀況，通常是沒有辦法解決的。通過測試，若是你想要從二級非主頁界面直接navigator打開主頁，是不行的，會報錯。
因此，咱們採用的策略是：二級界面處理完數據以後，直接返回，而後在主頁界面從新拉取數據。因此會出現，咱們的請求接口是在onShow方法裏面執行的。由於onload只會執行一次

 

4.wxml頁面佈局及綁定

• text標籤可使用bindtap

• 再強調一下   在標籤中使用data-pro_name="value",在對應對象中能夠經過e.currentTarget.dataset.pro_name得到，這種通常使用場景爲 你能夠給你所點擊或者綁定事件的view設置一個數據，好比你一個picker裏面有5個view,就能夠綁定每一個view不一樣的值，在觸發事件的時候取到相應的值

• 若是你想要顯隱view你能夠經過wx:if="true/false"來處理，可是這樣的話，若是爲false，page不會去渲染這個view,它所在的位置空間也不會預留，假以下面的view就會往上排。若是想要留存它的位置空間，能夠修改其style樣式來解決

  style="visibility:{{isShow?'visible':'hidden'}}"
  

   

5.統一公共業務封裝及框架

如上圖是「哎咆課堂-微信小程序」公共業務封裝相關類，這樣的好處在於：減小代碼冗餘，方便後期維護，好比：

http.js：處理http請求的邏輯封裝

storage.js：小程序中統一的緩存數據讀寫

wx_api.js：微信小程序相關api的邏輯封裝，如：微信登陸、會話有效期驗證、獲取用戶信息等

須要注意的是：js文件要儘可能保持業務獨立，不能相互引用依賴！

 

6.其它技巧總結

如上圖，即便整個小程序中全部頁面都引用http.js文件，即引用屢次，紅色標註的代碼只會執行一次！

 

好了，這篇文章就寫到這兒，但願對您有所幫助！湖北誠萬興科技專一微信小程序、微信公衆號等移動端定製開發，若是想了解更多或業務諮詢、合做，可隨時跟我聯繫！（QQ：1030365071，☎：18062239856）

 

原文連接：http://www.hbcwxkj.com/newsshow/32