Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios二次分享时均config:ok但是分享无效的解决办法
简述需求:要求指定页面可以进行微信自定义分享(自定义标题,描述,图片,链接),剩下的页面隐藏所有基础接口。二次分享依然可以正常使用,切换至其他页面也可以正常进行自定义分享。
这两天在做微信自定义分享的需求,相信大家都遇到过这问题,就是使用JS-SDK的页面注入配置信息时安卓系统config:ok,ios系统config:invalid signature签名错误。然后大家都去查微信jssdk的文档,里面所说的config:invalid signature可能原因你都一个个查验过发现没有问题,但是还是提示签名错误,是不是很抓狂很蛋疼???然后你再去查请求配置信息时的动态URL是否有问题,你会发现安卓ios打印出来的url都是正确的,问题究竟出在哪里呢???就问你难不难受!!!
当我实现了安卓和ios系统均成功自定义分享时,出现了另一个bug,就是二次分享时ios系统当前页面正常有效,切换至其他页面时自定义分享失效了,但是debug发现安卓ios都提示config:ok,然而分享却无效,就问你难不难受!!!
查阅了网上很多的解决方案,没有一个是真的能解决我所遇到的问题。说二次分享失效因为微信自带from等参数的、解决方案写一半的、没有效果的,让我感到深深的坑爹感。最后研究出来了解决方案,不需要对链接做清除微信带过来的参数,也不需要做太多的处理。
安卓系统签名没问题,ios系统签名有问题,那么肯定就是url的问题了。其实问题就出在ios系统对vue-router的history的支持上,由于Vue的spa特点,尽管你打印出来都是你所要的当前页面url,只要你不刷新页面,ios获取到的url永远是你进入这个项目的第一个url,这样的话你请求签名就会变成动态url不一致导致签名失败。不信???你可以到签名失败的那个页面手动刷新一次,然后你会发现此时签名就成功了,因为刷新后获取的第一个url就是你当前的页面url。既然如此我们就需要在如何获取真正的动态url这里做文章,至于那些设置js安全域名、获取timestamp,nonceStr,signature这些我就不说了,百度一下大把解决方案。
解决方法就是在路由守卫afterEach中判断是ios系统时保存第一次进入时的链接地址,每当路由进入页面时判断当前页面地址和保存的第一次进入的链接地址是否一致,不一致时用location.replace刷新页面,获取刷新后的地址进行请求。安卓系统则每次都拿当前页面地址进行请求。具体代码如下:
1.在util.js文件中定义函数:
import { getSignature } from '@/api/api'
// 判断手机系统
export function isAndroid () {
var u = navigator.userAgent
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
if (isAndroid) {
return true
} else {
return false
}
} 2.在wechatConfig.js文件中定义函数:
import { getSignature } from '@/api/api' /* eslint-disable no-undef */
// 微信注入依赖config校验
export function getWxConfig (url) {
getSignature(encodeURIComponent(url)).then(data => {
if (data.result_code === '000') {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.result.appId, // 必填,公众号的唯一标识
timestamp: data.result.timestamp, // 必填,生成签名的时间戳
nonceStr: data.result.noncestr, // 必填,生成签名的随机串
signature: encodeURIComponent(data.result.signature), // 必填,签名,见附录1
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'showAllNonBaseMenuItem', 'hideAllNonBaseMenuItem'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
})
} else {
console.log('获取授权信息错误')
}
}).catch(err => {
console.warn(err)
console.log('获取授权失败')
})
} // 微信分享配置 显示微信浏览器右边菜单中的显示所有功能按钮接口
export function wxShare (title, desc, url, imgUrl) {
wx.ready(function () {
wx.showAllNonBaseMenuItem()
wx.onMenuShareAppMessage({ // 分享给朋友
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
}) wx.onMenuShareTimeline({ // 朋友圈分享
title: title, // 分享标题
link: url, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
}) wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
}) wx.onMenuShareWeibo({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
}) wx.onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
})
wx.error(function (e) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.warn(e)
})
} // 隐藏微信浏览器右边菜单中的所有非基础按钮接口
export function wxMenuHide () {
wx.ready(function () {
wx.hideAllNonBaseMenuItem()
})
wx.error(function (e) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.warn(e)
})
}
3.在路由表标记需要分享的页面和具体自定义分享的标题,描述,图片:
const routerMap = [
{
path: '/',
component: () => import('@/views/home'),
meta: {
title: '首页',
keepAlive: true,
isShare: true,
shareName: '微信自定义分享',
shareDesc: 'Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios分享时均config:ok但是分享无效的解决办法',
shareImg: 'https://xxx.png'
}
},
{
path: '/home',
name: 'home',
component: () => import('@/views/home'),
meta: {
title: '首页',
keepAlive: true,
isShare: true,
shareName: '微信自定义分享解决了吗?',
shareDesc: '这些都是实测有效才发布的文章,希望可以帮到你们!',
shareImg: 'https://xxx.png'
}
},
{
path: '/name',
name: 'name',
component: () => import('@/views/name'),
meta: {
title: '详情页',
keepAlive: true,
isShare: false
}
}
]
4.在路由守卫写入函数:
import { isAndroid } from '@/utils/util'
import { getWxConfig, wxShare, wxMenuHide } from '@/utils/wechatConfig'
router.afterEach((to, from) => {
/** 这段是我判断项目正式服和测试服路径的代码,请根据实际拼接自己项目链接路径 **/
let path = getPublicPath().replace(/\//g, '')
let environment = process.env.NODE_ENV
let version = process.env.VUE_APP_VER
let FRONT_BASE
if (environment === 'production' && version === 'prod') {
FRONT_BASE = `${location.protocol}//${location.host}`
} else if (environment === 'production' && version === 'test') {
FRONT_BASE = `${location.protocol}//${location.host}/${path}`
} else {
FRONT_BASE = `${location.protocol}//${location.host}`
}
let url = FRONT_BASE + to.fullPath
/** 这段是我判断项目正式服和测试服路径的代码,请根据实际拼接自己项目链接路径 **/
if (isAndroid()) { // 非ios设备,切换路由时候进行重新签名
getWxConfig(url)
} else { // ios设备,刷新页面进行重新签名
if (window.entryUrl === '' || window.entryUrl === undefined || window.entryUrl === null) {
window.entryUrl = url
}
if (window.entryUrl !== url) {
window.entryUrl = url
window.location.replace(url)
} else {
getWxConfig(window.entryUrl)
}
}
if (to.meta.isShare) {
wxShare(to.meta.shareName, to.meta.shareDesc, url, to.meta.shareImg)
} else {
wxMenuHide()
}
})
以上就是详细的解决方案,亲测有效,希望能帮到大家。
如需转载请注明出处:https://www.cnblogs.com/zishang91/p/10755488.html,以便有错误可以及时修改,若有错漏不足之处,请见谅并且指点,谢谢!!!
Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios二次分享时均config:ok但是分享无效的解决办法的更多相关文章
- 微信网页分享 jssdk config:invalid signature 签名错误
invalid signature签名错误.建议按如下顺序检查: 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisi ...
- 微信JSAPI分享朋友圈调试经验:invalid signature签名错误排查
.invalid signature签名错误.建议按如下顺序检查: 1.确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapi ...
- 微信jssdk config:invalid signature 签名错误 ,问题排查过程
invalid signature签名错误.建议按如下顺序检查: 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisi ...
- 基于weixin-java-mp 做微信JS签名 invalid signature签名错误 官方说明
微信JS签名详情请见:http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang= ...
- 微信-js sdk invalid signature签名错误 问题解决
如果出现 invalid signature,首先可以确定的是你的签名算法有问题.建议:首先查看微信官方网站给出的解决方案,链接为: http://mp.weixin.qq.com/wiki/7/aa ...
- 微信开发配置JSSDK,注入权限验证,以及invalid signature签名错误解决
在微信开发中很多功能都要用到微信JSSDK,关于JSSDK的使用,微信官方的文档已经比较详细,一定要仔细去看文档. <script src="https://res.wx.qq.com ...
- 微信分享jssdk config:invalid signature 签名错误
使用微信分享时,按照官方给的demo,使用时一直提示签名错误. 根据微信开发文档(http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd ...
- 启动安卓模拟器报错 emulator: ERROR: x86_64 emulation currently requires hardware acceleration! CPU acceleration status:HAXM must be updated(version 1.1.1<6.0.1) 解决办法
启动安卓模拟器报错 emulator: ERROR: x86_64 emulation currently requires hardware acceleration! CPU accelerat ...
- VS2012与VS2015同时安装用VS2012创建MFC程序时弹出编译错误”fatal error C1083: 无法打开包括文件:“mprapidef.h”: No such file or directory”的解决办法
在WIndows 7操作系统上同时安装VS2012与VS2015并用VS2012创建MFC程序时弹出编译错误”fatal error C1083: 无法打开包括文件:“mprapidef.h”: No ...
随机推荐
- Jquery | 基础 | 属性过滤选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- UltraEdit配置C++开发环境
1.下载UltraEdit软件安装 2.下载MinGW库安装 3.在系统设置环境变量,在path里加上你的MinGW\bin目录即可. 4.进入UltraEdit软件进行如下配置: 菜单栏---高级- ...
- 146 LRU Cache 最近最少使用页面置换算法
设计和实现一个 LRU(最近最少使用)缓存 数据结构,使它应该支持以下操作: get 和 put .get(key) - 如果密钥存在于缓存中,则获取密钥的值(总是正数),否则返回 -1.put(k ...
- Retrofit实现PUT网络请求,并修改Content-Type
@FormUrlEncoded @PUT(Constant.BOSS_HX_CHANGE_PHONE_INTERVIEW) Call<ResponseHxResultBean> handl ...
- DNS练习之正向解析
配置正向解析: 主机名:sishen63 主机IP:192.168.1.63 操作系统:Red Hat Enterprise Linux Server release 6.5 (Santiago) 安 ...
- [转].NET 4 并行(多核)编程系列之二 从Task开始
本文转自:http://www.cnblogs.com/yanyangtian/archive/2010/05/22/1741379.html .NET 4 并行(多核)编程系列之二 从Task开始 ...
- Eigen3的安装
- vb6如何调用delphi DLL中的函数并返回字符串?
1,问题描述 最近发现vb6调用delphi DLL中的函数并返回字符串时出现问题,有时正常,有时出现?号,有时干脆导致VB程序退出 -- :: 将金额数字转化为可读的语音文字:1转化为1元 ???? ...
- (转)使用Spring的注解方式实现AOP的细节
http://blog.csdn.net/yerenyuan_pku/article/details/52879669 前面我们已经入门使用Spring的注解方式实现AOP了,现在我们再来学习使用Sp ...
- About the iOS File System
两个维度: 1)是否给用户使用: 2)是否持久存储. During installation of a new app, the installer creates a number of conta ...