vue2項目-微信分享踩的坑
在在main.js中
//在main.js頭部引入微信分享插件
import?wx?from?'weixin-js-sdk';
Vue.use(wx);
//設(shè)置微信分享全局函數(shù)
consthttp=Vue.http;
Vue.prototype.wxShare=function(title,?desc,link,imgUrl,url)?{
http.get(url).then(res=>{//?獲得簽名配置
varData=res.body.data;
//?config信息驗證后會執(zhí)行ready方法炸宵，所有接口調(diào)用都必須在config接口獲得結(jié)果之后谷扣，config是一個客戶端的異步操作捎琐，
wx.config({
debug:false,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來裹匙，若要查看傳入的參數(shù)，可以在pc端打開概页，參數(shù)信息會通過log打出，僅在pc端時才會打印惰匙。
appId:?Data.appid,???//?必填，公眾號的唯一標(biāo)識
timestamp:?Data.timestamp,?//?必填哑梳，生成簽名的時間戳
nonceStr:?Data.nonceStr,???//?必填绘盟，生成簽名的隨機(jī)串
signature:?Data.signature,?//?必填，簽名吠卷，見附錄1
jsApiList:?['onMenuShareAppMessage',?'onMenuShareTimeline']?//?必填，需要使用的JS接口列表祭隔，所有JS接口列表見附錄2
});
});
wx.ready(()?=>{
//?所以如果需要在頁面加載時就調(diào)用相關(guān)接口蠢终，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，
//?則可以直接調(diào)用丈牢，不需要放在ready函數(shù)中。
wx.onMenuShareAppMessage({?//?分享給朋友
title:?title,?//?分享標(biāo)題
desc:?desc,???//?分享描述
link:link,???//?分享鏈接?默認(rèn)以當(dāng)前鏈接
imgUrl:?imgUrl,//?分享圖標(biāo)
//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
success:?function?()?{
console.log('分享成功');
},
//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
cancel:?function?()?{
console.log('分享到朋友取消');
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title:?title,?//?分享標(biāo)題
desc:?desc,
link:link,
imgUrl:?imgUrl,//?分享圖標(biāo)
//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
success:?function?()?{
console.log("分享成功");
},
//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
cancel:?function?()?{
console.log('分享到朋友圈取消');
}
});
wx.error(function(res){
console.log(res);//?config信息驗證失敗會執(zhí)行error函數(shù)慌核，如簽名過期導(dǎo)致驗證失敗申尼，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看粟按，對于SPA可以在這里更新簽名诬滩。
});
});
};
一疼鸟、路由不是HTML5 History 模式的坑
1庙曙、在vue2項目中，獲取簽名是異步請求的吴攒，可是異步請求的鏈接，后臺（php）獲取鏈接的“#”之前的舶斧，導(dǎo)致報：config:invalid signatur
二察皇、路由是HTML5 History 模式的坑
1、解決了路由不是HTML5 History 模式的坑什荣，在安卓中可以分享成功了
2稻爬、在ios中，首頁可以分享成功桅锄，可是進(jìn)入其他頁面的分享在真機(jī)會報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翠肘、解決的坑：重新加載當(dāng)前頁面
[html]view plaincopy
if?(!this.$route.query.wfzs)?{
location.href=location.href+"&wfzs="+Math.random();
}
b束倍、解決的坑：把vue的?改成a標(biāo)簽盟戏，進(jìn)入頁面就會自動刷新當(dāng)前頁面了，Landing Page就是當(dāng)前頁面的鏈接了
參考：1柿究、http://www.reibang.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/
