vue微信分享的實(shí)現(xiàn)(在當(dāng)前頁(yè)面分享其他頁(yè)面)
首先以分享給朋友為例
1、先看官方文檔
wx.onMenuShareAppMessage({ title: '', // 分享標(biāo)題 desc: '', // 分享描述 link: '', // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致 imgUrl: '', // 分享圖標(biāo) type: '', // 分享類型,music、video或link,不填默認(rèn)為link dataUrl: '', // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空 success: function () { // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) } });
2、vue分享踩的坑
* 1、微信分享中獲取動(dòng)態(tài)的url
* 2、 微信二次分享自動(dòng)添加的參數(shù) form=singlemessage
* 3、vue中各個(gè)頁(yè)面都可以調(diào)用分享
3、直接代碼分析
為了保證每個(gè)頁(yè)面都可以調(diào)起微信分享,需要在vue根組件中,添加 watch監(jiān)聽(tīng)
代碼
watch: { // 監(jiān)聽(tīng) $route 變化調(diào)用分享鏈接 "$route"(to, from) { let currentRouter = this.$router.currentRoute.fullPath; // if(currentRouter.indexOf('userShare') == -1){ //如果不是userShare分享頁(yè)面,則分享另外一個(gè)接口 this.shareOut(); }else{ this.shareOutTwo(); //當(dāng)前頁(yè)面是userShare頁(yè)面時(shí)分享調(diào)用另外一個(gè)接口 } } },
4、shareOut()函數(shù)
let signStr = ''; //sha1加密字符串 let timestamp = 1473254558; //時(shí)間戳 let nonceStr = 'shupao'; var obj = { title:"", //標(biāo)題 desc:"文字描述", //描述 link:"http://www.XXXXXX.com/wx/pub/sr/simpleRegister.do", imgUrl:"http://XXXXXXXXX.com/picactive.jpg" }; this.$ydkAjax({ SENTYPE: "GET", url: this.$domain + '/wx/pub/common/getJsApiTicket.json', //自己服務(wù)器獲取jsapi_ticket接口 params: null, successFc: (response) => { //拼接sha1加密字符串 signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + window.location.href; var signature = SHA1(signStr); wx.config({ debug: false, appId: "wx6957b3a945a05e90", //appId timestamp: timestamp, //時(shí)間戳 nonceStr: nonceStr, //加密需要字符串(自己定義的) signature: signature, //sha1加密后字符串 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage'] }); wx.ready(function () { //分享到朋友圈" wx.onMenuShareTimeline({ title: obj.title, link: obj.link, // 分享鏈接 imgUrl: obj.imgUrl, // 分享圖標(biāo) success: function () { // console.log('分享到朋友圈成功') }, cancel: function () { // console.log('分享到朋友圈失敗') } }); //分享給朋友 wx.onMenuShareAppMessage({ title: obj.title, // 分享標(biāo)題 desc: obj.desc, // 分享描述 link: obj.link, // 分享鏈接 imgUrl: obj.imgUrl, // 分享圖標(biāo) success: function () { // console.log('分享到朋友成功') }, cancel: function () { // console.log('分享到朋友失敗') } }); }) }, isLayer: false })
5、需要注意的事
*1、url是直接通過(guò) window.location.href 獲取的,不是使用 window.location.href.split(“#”)[0]來(lái)獲取, 因?yàn)槲业膙ue項(xiàng)目是通過(guò)hash模式來(lái)進(jìn)行路由跳轉(zhuǎn)的 , 直接使用 window.location.href.split(“#”)[0]會(huì)導(dǎo)致簽名失敗
//拼接sha1加密字符串 signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + window.location.href
*2、而且我們要在當(dāng)前頁(yè)面分享出去之后 , 其他用戶打開(kāi)之后 不是當(dāng)前分享出去的頁(yè)面 ,這就需要 調(diào)整 shareOut()函數(shù)中 obj對(duì)象中的 link參數(shù)為其他頁(yè)面鏈接
6、link參數(shù)
上述 5 問(wèn)題中的加密字符串匯總的 url 和 分享對(duì)象中 link中的頁(yè)面鏈接可以不用保持一樣,因?yàn)楸緛?lái)就是要在當(dāng)前頁(yè)面分享出去其他頁(yè)面的鏈接。網(wǎng)上我看到有人說(shuō)這兩個(gè)必須要保持一樣,其實(shí)沒(méi)有必要, 除非你只是簡(jiǎn)單的在vue項(xiàng)目中的其中一個(gè)頁(yè)面做分享 , 然后只分享當(dāng)前頁(yè)面才需要讓二者保持一致性。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
VUE 實(shí)現(xiàn)一個(gè)簡(jiǎn)易老虎機(jī)的項(xiàng)目實(shí)踐
老虎機(jī)在很多地方都可以見(jiàn)到,可以設(shè)置中獎(jiǎng)位置,以及中獎(jiǎng)回調(diào),本文主要介紹了VUE 實(shí)現(xiàn)一個(gè)簡(jiǎn)易老虎機(jī)的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04基于vue-cli3創(chuàng)建libs庫(kù)的實(shí)現(xiàn)方法
這篇文章主要介紹了基于vue-cli3創(chuàng)建libs庫(kù)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12Vue項(xiàng)目中使用jquery的簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用jquery的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05webpack項(xiàng)目中使用vite加速的兼容模式詳解
這篇文章主要為大家介紹了webpack項(xiàng)目中使用vite加速的兼容模式示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Electron中打包應(yīng)用程序及相關(guān)報(bào)錯(cuò)問(wèn)題的解決
這篇文章主要介紹了Electron中打包應(yīng)用程序及相關(guān)報(bào)錯(cuò)問(wèn)題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03關(guān)于vue自適應(yīng)布局(各種瀏覽器,分辨率)的示例代碼
這篇文章主要介紹了vue自適應(yīng)布局(各種瀏覽器,分辨率),主要使用了flex布局的flex:1屬性和自適應(yīng)的css+vh+百分比這種方式,開(kāi)局設(shè)置overflow:hidden,主體main部分要設(shè)置:overflow:auto,需要的朋友可以參考下2022-09-09