小程序踩坑记录,兼容,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”的情况,需要后台发送数据改为字符串格式

五、缓存问题

1、发生情况只有在第一次授权的时候会发生。

情况:外部引入的js文件,授权登录函数存入缓存立马获取之后,将获取不到缓存数据。

解决:当前页面存缓存则不用缓存数据,必须在其余页面使用。缓存函数不在js包文件中使用

你可能感兴趣的:(ybs项目,微信小程序,canvas,css,javascript)