300字范文 > 小程序嵌套h5界面在h5界面调用小程序的扫一扫功能

小程序嵌套h5界面在h5界面调用小程序的扫一扫功能

时间：2023-10-26 21:23:51

前言：

小程序嵌套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/scanCodefunction 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、扫码失败的回调处理：直接重定向到页面，并且不带任何参数

。。。。。未完待续