实测有效 解决微信游览器和企业微信游览器JSSDK注入权限验证 安卓正常,IOS出现config fail
一开始我们想到的是可能微信这边的Bug,但细想一下应该不是。因为可能涉及到了IOS的底层原理的问题,可能是不受微信所控。(有问题欢迎拍砖)
出现问题得解决问题啊,不能把问题晾在那边不管,这是程序员的尊严!
我这个是SPA应用,所以拿其中一个vue项目来做探讨,其他SPA应用同理
首先我们想到在安卓中生效,在IOS中不生效是什么原因?
我们把所有设置都检查了一遍,最终发现是当前路由location.href不一致的问题
我们可以去尝试一下去到具体某个页面:
在Android下微信复制当前链接然后粘贴到输入框里,会发现路由是具体到某个路由。例如:www.xxxx.com/news/xxxx
在IOS下微信复制当前链接然后粘贴到输入框里,会发现路由是首页。例如:wwwx.xxxx.com/index
所以问题就定位在了url上,这次我只拿调取扫一扫功能,其余功能自行加上。
那我们只需要判断访问设备是安卓还是IOS即可
首先在index.html页面中引入JSSDK文件
然后在App.vue文件中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
const url = location.href
const res = await getSignature(url) //获取设置config的参数
let { timestamp, noncestr, signature, appId } = res.data
wx.config({
beta: true ,
debug: false ,
appId: appId,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: [ 'scanQRCode' ]
});
wx.ready( function () {
console.log( '设备已经可以使用' )
})
}
|
具体到某个页面的时候 例如:news下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
const url = location.href
const res = await getSignature(url) //获取设置config的参数
let { timestamp, noncestr, signature, appId } = res.data
wx.config({
beta: true ,
debug: false ,
appId: appId,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: [ 'scanQRCode' ]
});
wx.ready( function () {
console.log( '设备已经可以使用' )
})
}
|
这仅限
于在微信自带的游览器上。企业微信自带的游览器这方法是不行的。
通过微信企业浏览器扫码获取到的微信浏览器信息如下:(图片摘取于CSDN)
微信客户端扫码获取到的信息如下:
对比企业微信游览其和微信游览器的信息,多出了wxwork。那么我们只需要添加多一个判断条件就好了
在App.vue文件中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
if (/(wxwork)/i.test(navigator.userAgent)) {
return
}
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
const url = location.href
const res = await getSignature(url) //获取设置config的参数
let { timestamp, noncestr, signature, appId } = res.data
wx.config({
beta: true ,
debug: false ,
appId: appId,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: [ 'scanQRCode' ]
});
wx.ready( function () {
console.log( '设备已经可以使用' )
})
}
|
在news文件中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
if (/(wxwork)/i.test(navigator.userAgent)) {
return
}
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
const url = location.href
const res = await getSignature(url) //获取设置config的参数
let { timestamp, noncestr, signature, appId } = res.data
wx.config({
beta: true ,
debug: false ,
appId: appId,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: [ 'scanQRCode' ]
});
wx.ready( function () {
console.log( '设备已经可以使用' )
})
}
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持快网idc。
相关文章
- 个人网站搭建:如何挑选具有弹性扩展能力的服务器? 2025-06-10
- 个人服务器网站搭建:如何选择适合自己的建站程序或框架? 2025-06-10
- 64M VPS建站:能否支持高流量网站运行? 2025-06-10
- 64M VPS建站:怎样选择合适的域名和SSL证书? 2025-06-10
- 64M VPS建站:怎样优化以提高网站加载速度? 2025-06-10
- 2025-07-10 怎样使用阿里云的安全工具进行服务器漏洞扫描和修复?
- 2025-07-10 怎样使用命令行工具优化Linux云服务器的Ping性能?
- 2025-07-10 怎样使用Xshell连接华为云服务器,实现高效远程管理?
- 2025-07-10 怎样利用云服务器D盘搭建稳定、高效的网站托管环境?
- 2025-07-10 怎样使用阿里云的安全组功能来增强服务器防火墙的安全性?
快网idc优惠网
QQ交流群
-
CentOS Linux系统搭建Android开发环境详细介绍
2025-05-27 16 -
2025-05-25 53
-
2025-06-04 18
-
2025-05-27 46
-
2025-06-04 56