如何使用vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例
這篇文章主要介紹如何使用vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
發(fā)展壯大離不開(kāi)廣大客戶長(zhǎng)期以來(lái)的信賴與支持，我們將始終秉承“誠(chéng)信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠(chéng)服務(wù)每家企業(yè)，認(rèn)真做好每個(gè)細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及純水機(jī)等，在網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷推廣、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開(kāi)發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。
微信二次分享／自定義分享
從App中使用App分享（一次分享）
使用微信導(dǎo)航欄的分享（二次分享） －－已做處理
使用微信導(dǎo)航欄的分享（二次分享） －－未做處理
如上圖，如果不做相關(guān)處理，頁(yè)面進(jìn)行二次分享，用戶看到的就是鏈接＋空?qǐng)D，上面顯示的文案（考拉閱讀）實(shí)際上是獲取的title標(biāo)簽中的文案，我在網(wǎng)上查的相關(guān)例子有說(shuō)明，圖片如果不設(shè)置，將會(huì)自動(dòng)獲取瀏覽器渲染的第一張圖片，經(jīng)過(guò)個(gè)人測(cè)試，并沒(méi)有實(shí)現(xiàn)（朋友圈同理，不做圖片展示）。
微信js-sdk說(shuō)明文檔
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”。（一般后端配置）
前端需要調(diào)取后端的接口，獲取微信的congfig所需要的參數(shù)
wx.config({
debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填，生成簽名的時(shí)間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表
});jsApiList里面需要填寫(xiě)你調(diào)用的jsApi，updateAppMessageShareData（分享微信，QQ），updateTimelineShareData（微信朋友圈，QQ空間），onMenuShareTimeline／onMenuShareAppMessage／onMenuShareQQ 這三個(gè)即將廢棄，不建議使用。
但是在本次開(kāi)發(fā)中，我只使用了updateAppMessageShareData，updateTimelineShareData，個(gè)別Android（微信版本7.0.3）分享出來(lái)的還是沒(méi)有圖片和文案，ios的是沒(méi)有問(wèn)題，所以又加上了棄用的onMenuShareTimeline，onMenuShareAppMessage之后，安卓機(jī)也可以正常分享。
判斷當(dāng)前客戶端版本是否支持指定JS接口
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要檢測(cè)的JS接口列表，所有JS接口列表見(jiàn)附錄2,
success: function(res) {
// 以鍵值對(duì)的形式返回，可用的api值true，不可用為false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});wx.config中的 debug 設(shè)為true，在微信測(cè)試時(shí)會(huì)自動(dòng)彈出相關(guān)信息，在微信開(kāi)發(fā)者工具中也會(huì)打印出流程（分為begin，end）,如下圖
1、通過(guò)ready接口處理成功驗(yàn)證
2、在ready接口中調(diào)取updateAppMessageShareData，updateTimelineShareData方法
wx.ready(function () { //需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用
wx.updateAppMessageShareData({
title: '', // 分享標(biāo)題
desc: '', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: '', // 分享圖標(biāo)
success: function () {
// 設(shè)置成功
}
})
});在vue的開(kāi)發(fā)項(xiàng)目中，可在created或mounted生命周期中調(diào)用
3、通過(guò)error接口處理失敗驗(yàn)證
wx.error(function(res){
// config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
});需要注意的點(diǎn)
通過(guò)后端的接口獲取微信配置的參數(shù)時(shí)，需要傳遞當(dāng)前頁(yè)面url
- url（當(dāng)前網(wǎng)頁(yè)的URL，不包含#及其后面部分），如果沒(méi)有＃，則需要傳遞完整的url
- url需要編碼 encodeURIComponent(url)
代碼如下
// wetchat.js －－ 個(gè)人封裝
import wx from 'weixin-js-sdk'; // 引入wxJS
import apiUrl from "@/api/index"; // 本項(xiàng)目的api （根據(jù)自己項(xiàng)目）
export function wxChatShare(param) {
let _url = encodeURIComponent(param.url) // 當(dāng)前頁(yè)面的url
apiUrl.wechatConfig(_url) // wechatConfig是獲取微信配置相關(guān)信息的接口，此處根據(jù)個(gè)人項(xiàng)目寫(xiě)法而定，類似于this.$ajax
.then (res => {
if(res.data.code==200) {
// 接口返回配置信息
wx.config({
debug: false,
appId: res.data.content.appid,
timestamp: res.data.content.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: res.data.content.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: res.data.content.signature, // 必填，簽名
jsApiList: [ // 用的方法都要加進(jìn)來(lái)
'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage'
]
});
wx.ready(function () {
//分享到朋友圈
wx.updateTimelineShareData({
title: param.title, // 分享標(biāo)題
link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: param.imgUrl, // 分享圖標(biāo)
success: function () {
// 設(shè)置成功
console.log("分享到朋友圈成功返回的信息為:", res);
this.$Message.message("設(shè)置成功!");
}
})
wx.onMenuShareTimeline({
title: param.title, // 分享標(biāo)題
link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: param.imgUrl, // 分享圖標(biāo)
success: function () {
// 用戶點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
},
})
//分享給朋友
wx.updateAppMessageShareData({
title: param.title, // 分享標(biāo)題
desc: param.desc, // 分享描述
link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: param.imgUrl, // 分享圖標(biāo)
success: function () {
// 設(shè)置成功
console.log("分享到朋友圈成功返回的信息為:", res);
this.$Message.message("設(shè)置成功!");
}
})
wx.onMenuShareAppMessage({
title: param.title, // 分享標(biāo)題
desc: param.desc, // 分享描述
link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: param.imgUrl, // 分享圖標(biāo)
type: param.type, // 分享類型,music、video或link，不填默認(rèn)為link
dataUrl: param.dataUrl, // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
success: function () {
// 用戶點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
}
});
});
wx.error(function (res) {
console.log('驗(yàn)證失敗返回的信息:', res);
});
} else {
console.log(res.data.message);
}
})
}// home.vue
import * as wechatJS from '@/utils/wechat' // 引入wechat.js
// 寫(xiě)在方法中調(diào)用，或者在生命周期中調(diào)用
let _param = {
studentId: 1, // 個(gè)人項(xiàng)目而定
activityId: 1, // 個(gè)人項(xiàng)目而定
url: window.location.href, // 當(dāng)前頁(yè)面url
title: "為我點(diǎn)贊，一起免費(fèi)搶考拉閱讀VIP會(huì)員卡，暢讀一萬(wàn)本好書(shū)～", // 分享數(shù)據(jù)配置
desc: "孩子要讀書(shū)，上考拉閱讀", // 分享數(shù)據(jù)配置
link: _nowUrl, // 分享數(shù)據(jù)配置
imgUrl: url, // 分享數(shù)據(jù)配置 －－ 全路徑
type: "link", // 分享類型,music、video或link，不填默認(rèn)為link
dataUrl: " ", // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空以上是“如何使用vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前標(biāo)題：如何使用vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例
新聞來(lái)源：http://m.jiaotiyi.com/article/pihggh.html