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

优化代码包

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

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

1.小程序字体

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

2.提交表单

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

<form bindsubmit="formSubmit">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]

web-view标签白屏bug

除了wx:if还可以动态控制标签class达到显示隐藏的效果，可以使用三元表达式

class="child {{tab.body == '7' ? 'show' : 'hide'}}"