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

剛開(kāi)始做微信分享的這個(gè)功能的時(shí)候，腦補(bǔ)了官方文檔微信JS-SDK說(shuō)明文檔

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

原因

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

解決方案

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

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

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

mounted: function() { this.$nextTick(function() { //vue里面全部加載好了再執(zhí)行的函數(shù) （類(lèi)似于setTimeout） this.myAddressSlots[0].defaultIndex = 0 }); var href = window.location.href; if(!sessionStorage.getItem(’href’)){//將入口地址保存下來(lái) ios分享會(huì)使用 sessionStorage.setItem(’href’,href); } },

在使用存在本地的url去做分享的時(shí)候，建議安卓與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)該都是同路人~希望能夠幫助到你們，還有就是 第一次寫(xiě) 思緒有點(diǎn)亂 多多包涵哈

補(bǔ)充知識(shí)：vue 微信分享及ios二次微信分享invalid signature解決

我就廢話(huà)不多說(shuō)了，大家還是直接看代碼吧~

npm install weixin-js-sdk

頁(yè)面中引入

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,// 公眾號(hào)的唯一標(biāo)識(shí)timestamp: timestamp,//生成簽名的時(shí)間戳nonceStr: nonceStr,//生成簽名的隨機(jī)串signature: signature,jsApiList: [’onMenuShareTimeline’, //’onMenuShareAppMessage’] //});wx.checkJsApi({jsApiList: [’onMenuShareTimeline’, ’onMenuShareAppMessage’]});wx.ready(function() {wx.onMenuShareTimeline(shareData); //分享到朋友圈wx.onMenuShareAppMessage(shareData); //分享給朋友});}},

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

備注：ios第二次分享 會(huì)出現(xiàn)invalid signature

原因分享后出現(xiàn)微信會(huì)在鏈接會(huì)自動(dòng)加以下字符串，再次簽名的時(shí)候，因?yàn)?amp;特殊字符傳給后臺(tái)，后臺(tái)未處理，需要對(duì)鏈接encodeURIComponent處理，就不會(huì)出現(xiàn)invalid問(wèn)題

朋友圈 from=timeline&isappinstalled=0

微信群 from=groupmessage&isappinstalled=0

好友分享 from=singlemessage&isappinstalled=0

以上這篇vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。