实测有效 解决微信游览器和企业微信游览器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. Struts2.3.34+Hibernate 4.x+Spring4.x 整合二部曲之上部曲

    1 导入jar包 可以复制jar包或maven导入,本文最后会给出github地址 2 导入log4j.properties文件 og4j.appender.stdout=org.apache.log ...

  2. python --- queue模块使用

    1. 什么是队列? 学过数据结构的人都知道,如果不知道队列,请Google(或百度). 2. 在python中什么是多生产者,多消费模型? 简单来说,就是一边生产(多个生产者),一边消费(多个消费者) ...

  3. CSS-——水平居中设置

    1.行内元素水平居中方法:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 2.块状元素--定块状元素水平居中方法: (1)定宽块状元 ...

  4. poj2479 最大子段和

    题意:给定一个数列.求出数列中不相交的两个子段和,要求和最大 解题思路:对每一个i来说,求出[0-i-1]的最大子段和以及[i-n-1]的最大子段和,再加起来,求出最大的一个.[0-i-1]的最大子段 ...

  5. spring中Bean对象的生命周期

    经过测试对于具体的一个Bean,执行的流程应该是: 1.实例化: 常见的有构造(有参.无参)实例化.静态工厂(方法是静态,通过类名.方法返回获取).实例工厂(专门有个类负责生产对象,需要在bean中配 ...

  6. SQL Server比较2table字段的差异

    由于项目前后用了2个数据库,需要统计数据库结构的变化,需要统计每个表的变化,由于人工核对挺浪费时间,就写了一点代码: 1.统计表的字段数量(查询表有多少列): select count(name)   ...

  7. NoSQL在大数据中的应用

    一.序言 NoSQL是Not Only SQL的缩写,而不是Not SQL,指的是非关系型的数据库,它不一定遵循传统数据库的一些基本要求,比如说遵循SQL标准.ACID属性.表结构等等.相比传统数据库 ...

  8. 【java学习】spring mvc 公共dao的实现,定义基本的增删改查

    接口类: package com.blog.db.dao; import com.blog.util.Pagination; import java.util.List; public interfa ...

  9. Matplotlib快速入门笔记

    我正以Python作为突破口,入门机器学习相关知识.出于机器学习实践过程中的需要,快速了解了一下matplotlib绘图库.下图是我学习过程中整理的一些概念. 本文将以该图为线索梳理相关概念. 简介 ...

  10. C# 实现Html转JSON

    Html为树结构->Json为数组结构 应用场景 H5或浏览器展示Html代码没有问题,但是让原生APP或ReactNative直接展示Html可能会有很多不便 实现方法 可以通过正则表达式捕获 ...