微信分享踩坑之道
阿新 • • 發佈:2018-12-18
1.引入JS檔案
在需要呼叫JS介面的頁面引入如下JS檔案,(支援https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
備註:支援使用 AMD/CMD 標準模組載入方法載入
2.通過config介面注入許可權驗證配置
sdk 的config的配置
wx.config({ debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。 appId: '', // 必填,公眾號的唯一標識 timestamp: , // 必填,生成簽名的時間戳 nonceStr: '', // 必填,生成簽名的隨機串 signature: '',// 必填,簽名,見附錄1 jsApiList: [] // 必填,需要使用的JS介面列表,所有JS介面列表見附錄2 });
這邊是從後臺請求資料進行配置的
methods: { //微信分享 share(){ this.$http.post('/api/wechat/config', {'api': ["onMenuShareTimeline", "onMenuShareAppMessage"]}).then((res) => { this.wxInit(res.data); }); }, //微信分享使用方法 wxInit(sd){ Wx.config(sd) Wx.ready( ()=> { var config = { title: "邀請您加入xxxxx團隊", desc:"隊員賣貨,也享提成 ! 人數越多,提成越多 !", link:window.location.origin+"/invite/"+this.admin.agent.id, imgUrl: "http://www.php.cn/static/images/user_avatar.jpg", } Wx.onMenuShareTimeline(config); Wx.onMenuShareAppMessage(config); }); }, },
此時已經可以分享了但只限於安卓 在ios 上並不能完美實現,這裡的坑很深 (這裡花費半天時間)
經過分享和不斷的查詢發現 在ios系統下 第一次載入雖然不能分享但程式碼正確,重新整理一下頁面 可發現 可以正常分享,於是得出ios下需要重新整理一下才能分享採用以下方法
//如果是蘋果機,重新整理頁面 isIOS () { var isIphone = navigator.userAgent.includes('iPhone'); var isIpad = navigator.userAgent.includes('iPad'); return isIphone || isIpad; },
if (this.isIOS()) {
if(location.href.indexOf("#reloaded")==-1){
location.href=location.href+"#reloaded";
location.reload();
}
};
this.share()
這樣就可以實現分享了. 不知道有沒有好的辦法,望指出不足