实测有效 解决微信游览器和企业微信游览器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文件中

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下

if (/(Android)/i.test(navigator.userAgent)) {
let 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文件中

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文件中

if (/(Android)/i.test(navigator.userAgent) || /(wxwork)/i.test(navigator.userAgent)) {
let 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('设备已经可以使用')
})
}

以上

[微信JSSDK] 解决SDK注入权限验证 安卓正常,IOS出现config fail的更多相关文章

  1. 微信开发配置JSSDK,注入权限验证,以及invalid signature签名错误解决

    在微信开发中很多功能都要用到微信JSSDK,关于JSSDK的使用,微信官方的文档已经比较详细,一定要仔细去看文档. <script src="https://res.wx.qq.com ...

  2. C#微信开发-微信JS-SDK(1)之通过config接口注入权限验证配置

    官方文档是微信JS-SDK的使用步骤http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.B ...

  3. 微信开发(2):微信js sdk分享朋友圈,朋友,获取config接口注入权限验证(转)

    进行微信开发已经一阵子了,从最初的什么也不懂,到微信授权登录,分享,更改底部菜单,素材管理,等. 今天记录一下微信jssdk 的分享给朋友的功能,获取config接口注入. 官方文档走一下简单说:四步 ...

  4. 微信jssdk常见错误及解决方法

    调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息.以下为常见错误及解决方法: invalid url domain当前页面所在域名与使用 ...

  5. 微信JSSDK权限签名申请

    前提: 1.绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 里边有说明(这里提示一点:需要把当前公众号的验证文件放到指定目录下) 2.需要参数: APPID. ...

  6. 微信JS-SDK开发 入门指南

    目录 前言 1. 过程 1.1 代码 1.2 代理 1.3 下载 1.4 解压 1.5 运行 1.6 查看 2. 微信接口测试 2.1 申请测试帐号 2.1.1 测试号信息 2.1.2 接口配置信息 ...

  7. 微信JS-SDK文档

    微信JS SDK 调用详解   微信JS SDK 调用详解... 1 概述... 2 使用说明... 2 接口调用说明... 4 基础接口... 4 判断当前客户端版本是否支持指定JS接口... 5 ...

  8. C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能

    随着微信开逐步开放更多JSSDK的接口,我们可以利用自定义网页的方式来调用更多微信的接口,实现我们更加丰富的界面功能和效果,例如我们可以在页面中调用各种手机的硬件来获取信息,如摄像头拍照,GPS信息. ...

  9. 微信JS-SDK]微信公众号JS开发之卡券领取功能详解

    js sdk: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.99.84.E5.BD.952-.E6 ...

随机推荐

  1. 准备:新V8即将到来,Node.js的性能正在改变

    V8的Turbofan的性能特点将如何对我们优化的方式产生影响 审阅:来自V8团队的Franziska Hinkelmann和Benedikt Meurer. **更新:Node.js 8.3.0已经 ...

  2. C# 类型基础(下)

    前面介绍了基本的类型,接下来我们讲讲类型的转换 值类型的两种表现形式:未装箱和已装箱 ,而引用类型总是处于装箱形式 int count = 10; object obj = count; 装箱:值类型 ...

  3. Eclipse启动报错[ out of memory error has occurred ]或[ An internal error occurred while showing an internal error ]

    自我总结,有什么需要纠正或更好的方案,请告知,谢谢! 最近上来看到好多同学都遇到了这个问题,之前我也好几次碰到这个问题,很是恼火,什么没干,eclipse一开电脑就卡死了,后来发现不管是新打开ecli ...

  4. SEO页面优化以及如何对单页面应用进行SEO优化

    一.简介 1.何为SEO? SEO(search engine optimization),翻译为搜索引擎优化,是利用搜索引擎的搜索规则来提高在相关搜索引擎的排名以及访问量的方式. 2.目的 为了获取 ...

  5. bzoj 2627: JZPKIL [伯努利数 Pollard-rho]

    2627: JZPKIL 题意:求 \[ \sum_{i=1}^n (n,i)^x [i,n]^y,\ [i,n] = lcm(i,n) \] \(n \le 10^{18},\ x,y\le 300 ...

  6. [LeetCode] 679. 24 Game(回溯法)

    传送门 Description You have 4 cards each containing a number from 1 to 9. You need to judge whether the ...

  7. Django搭建博客网站(一)

    Django搭建自己的博客网站(一) 简介 这个系列主要是通过使用Django这个python web框架实现一个简单的个人博客网站.对Django有疑问可以上Django官网查文档. 功能 后台管理 ...

  8. Hibernate之HelloWorld

    1. 步骤 0. 导入相关Jar包. 1. 编写Hibernate的持久化文件 (默认为hibernate.cfg.xml). 2. 编写持久化类. 3. 创建对象 - 关系文件(.htm.xml文件 ...

  9. Windows Server 2012开启多人远程

    首先在Server Roles中选择Remote Desktop Services,然后在Role Services中安装Remote Desktop Session Host 安装完成后需要重启机器 ...

  10. Zabbix的网络发现

      Zabbix的网络发现 Zabbix的网络发现功能,可以让我们发现网络中的主机或者服务,并在发现该设备后做出相应的操作; 它可以用HTTP.ICMP.SSH.LDAP.TCP.SNMP.Telne ...