這篇文章主要介紹了關於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中調用!
#相關推薦:
以上是Vue專案全域設定微信分享思路的詳細內容。更多資訊請關注PHP中文網其他相關文章!