這次帶給大家Vue專案全域設定微信分享步驟說明，Vue專案全域設定微信分享的注意事項有哪些，以下就是實戰案例，一起來看一下。
這個項目為行動裝置項目，主要用於接取公眾號服務。項目採兩種登入方式，微信授權登入以及帳號密碼登入。對於行動端專案而言，為了方便專案擴充以及提供開發熱更新速度，專案分為不同的模組，每個模組是單一頁面應用程式。頁面分為兩種，一種是需要用戶登入之後才能瀏覽，另一種是用戶無需登入即可瀏覽。無論哪一種，均配置微信分享。
使用的技術
1.使用vue作為框架
2.使用vux作為UI元件庫
全域配置微信分享想法
1.區分一般和特殊，一般情況，全域設定預設分享文案；特殊情況分兩種，一種是分享內容不需要非同步獲取，則在路由跳轉時配置，另一種是分享內容需要非同步獲取，則需要待非同步內容獲取後更新分享內容。
2.不需要非同步取得的內容我們採用定義在路由元資訊的方式，直接在每次路由跳轉之後呼叫公共函數更新分享內容。
具體可以查看微信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，所以这里采用的策略是，指定的朋友圈分享标题优先，其次采用发送给朋友的描述，最后采用默认文案。
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~~~',
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)經過上面的配置，router.afterEach都會呼叫一次wxShare，重新讀取router中的meta的資訊重新定義微信分享內容，達到全域配置和特殊配置結合的目的。
需要非同步取得的分享內容
這種情況，我們採取在vue實例的created鉤子中，在取得資料的成功回呼中呼叫一次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.根據微信官方說明：
所有需要使用JS-SDK的頁面必須先註入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用...
由於SPA應用，url變化之後，需要重新config一次，重新註入當前頁面的配置信息，因此這個步驟必須在router. afterEach中調用！
#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！種方式總結以上是Vue專案全域設定微信分享步驟說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！
