小程序嵌套h5界面，在h5界面调用小程序的扫一扫功能_企业微信扫一扫h5开发案例

前言：

        小程序嵌套h5界面，在h5界面调用小程序的扫一扫功能，思路：主要是小程序上用webview嵌套H5页面，然后H5点击调用小程序的扫一扫，然后通过改变webview的路径带参数的方式将扫描结果返回到H5页面来实现。

不足之处：

可以实现h5界面调用小程序的扫一扫，但是页面会明显闪动，视觉效果不好。

实现方法：

1、h5界面部分：abc.html是h5界面的地址（返回地址）

$('.clickJump').on('click', function () {
     openWXSYS("/abc.html?CH1=" + escape(escape(escape(aaa))) + "&CH2=" + escape(escape(escape(bbb))));
});

h5界面封装js方法

//微信小程序封装地址=/pages/scanCode/scanCode
function openWXSYS(callBackUrl) { //打开微信扫一扫，callBackUrl在微信小程序中获取参数
   var url = '/pages/scanCode/scanCode?callBackUrl=' + callBackUrl;
   goMicroMessengerPage(url);
};

goMicroMessengerPage = function (url) {
     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: url,//小程序地址
                   success: function () {
                       console.log("调用成功！")
                   },
                   fail: function () {
                       alert("调用失败");
                       wx.showToast({
                            title: '调用小程序失败！',
                            icon: 'none'
                       })
                   }
                });
 
 
         } else {
             console.log('不在微信环境中，无法调用微信小程序！');
         }
     })
   } else {
        console.log('不在微信环境中，无法进行调用微信小程序！');
   }

2、微信小程序部分：

（1）app.json中添加扫一扫路由

"pages": [
    "pages/scanCode/scanCode", //添加扫一扫页面
  ],

（2）在pages里面创建扫一扫全套页面，scanCode

其他的文件都是空的默认就行，重点是js文件，scanCode.js

方法：onLoad，拿到我们刚在路径上拼接的参数，options.callBackUrl

onLoad: function(options) {
    console.log(this.options)
    var that = this;
    var callBackUrl = options.callBackUrl; //回调地址
    if (callBackUrl !== "" && callBackUrl != null && callBackUrl != undefined) {
      callBackUrl = unescape(callBackUrl);
      this.setData({
        callBackUrl: callBackUrl
      })
    }
    that.wxScanCode();
    // 调用地址
 
  },

 wx.scanCode是调用微信小程序原生的方法来实现扫一扫功能

wxScanCode: function() {
    var that = this;
    var callBackUrl = this.data.callBackUrl;
 
    //兼容ios微信无法立即调起扫一扫
    setTimeout(function() {
      wx.scanCode({ //调用扫一扫
        success: function(res) { //扫码成功的回调函数
          console.log("调用成功：" + res)
          var scanState = res.errMsg;
          var scanType = res.scanType;
          var scanResult = res.result; //二维码的内容
           
          wx.redirectTo({//失败的话，重定向到页面中，并且携带miniType参数和result参数
            url: '../index/index?url=https://www.hxkj.vip?miniType=mini&result=' + res
          })
         
 
 
        },
        error: function(res) { //扫码失败的回调函数
          console.log("调用失败：" + res)
          var scanState = res.errMsg;
          var scanType = res.scanType;
          var scanResult = res.result;
 
 
           wx.redirectTo({//失败的话，直接重定向到页面，并且不带任何参数
            url: '../index/index?url=https://www.hxkj.vip/'
          })
 
 
        },
        fail: function(res) {//取消扫一扫
          var scanState = res.errMsg;
          var scanType = res.scanType;
          var scanResult = res.result;
 
            //弹框提示信息
          wx.showToast({
            title: '取消扫描',
            icon: 'none',
            duration: 2000,
            success: function () {
              
            }
          })
 
 
        }
      })
    }, 400);
  },

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

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

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

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

。。。。。未完待续

参考文档：

点我https://blog.csdn.net/ycb1689/article/details/94165675