实测有效 解决微信游览器和企业微信游览器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的更多相关文章
-
微信开发配置JSSDK,注入权限验证,以及invalid signature签名错误解决
在微信开发中很多功能都要用到微信JSSDK,关于JSSDK的使用,微信官方的文档已经比较详细,一定要仔细去看文档. <script src="https://res.wx.qq.com ...
-
C#微信开发-微信JS-SDK(1)之通过config接口注入权限验证配置
官方文档是微信JS-SDK的使用步骤http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.B ...
-
微信开发(2):微信js sdk分享朋友圈,朋友,获取config接口注入权限验证(转)
进行微信开发已经一阵子了,从最初的什么也不懂,到微信授权登录,分享,更改底部菜单,素材管理,等. 今天记录一下微信jssdk 的分享给朋友的功能,获取config接口注入. 官方文档走一下简单说:四步 ...
-
微信jssdk常见错误及解决方法
调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息.以下为常见错误及解决方法: invalid url domain当前页面所在域名与使用 ...
-
微信JSSDK权限签名申请
前提: 1.绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 里边有说明(这里提示一点:需要把当前公众号的验证文件放到指定目录下) 2.需要参数: APPID. ...
-
微信JS-SDK开发 入门指南
目录 前言 1. 过程 1.1 代码 1.2 代理 1.3 下载 1.4 解压 1.5 运行 1.6 查看 2. 微信接口测试 2.1 申请测试帐号 2.1.1 测试号信息 2.1.2 接口配置信息 ...
-
微信JS-SDK文档
微信JS SDK 调用详解 微信JS SDK 调用详解... 1 概述... 2 使用说明... 2 接口调用说明... 4 基础接口... 4 判断当前客户端版本是否支持指定JS接口... 5 ...
-
C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能
随着微信开逐步开放更多JSSDK的接口,我们可以利用自定义网页的方式来调用更多微信的接口,实现我们更加丰富的界面功能和效果,例如我们可以在页面中调用各种手机的硬件来获取信息,如摄像头拍照,GPS信息. ...
-
微信JS-SDK]微信公众号JS开发之卡券领取功能详解
js sdk: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.99.84.E5.BD.952-.E6 ...
随机推荐
-
c - 向一个排序好的数组插入一个数,插入后数组依然是排序好的
概述 因为这里只是演示插入1个数,这里我不用malloc再重新分配,而是将原先数组的腾出一个占位符. 完整代码如下: #include <stdio.h> #define LEN 6 // ...
-
C与C++ 无参函数的区别
在<C++ 编程思想>:“关于无参函数声明,C与C++有很大的差别.在C语言中,声明int fun1(),意味着一个可以有任意数目和类型的函数:而在C++中,指的却是一个没有参数的函数”. ...
-
[置顶] Firefox OS 学习——manifest.webapp结构分析
在Firefox OS 学习——Gaia 编译分析 这篇文章多次提到manifest.webapp文件,对于做过android app 开发的人来说,都很熟悉Android.mk 和Manifest ...
-
iOS基础 - 史上最难游戏
步骤一:隐藏状态栏 步骤二:屏幕适配 步骤三:设置窗口的根控制器为导航控制器,并且设置导航条和状态栏. 步骤四:搭建设置界面 步骤五:控制器连线 步骤六:搭建关卡控制器 加载pilst文件 创建关卡模 ...
-
vue端口号被占用如何解决
vue端口占用问题 1. vue init webpack-simple#1.0 vue-webpack-simple-demo 2. cd vue-webpack-simple-demo 3. cn ...
-
【BZOJ4407】于神之怒加强版(莫比乌斯反演)
[BZOJ4407]于神之怒加强版(莫比乌斯反演) 题面 BZOJ 求: \[\sum_{i=1}^n\sum_{j=1}^mgcd(i,j)^k\] 题解 根据惯用套路 把公约数提出来 \[\sum ...
-
微信小程序开发问题汇总
前言 经过将近一个多月的开发,我们团队开发的微信小程序 "出发吧一起" 终于开发完成,现在的线上版本为 2.2.4-beta 版 本文档主要介绍该小程序在开发中所用到的技术,已经在 ...
-
熟悉常用的Linux操作
请按要求上机实践如下linux基本命令. cd命令:切换目录 (1)切换到目录 /usr/local cd /usr/local (2)去到目前的上层目录 cd .. (3)回到自己的主文件夹 ...
-
斐讯K1 K2 开启Telnet
官方V21.4.5.5前的ROM,直接打开下边这个链接就直接开telnet了,然后就可以随便搞了 http://192.168.2.1/goform/gra_NTPSyncWithLocal?text ...
-
js 选项卡制作
知识回顾,制作JS选项卡,仅供参考 html代码: <!DOCTYPE html> <html lang="en"> <head> <me ...