小程序踩坑记录，兼容，bug等，持续更新

表示小程序的第一个项目就踩坑这么多，难受…………

一、小程序navigateTo网络延迟产生连续跳转问题，采用节流函数

//调用封装的节流函数方式防止bug，一秒内只能跳转一次
that.binging();

//采用节流函数方式，解决微信延迟多次跳转bug
,binging:util.throttle(function () {
    wx.navigateTo({
        url:'/pages/index/binding/binding'
    });
}, 500)

//节流函数，一定时间内只能执行一次
//参数1：函数，参数2：间隔时间毫秒数，1000为一秒
function throttle(fn, gapTime) {
    if (gapTime == null || gapTime == undefined) {
        gapTime = 1000
    }
    let lastTime = null;
    // 返回新的函数
    return function () {
        let nowTime = + new Date();
        if (nowTime - lastTime > gapTime || !lastTime) {
            fn.apply(this, arguments);  //将this和参数传给原函数
            lastTime = nowTime
        }
    }
}

二、小程序苹果机和安卓机样式不兼容（最坑，不同的苹果手机展示效果还不一样，比如新苹果正常，老苹果异常）

1、页面返回切换，发现上个页面走位异常

把所有内容放在一个view里面，出现问题的是当时image标签在外部，导致返回页面的时候整个页面撑开，错位

再就是微信版本可能导致问题发生

2、文字安卓机定位基于上个元素，苹果机基于页面顶部

posation:absolute,问题导致，保持页面结构一致，去除即可。调整页面样式

3、canvas隐藏问题

自己overflow要写在父级元素上面，不然连安卓有时候都会隐藏不了

4、安卓机canvas上层div能点击事件，苹果手机不行

解决：不要让别的元素在canvas上面，调整页面样式

5、苹果手机canvas错乱，和安卓不一致

有canvas的页面就不要有posation:absolute和fiexd了

6、定位错乱问题

例如：原本想要指定元素固定在某个部位不动，但是在苹果手机上固定效果能出现重影现象或者固定效果失败。

解决：不要把元素放在滚动元素之中，苹果的脱离文档流不一定准确，有时候不会脱离文档流

三、无法解决问题

小程序input会闪烁失去焦点，键盘拉起异常，微信bug

四、小程序页面生命周期问题

1、onReady无法保证页面正常加载完毕情况，组件无法获取

采用定时器，定时获取，获取成功才出发事件

五、get和post数据问题

1、当需要用post发送数据的时候对应tomcat后台header需要设置为：

{'content-type': 'application/x-www-form-urlencoded'}

2、当后台传递过来的数字很长的时候会发生数字最后几位变成“00”的情况，需要后台发送数据改为字符串格式

小程序踩坑记录，兼容，bug等，持续更新

猜你喜欢