小程式開發中的各種坑，進行簡要總結，歡迎填坑`

優化程式碼包

儘量減少程式碼包的大小，因為程式碼包大小直接影響到下載速度，從而影響使用者的首次開啟體驗。2M限制。
小程式程式碼包經過編譯後，會放在微信的 CDN 上供使用者下載，CDN 開啟了 GZIP 壓縮，多數圖片格式大大降低程式碼包壓縮率。
使用雲伺服器儲存圖片，使用字型圖示

調起微信開發者工具 wechatide://minicode/eJwL4bmd6mY3

1.小程式字型

換行符也可寫在js引數data，注意 n 空格轉義字元   必須在標籤內轉義字元解碼屬性decode設定true，decode可以解析的有   < > & '    

2.提交表單

用

formSubmit: function (e) {
    console.log('form發生了submit事件，攜帶資料為：', e.detail.value)
}

3.去掉按鈕邊框線 button:after {border-width: 0;}

4.路徑頁面傳參,新頁面onLoad頁面載入options接收引數

<navigator url="/navigator/navigator?title=1&&idx=one"></navigator>

index.js

Page({
  data:{

  },
  onLoad:function(options){
    // 生命週期函式--監聽頁面載入
     this.setData({
      title: options.title,
      idx : options.idx
    })
  }
})

5.選擇框自定義樣式

radio .wx-radio-input{
    width: 60rpx;
    height: 60rpx;
    border-radius: 4rpx;
}
radio .wx-radio-input-checked {
    background: #fff;
}
radio .wx-radio-input.wx-radio-input-checked::before{
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    border: 1rpx solid #efa100;
    border-radius: 4rpx;
    background-color: #efa100;
    transform: translate(-50%, -50%) scale(1);
}
checkbox .wx-checkbox-input{
    width: 60rpx;
    height: 60rpx;
    border-radius: 4rpx;
}
checkbox .wx-checkbox-input-checked {
    background: #fff;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    border: 1rpx solid #efa100;
    border-radius: 4rpx;
    background-color: #efa100;
    transform: translate(-50%, -50%) scale(1);
}
 

6.使用字型圖示 iconfont

http://iconfont.cn 下載字型圖示
把.ttf格式的字型檔案轉換為base64
https://transfonter.org/

把轉換後css檔案中的 @font-face 部分替換掉，放入.wxss檔案
只需要引用iconfont.wxss就可以了

<text class="iconfont icon-user"></text>

7.頁面棧

wx.navigateTo最多5層，超出不入棧，無法開啟頁面，只能使用redirectTo代替或者傳參，小程式不提供返回按鈕監聽，靈活運用
Android實測
初始化
a頁面入棧
(a-navigateTo-b)
b頁面出棧
(b-redirectTo-c)
c頁面出棧
(c-redirectTo-d)
d頁面入棧
(d-navigateTo-e)
e頁面
e頁面返回d頁面
d頁面返回a頁面

8.網路請求

wx.request({
    url: app.medinApi.domain + app.medinApi.register,
    header: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    method: 'POST',
    data : {
        'phone': e.detail.value.phone,
        'code': e.detail.value.validate,
        'openid': app.globalData.openid
    },
    success : function(res) {
        if (res.data.status == 1) {
            wx.showToast({
                title: '登入成功',
                icon: 'success',
                duration: 2000
            })
            var jumper = setTimeout(function(){
                wx.navigateTo({
                    url: '/pages/index/index'
                });
            },2000);
            
        } else {
            console.log(res);
            wx.showToast({
                title: res.data.msg,
                icon: 'none',
                duration: 2000
            })
        }
    },
    fail: function(res) {
        console.log(res);
    }
});

9.z-index層級失效問題，必須兩個元件都設定position屬性，才會生效

10.解決首頁先onLoad再onLaunch的問題

正常順序onLaunch執行完了再onLoad，然而並不是，由於是網路請求，可能會在 onLoad 之後才返回。
根據實際應用場景需要先onLaunch獲得引數,用回撥函式來解決
app.js

    onLaunch: function(){
        var me = this;
        wx.request({
            success: function(){
                //回撥函式，優先執行onLaunch
                me.globalData.employId = '1';
                if (me.employIdCallback){
                    me.employIdCallback('1');
                }
            }
        })
    }

index.js

    var app = getApp();
    onLoad: function(){
        if (app.globalData.employId && app.globalData.employId != '') {
            wx.redirectTo({
                url: '/pages/register/index'
            })
        }else{
            if (employId != '') {
                wx.redirectTo({
                    url: '/pages/register/index'
                })
            }
        }
    }

app[onLaunch] -> index[onLoad] -> app[onLaunch]