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 ...
随机推荐
- [WOJ1583]向右看齐
题目链接: WOJ1583 题目分析: 大水题--我就来水个题解 倒序扫,单调栈维护单减序列,每个对象的答案是栈里它下面那个元素 代码: #include<bits/stdc++.h> # ...
- double发生精度丢失的解决办法
发生精度丢失的原因: 个人理解:机器在运行时,使用2进制形式的计数方式,而我们日常生活中的计算是10进制的,对于整数的加减乘除,double还能适用,但是对于有小数的,则容易发生精度丢失,即用2进制表 ...
- JDBC全部分析
2.1.搭建实验环境 1.在mysql中创建一个库,并创建user表和插入表的数据. SQL脚本如下: 1 create database jdbcStudy character set utf8 c ...
- spark性能调优--jvm调优(转)
一.问题切入 调用spark 程序的时候,在获取数据库连接的时候总是报 内存溢出 错误 (在ideal上运行的时候设置jvm参数 -Xms512m -Xmx1024m -XX:PermSize=51 ...
- PMP项目管理学习笔记(12)——范围管理之创建工作分解结构(WBS)
创建工作分解结构过程是范围管理知识领域中最重要的过程,因为要在此过程明确所要做的全部工作 输入:收集需求和定义范围过程的输出会成为创建工作分解结构过程的输入(需求文档.组织资产过程.项目范围说明书) ...
- Sql Server 2012 分页方法分析(offset and fetch)
最近在分析 Sql Server 2012 中 offset and fetch 的新特性,发现 offset and fetch 无论语法的简洁还是功能的强大,都是相当相当不错的.其中 offse ...
- Javascript中setTimeout()以及clearTimeout( )的使用
setTimeout setTimeout( ) 是属于 window 的 method, 这是用来设定一个时间,时间到了, 就会执行一个指定的 方法.练习一:等候三秒才执行的 alert( )set ...
- 洛谷 P2319 [HNOI2006]超级英雄
题目描述 题目描述 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确回答一 ...
- MyEclipse 2015 安装到配置一站式备忘
目录 h1 2121 h1 2121
- 7-Java-C(四平方和)
题目描述: 四平方和定理,又称为拉格朗日定理: 每个正整数都可以表示为至多4个正整数的平方和. 如果把0包括进去,就正好可以表示为4个数的平方和. 比如: 5 = 0^2 + 0^2 + 1^2 + ...