快捷導(dǎo)航

vue單應(yīng)用在ios系統(tǒng)中實現(xiàn)微信分享功能操作

更新時間：2020年09月07日 10:21:56 作者：Fiona Fang

這篇文章主要介紹了vue單應(yīng)用在ios系統(tǒng)中實現(xiàn)微信分享功能操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

表示是第一次使用vue做單應(yīng)用顯目，也是在逐漸的摸索中~更是各種踩坑，各種填坑，打算寫博客么？是因為不想寫筆記了，嗯嗯就是這么簡單進(jìn)入正題。

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

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

原因

單頁面應(yīng)用通過什么入口進(jìn)去的 url保持不變比如說入口是./index 后面不管頁面怎么跳轉(zhuǎn) 地址欄的地址都保持./index不變這就導(dǎo)致微信分享的時候地址欄的地址與當(dāng)前頁面的url不匹配獲取簽名失敗所以分享就失敗了~

解決方案

可以使用window.location.href去跳轉(zhuǎn)，而不使用路由跳轉(zhuǎn)，這樣可以使地址欄的地址與當(dāng)前頁的地址一樣，可以分享成功（適合分享的頁面不多的情況下）

把入口地址保存在本地，等需要獲取簽名的時候取出來（有效~強(qiáng)推?。。。?/p>

注意：sessionStorage.setItem(‘href',href); 只在剛進(jìn)入單應(yīng)用的時候保存！

mounted: function() {
   this.$nextTick(function() { //vue里面全部加載好了再執(zhí)行的函數(shù) （類似于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;
     }
    }

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

補(bǔ)充知識：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, timestamp, signature, nonceStr) {
		var link = window.location.href;
		var imgUrl = 'https格式的圖片'
		var shareData = {
			"imgUrl": imgUrl,// 分享顯示的縮略圖地址 ,根據(jù)自己情況而定
			"link": link,// 分享地址
			"desc": '描述',// 分享描述
			"title": '標(biāo)題'// 分享標(biāo)題
		};
		wx.config({
			debug: false,//調(diào)試模式
			appId: appId,// 公眾號的唯一標(biāo)識
			timestamp: timestamp,//生成簽名的時間戳
			nonceStr: nonceStr,//生成簽名的隨機(jī)串
			signature: signature,
			jsApiList: ['onMenuShareTimeline', //
			'onMenuShareAppMessage'] //
		});
		wx.checkJsApi({
			jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
		});
		wx.ready(function() {
			wx.onMenuShareTimeline(shareData); //分享到朋友圈
			wx.onMenuShareAppMessage(shareData); //分享給朋友
		});
	}
},