vue2微信分享坑点

  • 现在我的需求是在首页或者详情页点击分享 成功之后会请求后端接口 如果符合条件 则会得到一张
  • 首先 肯定是先撸一波文档 微信api接口文档
    微信分享其实很简单 步骤如下
  • 绑定域名

    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这个不多说,见文档,只有绑定了才能进行下一步的动作
  • 引入js文件

    此处我用的是vux内置的插件 其他方式正常引入script即可

    1
    2
    3
    import { WechatPlugin} from 'vux'
    Vue.use(WechatPlugin); // 微信
    const wx = Vue.wechat;
  • 通过config接口注入权限验证配置

    所有需要使用JS-SDK的页面必须先注入配置信息 配置信息需要后端返回

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // 此处我是定义在vue原型中 这样方便以后的调用 通过 this.wxShare()调用
    const imgUrl = 'http://xxx.xxxx.xxxx'; // 测试地址
    Vue.prototype.wxShare = function (title, desc, link) {
    const url = document.location.href;// 当前url
    http.get(getConfig(), {//请求配置
    params: {
    url: url
    }
    }).then(res => {// 获得签名配置
    var Data = res.data.data;
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作
    wx.config({
    debug: false, // 开启调试模式,开发时可以开启
    appId: Data.appid, // 必填,公众号的唯一标识 由接口返回
    timestamp: Data.timestamp, // 必填,生成签名的时间戳 由接口返回
    nonceStr: Data.nonceStr, // 必填,生成签名的随机串 由接口返回
    signature: Data.signature, // 必填,签名 由接口返回
    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此处填你所用到的方法
    });
    });
    wx.ready(() =>{
    // ..... code
    }
    };
  • 定义方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    Vue.prototype.wxShare = function (title, desc, link) {
    wx.config()
    wx.ready(() => {
    // 所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,
    // 则可以直接调用,不需要放在ready函数中。
    wx.onMenuShareAppMessage({ // 分享给朋友
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接 默认以当前链接
    imgUrl: imgUrl + '/static/images/share.png',// 分享图标
    // 用户确认分享后执行的回调函数
    success: function () {
    var params = new URLSearchParams();
    params.append('token', window.localStorage.getItem('token'));
    params.append('type', 'share');
    http.post(shareCallback(), params).then(res => { // 请求后端分享成功之后获取一票的接口
    if (res.data.error == 0) { // 表示当天分享成功
    store.commit('shareChange', {// vuex弹出分享成功获取一票
    isShare: true
    });
    } else {
    return;
    }
    })
    },
    // 用户取消分享后执行的回调函数
    cancel: function () {
    console.log('分享到朋友取消');
    }
    });
    //分享到朋友圈
    wx.onMenuShareTimeline({});
    });
    };

然后在需要的钩子里面调用即可,以上的流程都可以在文档中查看

  • 坑点

    • 在ios微信浏览器中 window.onload.reload() 以及 window.location.go(0) 无效

      我想实现登陆之后刷新页面, 结果在登陆之后 ios并不会刷新页面
      解决办法: 最后使用 watch 解决

      1
      2
      3
      4
      5
      6
      7
      watch: {
      login: function () {
      if (this.login) {
      this._getFansCard()
      }
      }
      }
    • ios上二次分享会出现签名错误, 并且莫名被拼接上了一串标识 此问题只有在ios上有

微信截图_20170524110236.png

ios会在#号中间添加一串标识 如下

1
2
http://test.aaa.bbbb.com/?from=singlemessage&isappinstalled=0#/details?id=2
// 原本链接 http://test.aaa.bbbb.com/#/details?id=2

这个问题解决了两天,建议在一开始就开启debug模式,这样能及时知道问题所在
解决办法:
一开始以为是 ‘#’ 的问题 于是乎开启vue HTML5 History 模式 去除掉# 结果发现 在进入其他页面的时候 复制连接还是首页的链接 本质上还是没得到解决
后来发现本质上的错误是;当浏览者从分享窗口进入后,他从分享页按着正常路由跳转到其他页面,其他页面的逻辑中如果有需要获取当前页面url的需要,会发现这个url和正常路由跳转的不一样,导致签名不一致,所以获取不到正确的文案。
最后我是隔天再次测试就好了,最终我也不知道是到底如何解决的。。。。
一开始 有 # 然后开启 h5模式 最后又还原了 哈希模式 发现二次分享的问题解决了。。。。

文章目录
  1. 1. 绑定域名
  2. 2. 引入js文件
  3. 3. 通过config接口注入权限验证配置
  4. 4. 定义方法
  5. 5. 坑点
    1. 5.1. 在ios微信浏览器中 window.onload.reload() 以及 window.location.go(0) 无效
  6. 6. ios上二次分享会出现签名错误, 并且莫名被拼接上了一串标识 此问题只有在ios上有
|