微信小程序ios和安卓扫码踩坑记(扫码时onshow调用的顺序不一致导致bug产生)

最近可被小程序扫码这搞得难受了，安卓和ios的手机执行代码顺序和扫码返回结果都不一样。刚刚好，我的就是安卓的，安卓按照正常情况走，一点问题都没有，但ios就不行了，各种问题，刚刚跳出这个坑又踩进另一个坑。所以我一定要把它这些坑写出来，避免更多人跟我一样跳下去。

1.首先说简单的，扫码返回的结果，扫一个带有链接的二维码，安卓扫，result里面不会返回任何东西，这很ok是需求需要的，但ios就不一样了，直接是返回路径。怎么办呢，只能判断是带有链接的，https:或者是http:的去掉，清空不赋值

2.扫码之后执行onshow的顺序不同，安卓是先执行了onshow再执行扫码的结果，而ios则是先执行扫码之后的结果再执行onshow里面的请求函数。

第二点我的需求是根据一进入onshow是否有值，有值并且不是扫码的就马上对后台发起一个request请求，如果是扫码的话则不执行onshow里面的函数，直接执行扫码后的函数。是否是扫码进入的onshow肯定是用一个字段去设置的，在请求完成之后将扫码这个字段设置回一开始的样子。

我在data初始化一个变量noscanCode为false并且cabinetId为null，在onshow里面判断noscanCode为false,cabinetId不为空，则执行请求函数。思路如下图

data:{
    cabinetId :null,
    noscanCode:false
},
onshow:function(){
     if(this.data.cabinetId && false== this.data.noscanCode){
        this.getData();//获取数据
    }
},
getCode(){
    wx.scanCode({
    success(res) {
     let id = res.path.substr(res.path.indexOf("?") + 1, res.path.length - 1) ;//得到id的值
     this.setData({noscanCode:true,cabinetId :id});
     this.getData();//获取数据,里面需要用到this.data.cabinetId
    console.log(res);
    }})
},
getData(id){
    //    请求数据回来后肯定要再次将noscanCode为false
    this.setData({noscanCode:false})
}

看代码没有问题，但我上面说了ios先执行扫码后的请求的，所以ios是先给变量noscanCode变为true,并且马上赋值cabinetId，赋值完马上就进入getData()函数，之后noscanCode的值变回了false,此时，cabinetId在扫码已有值，刚刚好onshow的函数条件也满足了，所以就导致了ios请求了两次后台。

那看这段代码，在安卓端有没有问题呢？首先，扫码完成的时候，马上先调用了onshow，因为noscanCode还是false,cabinetId也还是null所以并不执行onshow的请求函数，然后直接进入执行扫码请求函数，所以安卓的只调用了一次函数，没有问题。

所以问题点就是在哪里赋值noscanCode和cabinetId问题，noscanCode不应该在wx.scanCode里面赋值，而是应该在点击时getCode里面先赋值再进行扫码，这样问题就能解决了。

最终运行没有错误的代码如下：

data:{
    cabinetId :null,
    noscanCode:false
},
onshow:function(){
     if(this.data.cabinetId && false== this.data.noscanCode){
        this.getData();//获取数据
    }
},
getCode(){
    this.setData({noscanCode:true})
    wx.scanCode({
    success(res) {
     let id = res.path.substr(res.path.indexOf("?") + 1, res.path.length - 1) ;//得到id的值
     this.setData({noscanCode:true,cabinetId :id});
     this.getData();//获取数据,里面需要用到this.data.cabinetId
     console.log(res);
    }})
},
getData(){
    //    请求数据回来后肯定要再次将scanCodeBack为false
    this.setData({noscanCode:false})
}

在点击事件一发生的时候就控制noscanCode为true，所以ios中即使cabinetId赋值了，但是onshow里面的条件也没有满足，所以不会请求两次，安卓中因为cabinetId为空，所以noscanCode是否为true都不执行onshow里面的函数，所以也只是执行了getCode里面的函数。

所以我自己的一念之差，跳进了这个坑，发现了这个坑。也因为我惯性把变量放进扫码里面导致了我这个问题的发生，希望各位不要走我的老路，这坑我硬生生花了一个小时才跳出来。

最后你一定会觉得疑问。为什么要用cabinetId判断，因为业务需要，是必不可少的模块，而且判断的条件是四个，并非是2个，这只是为了方便分析问题而做的简单demo。

微信小程序ios和安卓扫码踩坑记(扫码时onshow调用的顺序不一致导致bug产生)

猜你喜欢