实测有效 解决微信游览器和企业微信游览器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. 【转】国外几款GPS卫星历预报软件

    以下是几款著名GPS厂商的星历软件: Trimble星历软件: http://www.trimble.com/planningsoftware.shtml Topcon星历软件: http://www ...

  2. 使用locate 的正则查询 查找所有main.c

    locate支持正则查询的功能, 只需输入locate -r 正则表达式     即可. 现在我想查找所有main.c怎么做? 打开终端,输入shell: locate -r main.c$ PS:' ...

  3. 获取IP Address

    public string GetUserIp() { var visitorsIpAddr = string.Empty; if (System.Web.HttpContext.Current.Re ...

  4. JAX-RS和Jersey

    一:JAX-RS JAX-RS是JAVA EE6 引入的一个新技术. JAX-RS即Java API for RESTful Web Services,是一个Java 编程语言的应用程序接口,支持按照 ...

  5. 和spring cloud/boot 学习如何管理自己的组件

    案例, 功能: 需要写一个往kafka上报数据的组建. 当组建启动时,需要建立如下资源: 1, 和kafka建立若干条连接 2, 启动一个线程池 3, 启动上报一个缓冲区 问题如下: 1, 如何在sp ...

  6. ant基础[转]

    原文链接:http://www.cnblogs.com/wufengxyz/archive/2011/11/24/2261797.html 1,什么是antant是构建工具2,什么是构建概念到处可查到 ...

  7. 51NOD 1821 最优集合 [并查集]

    传送门 题意: 一个集合S的优美值定义为:最大的x,满足对于任意i∈[1,x],都存在一个S的子集S',使得S'中元素之和为i. 给定n个集合,对于每一次询问,指定一个集合S1和一个集合S2,以及一个 ...

  8. vue2.0之render函数

    虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪.请近距离看一下这行代码 ...

  9. 撸一撸Spring Cloud Ribbon的原理

    说起负载均衡一般都会想到服务端的负载均衡,常用产品包括LBS硬件或云服务.Nginx等,都是耳熟能详的产品. 而Spring Cloud提供了让服务调用端具备负载均衡能力的Ribbon,通过和Eure ...

  10. JavaScript使用点滴

    JavaScript使用点滴 一.字符串替换的小插曲 遇到一个小插曲,想要把后台返回的字符串输出给前端视图,字符串中包含\n换行,需要使用javascript对其进行替换成<br />. ...