本篇文章想跟大家分享下微信小程序?qū)崙?zhàn)開發(fā)：我們公司湖北誠萬興科技最近剛幫客戶定制開發(fā)、目前已上線的“哎咆課堂”微信小程序的開發(fā)經(jīng)驗分享。首先大概介紹下這個小程序所涉及到的主要技術(shù)點：微信登錄、微信支付、微信小程序Flex布局以及微信小程序視頻播放器的使用。

　　首先，任何一個微信小程序開發(fā)之前都需要先設(shè)計界面效果圖微信小程序?qū)崙?zhàn)開發(fā)；既然是仿網(wǎng)易云課堂App，那么界面上都有不少地方是借鑒其布局排版，先一睹為快看下首頁和課程分類界面的效果吧

　　界面效果圖確定，下面就開始做程序開發(fā)，這也是本文要講的重點，主要經(jīng)驗總結(jié)如下：

　　1.使用"that"

建議在 page{}外面定義一個that變量，然后在中賦值為this，以后所有的地方，都可以使用that,這樣就避免有些地方，this并不是指向page的上下文對象

　　//上下文對象

　　var that;

　　page({

　　: function (options)

　　{

　　// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)

　　that = this;

　　}

　　...

　　that.setData({ xxx: xxx, })

　　})

　　2.page的生命周期

　　只有中有options參數(shù)，可以獲取頁面?zhèn)髦档鹊龋粫?zhí)行一次

　　但是onShow可以每次切換頁面的時候執(zhí)行，所以，需要每次刷新頁面的數(shù)據(jù)請求，可以放在onShow中，測試過，性能體驗基本無影響

　　page的生命周期沒有Android那么豐富，頁面之間傳值也有一定的限制。

　　可以通過普通的url的傳值方式傳值，xxx?key = value ，但是要注意：我們傳的值其實是相當(dāng)于字符串和url拼接在一起，請不要直接傳一個對象,因為對象沒有toString方法。

　　傳遞json對象的步驟為：

　　把json對象變成字符串，如果本身就是那就直接用，如果是json對象，需要 parseString(json)

　　和url進(jìn)行參數(shù)拼接？key=value

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

　　然后JSON.stringify(value)轉(zhuǎn)為json對象使用

　　3.頁面間跳轉(zhuǎn)

　　從主頁跳轉(zhuǎn)一個新的界面 新界面處理完邏輯 成功與否 結(jié)束之后怎么通知 主頁結(jié)果？這種情況，一般是沒有辦法解決的。經(jīng)過測試，如果你想要從二級非主頁界面直接navigator打開主頁，是不行的，會報錯。所以，我們采用的策略是：二級界面處理完數(shù)據(jù)之后，直接返回，然后在主頁界面重新拉取數(shù)據(jù)。所以會出現(xiàn)，我們的請求接口是在onShow方法里面執(zhí)行的。因為只會執(zhí)行一次

　　4.wxml頁面布局及綁定

　　text標(biāo)簽可以使用bindtap

　　再強調(diào)一下 在標(biāo)簽中使用data-pro_name="value",在對應(yīng)對象中可以通過e.currentTarget.dataset.pro_name獲得，這種一般使用場景為 你可以給你所點擊或者綁定事件的view設(shè)置一個數(shù)據(jù)，比如你一個picker里面有5個view,就可以綁定每個view不同的值，在觸發(fā)事件的時候取到相應(yīng)的值

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

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

　　5.統(tǒng)一公共業(yè)務(wù)封裝及框架

　　如上圖是“哎咆課堂-微信小程序”公共業(yè)務(wù)封裝相關(guān)類，這樣的好處在于：減少代碼冗余，方便后期維護，比如：

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

　　storage.js：小程序中統(tǒng)一的緩存數(shù)據(jù)讀寫

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

　　需要注意的是：js文件要盡量保持業(yè)務(wù)獨立，不能相互引用依賴微信小程序?qū)崙?zhàn)開發(fā)！

　　6.其它技巧總結(jié)

　　如上圖，即使整個小程序中所有頁面都引用http.js文件，即引用多次，紅色標(biāo)注的代碼只會執(zhí)行一次！

　　好了，就寫到這兒，希望湖北誠萬興科技這篇文章對您能有所幫助，如果您有問題，可留言或直接搜索湖北誠萬興科技官網(wǎng)跟我們聯(lián)系！