微信小程序、公众号内嵌H5页面调用微信扫一扫

小程序内嵌H5调用微信扫一扫的功能，通过小程序webview来实现，具体方法与思路代码如下：

但是，小程序踩坑之路并没有结束。在公众号网页中通过配置APPID和appsecret可以正常调起微信扫一扫，但是，如何在小程序webview中调用扫一扫？扫描之后数据如何处理？小程序页面处理？还是传递给H5页面处理？

无奈之下，只得另寻他法。网上有人说，可以在H5页面使用wx.miniProgram.navigateTo方法跳转到小程序页面。所以，得好好的利用这个方法，搞点事情。

想想看，既然能跳转到小程序，而小程序本身调用扫一扫是非常方便的，只需要使用wx.scanCode即可。那么也就是说，当用户点击扫码操作的时候。我们可以先跳转到小程序页面，在页面onload的时候，立马调用wx.scanCode，也就达到了点击H5页面按钮唤起扫码功能的效果。然后把扫码结果，通过设置webview的url参数的形式返回给H5页面，最后在H5页面处理扫码结果。整个流程分析下来，可以说是天衣无缝，非常完美，理论上来说，是完全成立的。接下来，【撸码--运行--看效果】一条龙服务。点赞手势准备好，我怕看完我接下来的操作，你们沉浸在其中，无法自拔而忘记点赞了。

1、H5页面跳小程序

 

    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){    //判断是否是微信环境
        
        //微信环境 如果不是Vue导入方式，需要写成window.wx.miniProgram.getEnv()
        wx.miniProgram.getEnv(function(res) {
            if (res.miniprogram) {
                // 小程序环境下逻辑 
                wx.miniProgram.navigateTo({url: '../scanCode/scanCode'});//跳转到小程序调用微信扫一扫页面
           

            }else {

                //非小程序环境下逻辑

            }
        })
    }else{
          //非微信环境逻辑
    }

2、小程序页面唤起扫一扫，并对扫码结果进行返回

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //兼容ios微信无法立即调起扫一扫
    setTimeout(function () {
      wx.scanCode({//调用扫一扫
        success: function (res) {//扫码成功的回调函数
          wx.redirectTo({//失败的话，重定向到页面中，并且携带miniType参数和result参数
            url: '../index/index?url=https://www.hxkj.vip?miniType=mini&result=' + res
          })
        },
        error: function (err) {//扫码失败的回调函数
          console.log('err');
          wx.redirectTo({//失败的话，直接重定向到页面，并且不带任何参数
            url: '../index/index?url=https://www.hxkj.vip/'
          })
        }
      })
    }, 500)
  },

特别注意setTimeout函数，如果不使用该方法进行延迟调用，在IOS系统中100%无法调起扫一扫，应该算是微信小程序的BUG，至于延迟多少，就自行测试了，这边延迟500ms。

2.1、扫码成功的回调处理：重定向到页面中，并且携带miniType参数和result参数

miniType：用于区分是否为扫码返回，如果url有该参数则获取result结果，如果url没有该参数，则不做任何操作。result：扫码返回结果

2.2、扫码失败的回调处理：直接重定向到页面，并且不带任何参数

3、H5页面接收扫码结果，并对其进行处理

openScanCode() { //打开微信扫一扫
     isMiniProgram(wx, (res)=>{//是否为小程序环境
          if (res) {//小程序环境
               wx.miniProgram.navigateTo({url: '../scanCode/scanCode'});//跳转到小程序调用微信扫一扫页面
           } else {//非小程序环境（公众号环境）
               //通过jssdk方法调用微信扫一扫，代码忽略
          }
       })
},
isMiniProgram(callback) { //是否为小程序环境
      //是否在微信环境
      if (!isWeixin()) {
          callback(false);
      } else {
           //微信API获取当前运行环境
           wx.miniProgram.getEnv((res) => {
               if (res.miniprogram) {//小程序环境
                   callback(true);
               } else {
                   callback(false);
               }
          })
      }
}

this.isMiniProgram((res)=>{//判断是否是小程序页面的回调函数
        if (res) {//小程序页面
             let miniType = this.$route.query.miniType;
             let result = this.$route.query.result;
             if (miniType && miniType === 'mini') {
                 this.scanResult(result);//处理扫码结果
            }
        } 
      })

经过以上的曲折解决办法，已经实现了在小程序webview调用微信扫一扫的功能。然而还有个坑，那就是，当用户调起扫一扫时，什么也没干，直接返回！！！然后他将会看到一个空白的页面，这个页面就是调用扫一扫的小程序页面，因为我们在这个页面什么都没加，当然就空白了。目前我是在这个页面也加一个webview，webview的url就是调用扫码H5页面的链接，这样的话，就不会有空白一片了。