1. 程式人生 > >關於Vue單頁面實現微信分享的Bug

關於Vue單頁面實現微信分享的Bug

// 問題描述在微信中分享到朋友圈或好友時,分享出去的路由被破壞,開啟分享的連結,路由中的“#”會被去掉並追加?from= & Timeline= 之類的字尾引數,這就造成了分享出去的連結只能進入首頁,無法正常跳轉到其他路由。

//該問題產生的原因可能是由於vue的hash模式,微信瀏覽器只記錄了第一次訪問的頁面,而跳轉路由改的hash值,瀏覽器並沒有把他識別為一個新的頁面連結,導致每次分享的連結都會跳到初次訪問的頁面。

//此處我的解決方案是在每個頁面載入的時候都呼叫微信的api獲取簽名

//二次分享簽名失敗的解決方法需要後臺從Refere中獲取連結 換取簽名

import axios from 'axios'
const rootPath 
= process.env.NODE_ENV === 'development' ? `/api` : `` export default { wxShowMenu : function() { var href = window.location.href.split('#')[0]; //刪除二次分享時微信在連結中拼接的部分(該部分當時考慮的是解決二次分享簽名失敗,但是並沒有起效,需要後臺從Refere中獲取連結) if(href.indexOf('?from=singlemessage&isappinstalled=0') > -1) { href
= href.replace('?from=singlemessage&isappinstalled=0', '') }else if(href.indexOf('?from=timeline&isappinstalled=0') > -1) { href = href.replace('?from=timeline&isappinstalled=0', '') }else if(href.indexOf('?from=groupmessage&isappinstalled=0') > -1) { href
= href.replace('?from=groupmessage&isappinstalled=0', '') }; axios.get(rootPath + `/weixin/jsSignature?url=` + href).then((res) => { wx.config({ debug: false, appId: res.data.appid, timestamp: res.data.timestamp, nonceStr: res.data.noncestr, signature: res.data.signature, jsApiList: [ 'onMenuShareAppMessage', 'onMenuShareTimeline' ] }); wx.ready(function () { // 分享給朋友 wx.onMenuShareAppMessage({ title: '', // 分享標題 desc: "", // 分享描述 link: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1], // 分享連結 imgUrl: '', // 分享圖示 type: '', // 分享型別,music、video或link,不填預設為link dataUrl: '', // 如果type是music或video,則要提供資料鏈接,預設為空 success: function () { // window.alert('已分享給好友'); }, cancel: function () { // 使用者取消分享後執行的回撥函式 }, fail: function (res) { // window.alert(JSON.stringify(res)); } }); // 分享到朋友圈 wx.onMenuShareTimeline({ title: '', // 分享標題 desc: "", // 分享描述 link: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1], // 分享連結 success: function () { // window.alert('已分享到朋友圈'); }, cancel: function () { }, fail: function (res) { // window.alert(JSON.stringify(res)); } }); }); }) } }

//main.js中註冊全域性方法

import WXConfig from './assets/js/wxApi' // 微信分享

Vue.prototype.WXConfig = WXConfig;

//在需要分享的頁面中初始化時呼叫

mounted() {
  this.WXConfig.wxShowMenu(); 
}