微信小程序开发问题解决，常见BUG总结

小程序开发中的各种坑，进行简要总结，欢迎填坑`

优化代码包

尽量减少代码包的大小，因为代码包大小直接影响到下载速度，从而影响用户的首次打开体验。2M限制。
小程序代码包经过编译后，会放在微信的 CDN 上供用户下载，CDN 开启了 GZIP 压缩，多数图片格式大大降低代码包压缩率。
使用云服务器存储图片，使用字体图标

调起微信开发者工具 wechatide://minicode/eJwL4bmd6mY3

1.小程序字体

换行符也可写在js参数data，注意 n 空格转义字符必须在标签内转义字符解码属性decode设置true，decode可以解析的有 < > & '

2.提交表单

用

来获取参数，元素标签需要加属性name=“my-name”才可以获取到

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/
1540519592283
把转换后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]