這篇文章給大家介紹了vue項目全局配置微信分享思路講解，使用vue作為框架，使用vux作為ui組件庫，具體內容詳情大家跟隨腳本之家小編一起學習吧
使用的技術
1.使用vue作為框架
2.使用vux作為UI組件庫
全局配置微信分享思路
1.區分一般和特殊，一般情況，全局配置默認分享文案；特殊情況分兩種，一種是分享內容不需要異步獲取，則在路由跳轉時配置，另一種是分享內容需要異步獲取，則需要待異步內容獲取后更新分享內容。
2.不需要異步獲取的內容我們采用定義在路由元信息的方式，直接在每次路由跳轉之后調用公共函數更新分享內容。
具體可以查看微信JSSDK的使用說明
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
// 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，所以這里采用的策略是，指定的朋友圈分享標題優先，其次采用發送給朋友的描述，最后采用默認文案。
link: link || window.location.href,
// 分享鏈接
imgUrl: imgUrl ||
'圖標地址（必須是有效的Link）'
// 分享圖標
})
})
Vue.wechat.error((res) => {
})
}
// 為Vue的原型對象添加該方法，則所有vue實例都能繼承該方法
Vue.prototype.$wxShare = wxShare
// router/index.js 每個模塊都有自己內部的路由配置
// 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:
'這是首頁，歡迎點擊關注，blablablablabla~~~'
,
}
},
]
}
]
// 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)
|
經過上面的配置，router.afterEach都會調用一次wxShare，重新讀取router中的meta的信息重新定義微信分享內容，達到全局配置和特殊配置結合的目的。
需要異步獲取的分享內容
這種情況，我們采取在vue實例的created鈎子中，在獲取數據的成功回調中調用一次wxShare即可
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 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.根據微信官方說明：
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用...
由於SPA應用，url變化之后，需要重新config一次，重新注入當前頁面的配置信息，因此這個步驟必須在router.afterEach中調用！因為根據vue-router的說明，在導航被確認之后，再調用全局的afterEach鈎子，這個時候導航已經確認了，url已經改變，可以針對更新后的url重新獲取微信簽名了。
總結
以上所述是小編給大家介紹的Vue項目全局配置微信分享思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
【備注】轉載作者 ：FrankCheung