表示是第一次使用vue做單應用顯目，也是在逐漸的摸索中~更是各種踩坑，各種填坑，打算寫部落格麼？是因為不想寫筆記了，嗯嗯 就是這麼簡單 進入正題。

剛開始做微信分享的這個功能的時候，腦補了官方文件微信JS-SDK說明文件

基礎的知識不多說了，反正多看文件總是沒錯的~在安卓系統上面分享是沒出錯的，但是在ios上面問題就來了，表示無限吐槽ios，但是吐槽歸吐槽，問題總是該解決的—在網上百度了很多vue單應用在ios系統中實現微信分享失敗的原因以及解決方案

原因

單頁面應用通過什麼入口進去的 url保持不變 比如說入口是./index 後面不管頁面怎麼跳轉 位址列的地址都保持./index不變 這就導致微信分享的時候 位址列的地址與當前頁面的url不匹配 獲取簽名失敗 所以分享就失敗了~

解決方案

可以使用window.location.href去跳轉，而不使用路由跳轉，這樣可以使位址列的地址與當前頁的地址一樣，可以分享成功（適合分享的頁面不多的情況下）

把入口地址儲存在本地，等需要獲取簽名的時候 取出來（有效~強推！！！）

注意：sessionStorage.setItem(‘href',href); 只在剛進入單應用的時候儲存！

mounted: function() {
   this.$nextTick(function() { //vue裡面全部載入好了再執行的函式 （類似於setTimeout）
    this.myAddressSlots[0].defaultIndex = 0
   });
   var href = window.location.href;
   if(!sessionStorage.getItem('href')){//將入口地址儲存下來 ios分享會使用
    sessionStorage.setItem('href',href);
   }
  },

在使用存在本地的url去做分享的時候，建議安卓與iOS做判斷，畢竟坑的只是iOS~

var url = 'lms-service/wechat-services/wechat-share-sign';
    var curl = window.location.href;
    if (!KZ.isAndroidOrIos() && KZ.isWeiXin()) {//isAndroidOrIos()安卓true IOS為false
     curl = sessionStorage.getItem('href');
     if(!curl){
      curl = KZ_CONFIG.DOMAIN;
     }
    }

好吧 就這樣 能看到這篇博文的應該都是同路人~希望能夠幫助到你們，還有就是 第一次寫 思緒有點亂 多多包涵哈

補充知識：vue 微信分享及ios二次微信分享invalid signature解決

我就廢話不多說了，大家還是直接看程式碼吧~

npm install weixin-js-sdk

頁面中引入

import wx from 'weixin-js-sdk'

methods: {
	init() {
		var that = this;
		var url = encodeURIComponent(window.location.href.split('#')[0]);
		http.post(api.getSdk,url,function(data){
				let appId = data.appId;
				let timestamp = data.timestamp;
				let signature = data.signature;
				let nonceStr = data.nonceStr;
				that.initwx(appId,timestamp,signature,nonceStr);
		})	
	},initwx(appId,nonceStr) {
		var link = window.location.href;
		var imgUrl = 'https格式的圖片'
		var shareData = {
			"imgUrl": imgUrl,// 分享顯示的縮圖地址,根據自己情況而定
			"link": link,// 分享地址
			"desc": '描述',// 分享描述
			"title": '標題'// 分享標題
		};
		wx.config({
			debug: false,//除錯模式
			appId: appId,// 公眾號的唯一標識
			timestamp: timestamp,//生成簽名的時間戳
			nonceStr: nonceStr,//生成簽名的隨機串
			signature: signature,jsApiList: ['onMenuShareTimeline',//
			'onMenuShareAppMessage'] //
		});
		wx.checkJsApi({
			jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
		});
		wx.ready(function() {
			wx.onMenuShareTimeline(shareData); //分享到朋友圈
			wx.onMenuShareAppMessage(shareData); //分享給朋友
		});
	}
},

created(){
  this.init();
},

備註：ios第二次分享 會出現invalid signature

原因分享後出現微信會在連結會自動加以下字串，再次簽名的時候，因為&特殊字元傳給後臺，後臺未處理，需要對連結encodeURIComponent處理，就不會出現invalid問題

朋友圈 from=timeline&isappinstalled=0

微信群 from=groupmessage&isappinstalled=0

好友分享 from=singlemessage&isappinstalled=0

以上這篇vue單應用在ios系統中實現微信分享功能操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。