本文實(shí)例為大家分享了vue微信分享展示的具體代碼，供大家參考，具體內(nèi)容如下
在成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)過(guò)程中，需要針對(duì)客戶(hù)的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。創(chuàng)新互聯(lián)還需要根據(jù)客戶(hù)的需求進(jìn)行功能模塊的開(kāi)發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶(hù)權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。
首先以分享給朋友為例
1、先看官方文檔
重慶分公司
重慶分公司
wx.onMenuShareAppMessage({
title: '', // 分享標(biāo)題
desc: '', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: '', // 分享圖標(biāo)
type: '', // 分享類(lèi)型,music、video或link，不填默認(rèn)為link
dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
success: function () {
// 用戶(hù)確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel: function () {
// 用戶(hù)取消分享后執(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:"/upload/otherpic54/58310.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è)面分享出去之后 , 其他用戶(hù)打開(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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
