微信分享常遇问题
1,invalid signature 签名失败
签名一般都是后台生成, 检查 appid 是否和后台一致
2.config:ok 分享出去的却不是自己想要的
1.url 问题
Windows.location.href.split('#')[0], 传递 url 时候去掉 #后面的数据
根据实际情况是否对 url 进行 decodeURLCompent)
2. 分享 link 问题
分享出去的链接需要在 appid 对应的公众号上添加 JS 安全域名
协议 // 相对写法, 不要写死
3. 图片链接
图片链接 协议需要写死 http 或者 https
vue 中 可能会遇到 奇怪的问题
iOS 分明 config:ok 有时候下一页分享却有问题
iOS 用 vue 路由跳转, 进入下一页, 这时候复制这个链接, 发现还是上一页的链接
除了修改跳转方式, 还可以通过路由拦截. 修改 url
- router.afterEach((to, from) => {
- const u = navigator.userAgent.toLowerCase()
- // 微信中跳转
- if(u.indexOf("like mac os x") <0 || u.match(/MicroMessenger/i) != 'micromessenger') return
- // 有个坏处就是可能会有奇怪的 bug 所以在这针对要分享的页面单独处理 xxxx 替换
- if (to.path.indexOf('xxxx')> -1){
- if (to.path !== global.location.pathname) {
- location.assign(to.fullPath)
- }
- }
- })
安卓有时候在 vue main.JS 分明配置 ok 跳转下一页 却不好使 刷新一下就 ok
在当前页重新配置吧~
附:
判断是否为微信的方法
- function isWeiXin() {
- var ua = Windows.navigator.userAgent.toLowerCase();
- if (ua.match(/MicroMessenger/i) == 'micromessenger') {
- return true;
- } else {
- return false;
- }
- }
微信分享配置
- // 是否为微信
- if (isWeiXin()){
- let url = Windows.location.href.split('#')[0]
- // 解码
- url = decodeURIComponent(url)
- axios.get('后台地址', { params: { url: url } }).then((response) => {
- if (response.data) {
- let data = response.data.result
- wx.config({
- debug: false, // 开启调试模式, 调用的所有 API 的返回值会在客户端 alert 出来, 若要查看传入的参数, 可以在 pc 端打开, 参数信息会通过 log 打出, 仅在 pc 端时才会打印.
- appId: 'xxxxxxxxxxx', // 必填, 公众号的唯一标识
- timestamp: data.timestamp, // 必填, 生成签名的时间戳
- nonceStr: data.noncestr, // 必填, 生成签名的随机串
- signature: data.signature, // 必填, 签名, 见附录 1
- jsApiList: [
- 'checkJsApi',
- 'hideOptionMenu',
- 'onMenuShareTimeline',
- 'onMenuShareAppMessage',
- 'onMenuShareQQ',
- 'onMenuShareWeibo',
- 'onMenuShareQZone'
- ] // 必填, 需要使用的 JS 接口列表, 所有 JS 接口列表见附录 2
- })
- }
- })
- // }
- // 微信分享设置
- let descs = '我要我的滋味'
- this.wxshare({ title: '自定 title', imgUrl: '', descs: descs });
- }
- wxshare({ title, imgUrl, descs }) {
- wx.ready(function () {
- let url = Windows.location.href;
- // config 信息验证后会执行 ready 方法, 所有接口调用都必须在 config 接口获得结果之后, config 是一个客户端的异步操作, 所以如果需要在页面加载时就调用相关接口, 则须把相关接口放在 ready 函数中调用来确保正确执行. 对于用户触发时才调用的接口, 则可以直接调用, 不需要放在 ready 函数中.
- let shareConfig = {
- title: title || '默认 title',
- link: ,
- imgUrl: imgUrl || '默认连接',
- desc: descs,
- type: 'link',
- success: function () {
- // 用户确认分享后执行的回调函数
- // alert('分享成功')
- // alert(imgUrl)
- // alert('分享成功')
- },
- cancel: function () {
- // alert('分享取消');
- }
- }
- wx.onMenuShareTimeline(shareConfig);
- wx.onMenuShareAppMessage(shareConfig);
- wx.onMenuShareQQ(shareConfig);
- wx.onMenuShareWeibo(shareConfig);
- wx.onMenuShareQZone(shareConfig);
- });
- },
来源: http://www.jianshu.com/p/18edbf0ac9d2