小程序webview调用微信扫一扫的“曲折”思路

自上一篇遇到 webview 中没有返回按钮之后，虽然跳出坑了。解决方案： 《小程序webview跳转页面后没有返回按钮完美解决方案》

做为一名面向搜索引擎开发的我，遇到问题的第一件事，当然是百度啊，Google啊！可是这种在过去都是无往不利的方法，突然失效了！翻遍整个浏览器，并且把整个互联网都翻了个底朝天，竟然“找不到”解决方案（很有可能是我搜索水平太差，没有精通面向搜索引擎开发这项技能）！

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

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

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

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

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

刚出现问题时很是苦恼，因为只有部分用户出现白屏问题，模拟器和真机测试都没有问题。

首先怀疑到的是后端接口报错导致的，可能是部分用户的数据有问题，使用模拟器并没有发现异常，所以排除数据问题。

那么想到的可能是webview的缓存问题，然后给webview url加时间戳，在onload函数中做处理，重新赋值webview的url。经过一系列 *** 作 发现并没有解决问题。

这个时候就更加苦恼了，最后让出现问题的手机使用我的热点，发现正常访问录了。这橘斗个时候就想到可能是网络问题了。

最后把项目中的资源链接发给出现问题的手机上，让用户打开看一下，结果果不其然 该用户无法访问。定位问题：部分用户的手机网络不能访问cdn资源

解决方案：修改cdn资源链接

总结：

定位问题的思考方向：

1、用户的数据问题

解决方案：后端修复数据

2、webview的缓存问题

解决方案圆雹磨：a、链接后边加时间戳 b、h5网页进行打包 c、webview中的onload赋值url强制肆脊刷新

3、网络问题（由于部分用户的网络无法访问cdn资源）

解决方案：更换cdn资源的链接

最核心的一个概念 :

小程序 的webview(H5页面)中调用jssdk中的功能(比如获取位置信息),需要有一个和小程序申请主体一致的 公众号 账号,在蠢伏公众号里去配置相关的jssdk信息.

1 小程序账号

因为webview不支持个人类型,所以需要申请一个企业法人及个体工商户类型的小程序账号

2   公众号账号

要求小程序和公众号的账号对应的主体信息必须一致,有两种途径达到此目的:

先申请公众号账号,然后通过公众号的快速生成小程序功能,生成步骤1的小程序账号,这样这两个自然满足同主体资格

登录微信公众号平台，点击小程序管理-添加-快速注册并认证小程序:

用和申请小程序账号完全一致的主体信息去申请公众号(主体类型,主体名称,主体证件号),也能保证两个账号的主体资格一致(目前没有小程序快速生成公众号账号的功能..)

3 域名绑定

这里需要两个账号都配置一下:

业务域名

首先webview指向一个外部网页链接(我们的H5页面)

<web-view src="https://abc.xxx.com.cn/cc/index.html"></web-view>

这个地址要满足:

已经通过ICP备案域名

https协议

不支持自定义端口

不支持ip地址

不支持短链域名

那么首先要在 小程序 中的'开发'-'开发设置'的'业务域名'中,将https://abc.xxx.com.cn配置进去:

JS接口安全域名

在上述h5页面中,因为要调用jssdk的js文件:

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

因此要在公众号设置”的“功能设置”里填写“JS接口安全域名”

注意 :以上两个配置地址时,都需要将配置时提供的一个文本文件按照要求上传到H5页面所在服务器并确保能被访问,用于腾讯验证服务器,否则是无法提交相关信息的

4 应用

jssdk提供了很多功能,但是webview中,只支持部分接口,自行查看web-view,这里以获取位置信息为例:

通过config接口注模模入权限验证配置

所有需要使用JSSDK的页面必须先注入配置信息，否则将无法调用:

wx.config({

appId: '', // 必填，公众号的appid,注意不是小程序的appid

timestamp: , // 必填，生成签名的时间戳

nonceStr: '', // 必填，生成签名的随机串

signature: '',// 必填，签名

debug: true, // 选填,开启调试模式,调用的所有api的返回值会在客户端alert出来。

jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表,这里为获取位置信息

})

以上参数除了最后两个,建带码携议在后台服务中存储和计算,具体需参考jssdk,主要思路:

利用公众号的 appid 和 secret 去获取 access_token

利用 access_token 去获取 ticket

利用ticket和自行生成的( timestamp , nonceStr ,当前页面的 地址 )计算出最终的 签名

执行getLocation

以上步骤执行成功后,方可执行wx.getLocation:

var success=true

// 之所以这里有个success变量,是因为发现wx.error触发也会调用wx.ready(如果有个wx.success就好了)

//但其实这并不完美,因为还发现有时候wx.ready先执行,然后触发了wx.error ........

wx.ready(function(){

if(success){

wx.getLocation({

type: 'wgs84',

success(res) {

// res为坐标位置信息

},

fail(e) {

// 获取失败

}

})

}

// config信息验证后会执行ready方法

})

wx.error(function(res){

success=false

// config信息验证失败会执行error函数

})

吐槽:

wx.config有时候成功,有时候说签名失败

wx.ready代表配置验证完毕了,不代表验证成功了,那他的意义在于什么

reference:

jssdk: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

web-view: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

---