您好,登錄后才能下訂單哦!
最近又把vue的demo拿出來整理下,正好要做“微信分享”功能,于是遇到新的問題;
由于hash模式下,帶有“#”,導(dǎo)致微信分享的簽證無效;當(dāng)改成history的模式后,分享ok;
但是問題來了,history模式下相當(dāng)操蛋:
對于上面的問題,我是直接不能忍啊,所以history模式是肯定不行的;我決定依舊用hash模式;history模式萬萬要不得
那么問題來了:怎么在hash模式下實(shí)現(xiàn)微信分享?
其實(shí)微信分享失敗的問題,最重要的一步就是解決“#”的問題;
一般的頁面,我們獲取當(dāng)前的url是醬紫操作的
let params = '¶ms=' + JSON.stringify({url: window.location.href});
SPA頁面,我們需要做點(diǎn)小調(diào)整,調(diào)整的目的是讓“#”say goodbye
let params = '¶ms=' + JSON.stringify({url: encodeURIComponent(window.location.href.split('#')[0])});
這樣修改后,簽名的url中沒帶“#”,這樣就ok了,下面貼上完成的代碼
<script> // 微信分享 import configModel from "../models/config.model"; import elementService from "../services/element.service"; class ShareService{ wxShare(succCb, cancelCb, errorCb){ let baseUrl = 'http://q.letwx.com/api/jsapi?action=jscfg'; let samekey = '&uid=' + configModel.uid + '&wxapiopenid=' + configModel.apiopenid + '&wxapitoken=' + configModel.apitoken + '&debug=nf'; let params = '¶ms=' + JSON.stringify({url: encodeURIComponent(window.location.href.split('#')[0])}); // 這里是關(guān)鍵 let url = baseUrl + params + samekey; $.post(url, data => { elementService.loadingHide(); console.log(data); switch (data.error) { case 0: this.wxConfig(data.cfg, configModel.shareInfo, succCb, cancelCb, errorCb); break; default: elementService.message(data.error_msg, 'error'); break; } }, 'json'); } wxConfig(wxconfig, share, succCb, cancelCb, errorCb){ wx.config({ debug: false, appId: wxconfig.appId, timestamp: wxconfig.timestamp, nonceStr: wxconfig.nonceStr, signature: wxconfig.signature, jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo' ] }); wx.ready(function() { wx.onMenuShareAppMessage({ //朋友 title: share.title, desc: share.desc, link: share.link, imgUrl: share.imgUrl, success: function() { succCb && succCb(); }, cancel: function() { cancelCb && cancelCb(); } }); wx.onMenuShareTimeline({ //朋友圈 title: share.desc, link: share.link, imgUrl: share.imgUrl, success: function() { succCb && succCb(); }, cancel: function() { cancelCb && cancelCb(); } }); wx.onMenuShareQQ({ //QQ title: share.title, desc: share.desc, link: share.link, imgUrl: share.imgUrl, success: function() { succCb && succCb(); }, cancel: function() { cancelCb && cancelCb(); } }); wx.onMenuShareWeibo({ //QQ title: share.title, desc: share.desc, link: share.link, imgUrl: share.imgUrl, success: function() { succCb && succCb(); }, cancel: function() { cancelCb && cancelCb(); } }); }); wx.error(function(res) { console.log(res); errorCb && errorCb(JSON.stringify(res)); }); } } let shareSerivice = new ShareService(); export default shareSerivice; </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。