微信小程序項目踩過的幾個坑

1、前言

近期，開始了一段辛酸的還未開始就已經結束的「創業」（參見個人第二次創業，以夢爲馬，莫負韶華）。大致上是開發了一款微信小程序，關於創業這件事情就不細說了，本文主要介紹一下開發小程序的過程當中踩過的幾個坑。

2、註冊

開發一款功能全乎的小程序，在未動鍵盤開始碼代碼以前就要涉及到帳號註冊、微信認證、支付申請等等，這裏面也有一些坑。

首先是必需要企業認證纔能有微信支付功能，以我的名義申請不能進行支付。微信認證還算容易，只須要支付300元便可。支付申請的時候會讓你選擇須要申請的經營種類，此處若是與企業執照上相同會比較容易經過，咱們的經營項目不太一致，剛開始寫的比較簡單被直接駁回，後面我寫了一段比較長的話詳細解釋了一下要作個什麼、爲何申請此類型，估計審覈的人被我感動了，因而順利經過。

3、HTTPS和備案

若是小程序須要和後臺交互，那麼交互時只能選擇域名的方式，且此域名必須通過ICP備案，而且只能採用HTTPS方式。

ICP備案比較麻煩，能夠直接選擇購買阿里雲服務器，這應該是最方便的方式了吧。

HTTPS建議使用百度雲，能夠申請到一年的免費證書，申請也比較容易。

4、開發

迴歸到本行。其實小程序開發是個涉及到方方面面的工做，要求仍是蠻高的，一套下來基本也就是個全棧工程師了。

小程序自己就分前臺和後臺，就相似與網站開發，wxml對應html、wxss對應css、js就是js、還多了個json用於配置等。說白了就是微信把這些東西以必定的方式封裝起來了，可是我我的感受封裝的也不是那麼理想，因此有點不太順手。

小程序通訊的後臺能夠採用各類語言，至關於網頁的後臺，也基本等同於restful接口。此項目咱們使用了python的django框架，開發起來還蠻容易的。

整個一套下來，哪方面都有接觸，個人合夥人包亮是個編程大牛，對我進行了不少指導，我對開發這件事情和js、python這兩種語言都有了全新的認識。

言歸正傳，下面開始介紹開發過程當中踩過的坑。

4.1 js回調

剛開始js代碼寫的很冗長，一個函數有上百行。並非我不懂得代碼編寫的藝術，而是小程序的js開發每每是一個請求中的sucess以及fail中嵌套另外一個請求，函數只能越寫越長，最後各類功能交織在一塊兒，變量也混雜在儀器，我本身實在看不下去了，因而開始重構，將一些功能提取出來組成函數，總體代碼清爽了很多，可是出現了一些讓我很費解的bug，大神簡單看了一下直接指出問題來了，原本應該嵌套的異步函數寫成了並列，這樣致使函數在執行的時候沒有時間上的前後順序，因而就會出現莫名其妙的bug，這個問題我是有所注意的，可是有些地方也確實沒有注意到，他告訴我你應該將各類回掉函數做爲參數傳入，這樣就不會再出問題。簡單以下：

function b() {
    // do something when sucess
}

function a() {
    wx.request({
        url:'...',
        sucess: function(res) {
            b();
        }
    })
}

a();

這是我原來寫的方式，固然比這複雜的多，因此不注意的時候就會將b寫到a的後面，其實真正的方式應該是這樣：

function b() {
    // do something when sucess
}

function a(aSucess) {
    wx.request({
        url:'...',
        sucess: function(res) {
            aSucess()
        }
    })
}

a(b);

這樣就很清晰的知道a函數裏當請求成功的時候作了什麼事情，由於直接在調用a的時候就已經傳入其中了。

4.2 app.js中的異步函數如何保證可靠性

有的時候須要在app.js的onLaunch事件中向後臺請求一些數據，好比用戶信息等等（非微信用戶信息，但須要與微信openid關聯），取出這些信息後在加載用戶頁面的時候會再向後臺請求些數據進行展現等，可是app.js和頁面之間沒法進行普通回掉，這樣就會形成在app.js中尚未請求完成，數據仍是undefined而頁面中使用此數據就會形成錯誤。後來查看了一些文檔，發現能夠在app.js中爲特定數據自定義事件，用於在其餘頁面判斷，方式以下：

app.js中:

wx.request({
    url: '',
    success: res_user_info => {
      if (this.userIdCallback) {
        this.userIdCallback(res_user_info)
      }
      this.globalData.userId = res_user_info.data.id;
    }
})

這樣就在app.js中定義了一個userIdCallback事件，該事件完成的時候表示已經從後臺取到了用戶數據。在其餘頁面便可經過此種方式進行判斷：

if (app.globalData.userId == null || app.globalData.userId == undefined) {
    app.userIdCallback = res_user_id => {
        // do something
    }
} else {
    // do something
}

即首先判斷此數據是否已經請求到，若是還未完成則等待此數據完成，而後在其回調函數中再完成有關操做。

4.3 tabBar之間的切換

若是在app.js中設置了tabBar，則頁面底部會出現相應的導航欄，可是頁面中使用wx.navigateTo跳轉到的頁面底部不顯示導航欄，而且若是須要切換到導航欄內的任何頁面，都須要使用wx.switchTab函數而不是wx.navigateTo函數。

4.4 數據綁定

微信小程序沒有數據雙向綁定，在Page對象中設置的data只能單向改變前臺渲染，而前臺改變沒法同步更改此變量。那麼若是須要將前臺的變化也同步到後臺，只能監控前臺控件的變化事件，如input的bindinput事件，在此事件中對輸入值進行判斷，以下：

<input bindinput="bindMoney" value="{{money}}" />

其中value="{{money}}"用於後臺到前臺的綁定，而bindinput則用於前臺到後臺的綁定，以下：

bindMoney: function (e) {
    var value = parseInt(e.detail.value);
    this.setData({
      money: value
    })
}

而且小程序在綁定變化的時候前臺會出現undefined的狀況，若是是圖像的話就會形成請求錯誤，卻是無傷大雅，時間很短，前臺基本不會察覺。

5、提交審覈

這是最坑的一點，吭哧吭哧的作了半天，最後竟然由於種種非技術緣由而沒法經過審覈。好吧，最爲個體咱們真的沒法說什麼，只能對微信這個大平臺言聽計從，但願咱們更改相應頁面後可以經過審覈。審覈太嚴失去了自由的土壤，微信如何保證有好的產品出現呢？

6、總結

本文簡單介紹了在微信小程序開發過程當中踩過的一系列坑，但願對後來者可以有所幫助。