vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例
微信二次分享/自定義分享
從App中使用App分享(一次分享)
使用微信導(dǎo)航欄的分享(二次分享) --已做處理
使用微信導(dǎo)航欄的分享(二次分享) --未做處理
如上圖,如果不做相關(guān)處理,頁(yè)面進(jìn)行二次分享,用戶(hù)看到的就是鏈接+空?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)(朋友圈同理,不做圖片展示)。
先登錄微信公眾平臺(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ì)在客戶(hù)端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)前客戶(hù)端版本是否支持指定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 () { //需在用戶(hù)可能點(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ě)法而定,類(lèi)似于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 () { // 用戶(hù)點(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, // 分享類(lèi)型,music、video或link,不填默認(rèn)為link dataUrl: param.dataUrl, // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空 success: function () { // 用戶(hù)點(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", // 分享類(lèi)型,music、video或link,不填默認(rèn)為link dataUrl: " ", // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目(新手入門(mén))
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue3之使用js實(shí)現(xiàn)動(dòng)畫(huà)示例解析
這篇文章主要為大家介紹了Vue3之使用js實(shí)現(xiàn)動(dòng)畫(huà)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))
這篇文章主要介紹了Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10Vue3導(dǎo)航欄組件封裝實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Vue3導(dǎo)航欄組件封裝的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤(pán)抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤(pán)抽獎(jiǎng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue中el-input綁定鍵盤(pán)按鍵(按鍵修飾符)
這篇文章主要介紹了vue中el-input綁定鍵盤(pán)按鍵(按鍵修飾符),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07