vue2-微信分享踩的坑

vue2项目-微信分享踩的坑

在在main.js中

//在main.js头部引入微信分享插件import wx from 'weixin-js-sdk';Vue.use(wx);//设置微信分享全局函数const http = Vue.http;Vue.prototype.wxShare = function (title, desc,link,imgUrl,url) {http.get(url).then(res => {// 获得签名配置    var Data =res.body.data;    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，    wx.config({      debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。      appId: Data.appid,   // 必填，公众号的唯一标识      timestamp: Data.timestamp, // 必填，生成签名的时间戳      nonceStr: Data.nonceStr,   // 必填，生成签名的随机串      signature: Data.signature, // 必填，签名，见附录1      jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2    });});    wx.ready(() => {    // 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，    // 则可以直接调用，不需要放在ready函数中。    wx.onMenuShareAppMessage({ // 分享给朋友    title: title, // 分享标题    desc: desc,   // 分享描述    link:link,   // 分享链接 默认以当前链接    imgUrl: imgUrl,// 分享图标    // 用户确认分享后执行的回调函数    success: function () {        console.log('分享成功');    },    // 用户取消分享后执行的回调函数    cancel: function () {        console.log('分享到朋友取消');    }    });    //分享到朋友圈    wx.onMenuShareTimeline({      title: title, // 分享标题      desc: desc,      link:link,      imgUrl: imgUrl,// 分享图标      // 用户确认分享后执行的回调函数      success: function () {        console.log("分享成功");      },      // 用户取消分享后执行的回调函数      cancel: function () {        console.log('分享到朋友圈取消');      }    });    wx.error(function(res){       console.log(res);// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。    });    });};

一、路由不是HTML5 History 模式的坑
     1、在vue2项目中，获取签名是异步请求的，可是异步请求的链接，后台（php）获取链接的“#”之前的，导致报：config:invalid signatur
二、路由是HTML5 History 模式的坑
     1、解决了路由不是HTML5 History 模式的坑，在安卓中可以分享成功了




2、在ios中，首页可以分享成功，可是进入其他页面的分享在真机会报config:invalid signatur
   原因是：在微信分享时，分享的链接
  IOS：Landing Page
  安卓：Current Page


详情请查看：http://yurixu.com/blog/2016/08/21/%E6%BC%AB%E8%B0%88%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98-%E6%8E%88%E6%9D%83%E7%9B%AE%E5%BD%95%E8%AE%BE%E7%BD%AE/

a、解决的坑：重新加载当前页面

if (!this.$route.query.wfzs) {            location.href=location.href+"&wfzs="+Math.random();        }

b、解决的坑：把vue的 <router-link>改成a标签，进入页面就会自动刷新当前页面了，Landing Page就是当前页面的链接了

参考：1、http://www.jianshu.com/p/a1a31f9da272

           2、http://yurixu.com/blog/2016/08/21/%E6%BC%AB%E8%B0%88%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98-%E6%8E%88%E6%9D%83%E7%9B%AE%E5%BD%95%E8%AE%BE%E7%BD%AE/