Vue項目全局配置微信分享思路詳解
這個項目為移動端項目,主要用于接入公眾號服務(wù)。項目采用兩種登錄方式,微信授權(quán)登錄以及賬號密碼登錄。對于移動端項目而言,為了便于項目擴展以及提供開發(fā)熱更新速度,項目分為不同的模塊,每個模塊是一個單頁面應(yīng)用。頁面分為兩種,一種是需要用戶登錄之后才能瀏覽,另一種是用戶無需登錄即可瀏覽。無論哪一種,均配置微信分享。
使用的技術(shù)
1.使用vue作為框架
2.使用vux作為UI組件庫
全局配置微信分享思路
1.區(qū)分一般和特殊,一般情況,全局配置默認分享文案;特殊情況分兩種,一種是分享內(nèi)容不需要異步獲取,則在路由跳轉(zhuǎn)時配置,另一種是分享內(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, // 分享標題
desc: desc || '默認分享文案', // 分享描述
link: link || window.location.href, // 分享鏈接
imgUrl: imgUrl || '圖標地址(必須是有效的Link)' // 分享圖標
})
Vue.wechat.onMenuShareTimeline({
title: timelineTitle || desc || '默認分享文案', // 分享標題,由于分享到朋友圈沒有desc,所以這里采用的策略是,指定的朋友圈分享標題優(yōu)先,其次采用發(fā)送給朋友的描述,最后采用默認文案。
link: link || window.location.href, // 分享鏈接
imgUrl: imgUrl || '圖標地址(必須是有效的Link)' // 分享圖標
})
})
Vue.wechat.error((res) => {
})
}
// 為Vue的原型對象添加該方法,則所有vue實例都能繼承該方法
Vue.prototype.$wxShare = wxShare
// router/index.js 每個模塊都有自己內(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: '這是首頁,歡迎點擊關(guān)注,blablablablabla~~~',
imgUrl: 'http://frankzhang.me/wp-content/uploads/2017/08/cropped-favicon-01.png'
}
},
]
}
]
// routerRule,公共路由配置,所有模塊共用一個路由控制策略
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)容,達到全局配置和特殊配置結(jié)合的目的。
需要異步獲取的分享內(nèi)容
這種情況,我們采取在vue實例的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>
需要注意的坑點
1.如果項目采用非history模式,則需要去掉url上#后的部分傳給后端換取微信簽名。
2.根據(jù)微信官方說明:
所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調(diào)用(同一個url僅需調(diào)用一次,對于變化url的SPA的web app可在每次url變化時進行調(diào)用...
由于SPA應(yīng)用,url變化之后,需要重新config一次,重新注入當前頁面的配置信息,因此這個步驟必須在router.afterEach中調(diào)用!因為根據(jù)vue-router的說明,在導(dǎo)航被確認之后,再調(diào)用全局的afterEach鉤子,這個時候?qū)Ш揭呀?jīng)確認了,url已經(jīng)改變,可以針對更新后的url重新獲取微信簽名了。
總結(jié)
以上所述是小編給大家介紹的Vue項目全局配置微信分享思路詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)
這篇文章主要為大家介紹了vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟
createApp 是 Vue 3 引入的全局 API,用于創(chuàng)建一個應(yīng)用實例,這篇文章主要介紹了如何使用 Vue 3 的 createApp方法初始化應(yīng)用,通過 createApp 方法,我們從 Vue 3 的基本初始化開始,擴展到插件的應(yīng)用、多個應(yīng)用實例的創(chuàng)建等,需要的朋友可以參考下2024-05-05
Vue3+vite路由配置優(yōu)化(自動化導(dǎo)入)
這篇文章主要介紹了Vue3+vite路由配置優(yōu)化(自動化導(dǎo)入),需要的朋友可以參考下2023-09-09
el-table?fixed固定列導(dǎo)致錯位的解決方法介紹
ElementUI中el-table設(shè)置指定列固定不動,不受滾動條影響,下面這篇文章主要給大家介紹了關(guān)于el-table?fixed固定列導(dǎo)致錯位的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue3+elementui-plus實現(xiàn)無限遞歸菜單示例代碼
這篇文章主要介紹了vue3+elementui-plus實現(xiàn)無限遞歸菜單,當一個組件的 key 值發(fā)生變化時,Vue 會認為這是一個新的組件實例,會強制重新創(chuàng)建和渲染這個組件,本文通過示例代碼詳細講解,需要的朋友可以參考下2024-04-04

