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/