這篇文章主要介紹了Vue項(xiàng)目全局配置微信分享的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)公司堅(jiān)信:善待客戶,將會成為終身客戶。我們能堅(jiān)持多年,是因?yàn)槲覀円恢笨芍档眯刨?。我們從不忽悠初訪客戶,我們用心做好本職工作,不忘初心,方得始終。10多年網(wǎng)站建設(shè)經(jīng)驗(yàn)成都創(chuàng)新互聯(lián)公司是成都老牌網(wǎng)站營銷服務(wù)商,為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、H5建站、網(wǎng)站制作、高端網(wǎng)站設(shè)計(jì)、重慶小程序開發(fā)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。
使用的技術(shù)
1.使用vue作為框架
2.使用vux作為UI組件庫
全局配置微信分享思路
1.區(qū)分一般和特殊,一般情況,全局配置默認(rèn)分享文案;特殊情況分兩種,一種是分享內(nèi)容不需要異步獲取,則在路由跳轉(zhuǎn)時(shí)配置,另一種是分享內(nèi)容需要異步獲取,則需要待異步內(nèi)容獲取后更新分享內(nèi)容。
2.不需要異步獲取的內(nèi)容我們采用定義在路由元信息的方式,直接在每次路由跳轉(zhuǎn)之后調(diào)用公共函數(shù)更新分享內(nèi)容。
具體可以查看微信JSSDK的使用說明
// wxShare.js import Vue from 'vue' // 在組件外使用vux集成的微信jssdk import { WechatPlugin, AjaxPlugin } from 'vux' Vue.use(WechatPlugin) Vue.use(AjaxPlugin) export default function wxShare ({title, desc, timelineTitle, link, imgUrl} = {}) { Vue.wechat.config({ debug: false, appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] }) Vue.wechat.ready(() => { Vue.wechat.onMenuShareAppMessage({ title: title, // 分享標(biāo)題 desc: desc || '默認(rèn)分享文案', // 分享描述 link: link || window.location.href, // 分享鏈接 imgUrl: imgUrl || '圖標(biāo)地址(必須是有效的Link)' // 分享圖標(biāo) }) Vue.wechat.onMenuShareTimeline({ title: timelineTitle || desc || '默認(rèn)分享文案', // 分享標(biāo)題,由于分享到朋友圈沒有desc,所以這里采用的策略是,指定的朋友圈分享標(biāo)題優(yōu)先,其次采用發(fā)送給朋友的描述,最后采用默認(rèn)文案。 link: link || window.location.href, // 分享鏈接 imgUrl: imgUrl || '圖標(biāo)地址(必須是有效的Link)' // 分享圖標(biāo) }) }) Vue.wechat.error((res) => { }) } // 為Vue的原型對象添加該方法,則所有vue實(shí)例都能繼承該方法 Vue.prototype.$wxShare = wxShare // router/index.js 每個(gè)模塊都有自己內(nèi)部的路由配置 // codes... const routes = [ { path: '/index', name: 'index', redirect: '/index/homepage', children: [ { path: '/index/homepage', name: 'homepage', component: homepage meta: { title: '這是主頁', shareDesc: '這是本站的主頁', desc: 'homepage, click and see!', timelineTitle: '這是首頁,歡迎點(diǎn)擊關(guān)注,blablablablabla~~~', imgUrl: 'http://frankzhang.me/wp-content/uploads/2017/08/cropped-favicon-01.png' } }, ] } ] // routerRule,公共路由配置,所有模塊共用一個(gè)路由控制策略 import wxShare from '@/utils/wxShare' export default function routerRule (router) { // other codes... router.afterEach(( to, from ) => { wxShare({ title: to.meta.title, desc: to.meta.shareDesc, link: to.meta.shareLink, logo: to.meta.shareLogo}) }) } // main.js import routerRule from ... routerRule(router)
經(jīng)過上面的配置,router.afterEach都會調(diào)用一次wxShare,重新讀取router中的meta的信息重新定義微信分享內(nèi)容,達(dá)到全局配置和特殊配置結(jié)合的目的。
需要異步獲取的分享內(nèi)容
這種情況,我們采取在vue實(shí)例的created鉤子中,在獲取數(shù)據(jù)的成功回調(diào)中調(diào)用一次wxShare即可
// homepage.vue <script> export default { data() { return { } }, created() { getHomepageInfo() .then( res => { this.$wxShare({ title: res.title, desc: res.desc, imgUrl: res.logo }) } ) } } </script>
需要注意的坑點(diǎn)
1.如果項(xiàng)目采用非history模式,則需要去掉url上#后的部分傳給后端換取微信簽名。
2.根據(jù)微信官方說明:
所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調(diào)用(同一個(gè)url僅需調(diào)用一次,對于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用...
由于SPA應(yīng)用,url變化之后,需要重新config一次,重新注入當(dāng)前頁面的配置信息,因此這個(gè)步驟必須在router.afterEach中調(diào)用!因?yàn)楦鶕?jù)vue-router的說明,在導(dǎo)航被確認(rèn)之后,再調(diào)用全局的afterEach鉤子,這個(gè)時(shí)候?qū)Ш揭呀?jīng)確認(rèn)了,url已經(jīng)改變,可以針對更新后的url重新獲取微信簽名了。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Vue項(xiàng)目全局配置微信分享的示例分析”這篇文章對大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
分享標(biāo)題:Vue項(xiàng)目全局配置微信分享的示例分析
網(wǎng)站路徑:http://muchs.cn/article14/jojide.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、定制網(wǎng)站、定制開發(fā)、移動網(wǎng)站建設(shè)、建站公司、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容