1.

自上一篇遇到webview中没有返回按钮之后，虽然跳出坑了。解决方案：《小程序webview跳转页面后没有返回按钮完美解决方案》但是，小程序踩坑之路并没有结束。在公众号网页中通过配置APPID和appsecret可以正常调起微信扫一扫，但是，如何在小程序webview中调用扫一扫？扫描之后数据如何处理？小程序页面处理？还是传递给H5页面处理？做为一名面向搜索引擎开发的我，遇到问题的第一件事，当然是百度啊，Google啊！可是这种在过去都是无往不利的方法，突然失效了！翻遍整个浏览器，并且把整个互联网都翻了个底朝天，竟然“找不到”解决方案（很有可能是我搜索水平太差，没有精通面向搜索引擎开发这项技能）！

2.

其实也不算是没有找到，只是找到的不适合我，并没有解决我的问题，例如下面这篇（还有几篇广告文就不提了）：《微信小程序webview直接调用微信扫一扫相关功能》文中提到，直接使用小程序的APPID和appsecret，替换公众号的APPID和appsecret就可以了。但是这我这始终都没法用，难道是腾讯觉得我帅，起了妒忌之心，故意针对我吗？或者说是写后台的哥们把逻辑搞错了？（嗯，实力甩锅）反正就是没法用，报错Invalidsignature。

3.

无奈之下，只得另寻他法。我在上一篇文章中提到过，可以在H5页面使用wx.miniProgram.navigateTo方法跳转到小程序页面。所以，得好好的利用这个方法，搞点事情。

4.

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

5.

1、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);}})}}6.

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

7.

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

8.

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

9.

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

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

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

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

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

12.

转载请注明出处：https://www.jianshu.com/p/2129d498de19作者：TSY个人空间：https://www.hxkj.vip

13.

喜欢的话，可以关注下我的微信公众号