vue2实现微信分享坑点

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

• 绑定域名

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

• 引入js文件

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

  import { WechatPlugin} from 'vux'
  Vue.use(WechatPlugin); //  微信
  const wx = Vue.wechat;

• 通过config接口注入权限验证配置

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

  
  // 此处我是定义在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 
  }
  };

• 定义方法

  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 解决

    watch: {
      login: function () {
        if (this.login) {
          this._getFansCard()
        }
      }
    }

  • ios上二次分享会出现签名错误, 并且莫名被拼接上了一串标识 此问题只有在ios上有

 

微信截图_20170524110236.png

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

 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模式 最后又还原了 哈希模式 发现二次分享的问题解决了。。。。

作者：宇cccc
链接：http://www.jianshu.com/p/a1a31f9da272
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。