公众号微信分享踩坑记录-CSDN博客

产品需求

在微信内分享需要手动配置的分享地址、分享图片与内容描述，引导用户分享，并在微信分享成功回调内进行相应的操作。

开工

1. 导入微信jssdk

import wx from 'weixin-js-sdk'
复制代码

2. 封装函数获取微信分享必填参数

function wxConfig(url){
  let config = {
    debug: false, // 开启调试模式
    appId: opt.appId, // 必填，公众号的唯一标识
    timestamp: opt.timestamp, // 必填，生成签名的时间戳
    nonceStr: opt.nonceStr, // 必填，生成签名的随机串
    signature: opt.signature,// 必填，签名
    jsApiList: [
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareQZone'
    ] // 必填，需要使用的JS接口列表
  }
}
复制代码

3. 配置wxShare

采取axios和拦截器进行封装，方便以后根据业务进行各种判断和处理

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  let imgUrl = `${location.origin}/static/images/logo.jpg`
  let url = location.href; // 分享默认链接
  var _opt = {
    title: '分享标题',
    desc: '分享描述',
    link: url,
    imgUrl: encodeURI(imgUrl.trim()),
    success: function () {
      // 设置成功
      callback && callback()
    }
  }
复制代码

测试结果

1.同一套程序，andriod分享正常，ios分享报签名不正确，主要原因是微信的ios和安卓处理方式不一样，ios不会刷新当前的页面地址，使用的是history的记录地址，所以每次分享出来的链接，都是第一个进入系统页面的链接，当跳转到子页面的时候，系统就会识别打开的url和签名的url不一致导致签名不正确

2.由于单页面的hash模式会自带#号，但是分享的时候会将#号后面的参数变成无效，导致想传参数都传不过去，可以做一个页面没有#号的，然后统一带参数分享到这个页面然后再重定向到指定的vue页面

解决方法

在向后台发送请求获取微信签名的时候将传给后台的URL的#后面的参数截去，后台根据截取完的URL生成签名就能实现安卓和iOS分享回调成功的问题。

let url = encodeURIComponent(window.shareLink)
Vue.http.get(`/wxoauth/getJsapiSignature?url=${url}`)
  .then(res => {
    wxhare(res.body.data)
  })
  .catch(function (response) {
    console.log(response);
  });
复制代码