vue2項目-微信分享踩的坑
在在main.js中
//在main.js頭部引入微信分享插件
import?wx?from?'weixin-js-sdk';
Vue.use(wx);
//設置微信分享全局函數
consthttp=Vue.http;
Vue.prototype.wxShare=function(title,?desc,link,imgUrl,url)?{
http.get(url).then(res=>{//?獲得簽名配置
varData=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、解決的坑：重新加載當前頁面
[html]view plaincopy
if?(!this.$route.query.wfzs)?{
location.href=location.href+"&wfzs="+Math.random();
}
b、解決的坑：把vue的?改成a標簽，進入頁面就會自動刷新當前頁面了，Landing Page就是當前頁面的鏈接了
參考：1、http://www.lxweimin.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/
