亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue項(xiàng)目全局配置微信分享思路詳解

 更新時(shí)間:2018年05月04日 14:26:40   作者:FrankCheung  
這篇文章給大家介紹了vue項(xiàng)目全局配置微信分享思路講解,使用vue作為框架,使用vux作為ui組件庫(kù),具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧

這個(gè)項(xiàng)目為移動(dòng)端項(xiàng)目,主要用于接入公眾號(hào)服務(wù)。項(xiàng)目采用兩種登錄方式,微信授權(quán)登錄以及賬號(hào)密碼登錄。對(duì)于移動(dòng)端項(xiàng)目而言,為了便于項(xiàng)目擴(kuò)展以及提供開(kāi)發(fā)熱更新速度,項(xiàng)目分為不同的模塊,每個(gè)模塊是一個(gè)單頁(yè)面應(yīng)用。頁(yè)面分為兩種,一種是需要用戶登錄之后才能瀏覽,另一種是用戶無(wú)需登錄即可瀏覽。無(wú)論哪一種,均配置微信分享。

使用的技術(shù)

1.使用vue作為框架
2.使用vux作為UI組件庫(kù)

全局配置微信分享思路

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的使用說(shuō)明

// 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)題,由于分享到朋友圈沒(méi)有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的原型對(duì)象添加該方法,則所有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: '這是主頁(yè)', 
        shareDesc: '這是本站的主頁(yè)', 
        desc: 'homepage, click and see!',
        timelineTitle: '這是首頁(yè),歡迎點(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)過(guò)上面的配置,router.afterEach都會(huì)調(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ù)微信官方說(shuō)明:

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息,否則將無(wú)法調(diào)用(同一個(gè)url僅需調(diào)用一次,對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用...

由于SPA應(yīng)用,url變化之后,需要重新config一次,重新注入當(dāng)前頁(yè)面的配置信息,因此這個(gè)步驟必須在router.afterEach中調(diào)用!因?yàn)楦鶕?jù)vue-router的說(shuō)明,在導(dǎo)航被確認(rèn)之后,再調(diào)用全局的afterEach鉤子,這個(gè)時(shí)候?qū)Ш揭呀?jīng)確認(rèn)了,url已經(jīng)改變,可以針對(duì)更新后的url重新獲取微信簽名了。

總結(jié)

以上所述是小編給大家介紹的Vue項(xiàng)目全局配置微信分享思路詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue.Draggable拖拽功能的配置使用方法

    Vue.Draggable拖拽功能的配置使用方法

    這篇文章主要為大家詳細(xì)介紹了Vue.Draggable拖拽功能配置使用的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)案例

    Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)案例

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)

    vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)

    這篇文章主要為大家介紹了vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • Vue 監(jiān)聽(tīng)元素前后變化值實(shí)例

    Vue 監(jiān)聽(tīng)元素前后變化值實(shí)例

    這篇文章主要介紹了Vue 監(jiān)聽(tīng)元素前后變化值實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • 使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟

    使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟

    createApp 是 Vue 3 引入的全局 API,用于創(chuàng)建一個(gè)應(yīng)用實(shí)例,這篇文章主要介紹了如何使用 Vue 3 的 createApp方法初始化應(yīng)用,通過(guò) createApp 方法,我們從 Vue 3 的基本初始化開(kāi)始,擴(kuò)展到插件的應(yīng)用、多個(gè)應(yīng)用實(shí)例的創(chuàng)建等,需要的朋友可以參考下
    2024-05-05
  • Vue3+vite路由配置優(yōu)化(自動(dòng)化導(dǎo)入)

    Vue3+vite路由配置優(yōu)化(自動(dòng)化導(dǎo)入)

    這篇文章主要介紹了Vue3+vite路由配置優(yōu)化(自動(dòng)化導(dǎo)入),需要的朋友可以參考下
    2023-09-09
  • el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法介紹

    el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法介紹

    ElementUI中el-table設(shè)置指定列固定不動(dòng),不受滾動(dòng)條影響,下面這篇文章主要給大家介紹了關(guān)于el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • Vue2實(shí)現(xiàn)組件延遲加載的示例代碼

    Vue2實(shí)現(xiàn)組件延遲加載的示例代碼

    當(dāng)一個(gè)頁(yè)面需要加載較多個(gè)組件時(shí),并且組件自身又比較復(fù)雜,如果一次性加載,可能等待時(shí)間較長(zhǎng),體驗(yàn)不好,這個(gè)時(shí)候就需要延遲加載了,本文為大家介紹了Vue2實(shí)現(xiàn)組件延遲加載的示例代碼,需要的可以參考下
    2024-01-01
  • vue3+elementui-plus實(shí)現(xiàn)無(wú)限遞歸菜單示例代碼

    vue3+elementui-plus實(shí)現(xiàn)無(wú)限遞歸菜單示例代碼

    這篇文章主要介紹了vue3+elementui-plus實(shí)現(xiàn)無(wú)限遞歸菜單,當(dāng)一個(gè)組件的 key 值發(fā)生變化時(shí),Vue 會(huì)認(rèn)為這是一個(gè)新的組件實(shí)例,會(huì)強(qiáng)制重新創(chuàng)建和渲染這個(gè)組件,本文通過(guò)示例代碼詳細(xì)講解,需要的朋友可以參考下
    2024-04-04
  • vue?css?相對(duì)路徑導(dǎo)入問(wèn)題級(jí)踩坑記錄

    vue?css?相對(duì)路徑導(dǎo)入問(wèn)題級(jí)踩坑記錄

    這篇文章主要介紹了vue?css?相對(duì)路徑導(dǎo)入問(wèn)題級(jí)踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06

最新評(píng)論