Globale Konfiguration des Vue-Projekts WeChat Austausch von Ideen

Dieser Artikel stellt hauptsächlich die detaillierten WeChat-Austauschideen zur globalen Konfiguration des Vue-Projekts vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen Freunden teilen, die ihn benötigen.

Dieses Projekt ist Ein mobiles Projekt, das hauptsächlich für den Zugriff auf öffentliche Kontodienste verwendet wird. Das Projekt verwendet zwei Anmeldemethoden: die autorisierte WeChat-Anmeldung und die Konto- und Passwort-Anmeldung. Bei mobilen Projekten ist das Projekt in verschiedene Module unterteilt, um die Projekterweiterung zu erleichtern und eine schnelle Aktualisierungsgeschwindigkeit für die Entwicklung bereitzustellen. Jedes Modul ist eine einseitige Anwendung. Es gibt zwei Arten von Seiten: eine, bei der sich Benutzer anmelden müssen, bevor sie browsen können, und eine andere, bei der Benutzer ohne Anmeldung browsen können. Unabhängig davon, welches verwendet wird, ist die WeChat-Freigabe konfiguriert.

Verwendete Technologie

1. Verwenden Sie vue als Framework
2. Verwenden Sie vux als UI-Komponentenbibliothek

Globale Konfiguration von WeChat-Sharing-Ideen

1. Unterscheiden Sie zwischen allgemeiner und spezieller Form. Es gibt zwei Sonderfälle: Der geteilte Inhalt muss nicht abgerufen werden asynchron und wird beim Routensprung konfiguriert. Der andere besteht darin, dass der freigegebene Inhalt asynchron abgerufen werden muss und der freigegebene Inhalt aktualisiert werden muss, nachdem der asynchrone Inhalt abgerufen wurde.

2. Für Inhalte, die nicht asynchron abgerufen werden müssen, verwenden wir die in den Routing-Metainformationen definierte Methode und rufen nach jedem Routensprung direkt die öffentliche Funktion auf, um den freigegebenen Inhalt zu aktualisieren.

Einzelheiten finden Sie in den Anweisungen zur Verwendung von WeChat 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)

Nach der obigen Konfiguration ruft router.afterEach einmal wxShare auf, liest die Metainformationen im Router erneut und definiert sie neu Die WeChat-Freigabe von Inhalten soll erreicht werden Der Zweck besteht darin, globale Konfiguration und spezielle Konfiguration zu kombinieren.

Geteilter Inhalt, der asynchron abgerufen werden muss

In diesem Fall können wir den erstellten Hook der Vue-Instanz verwenden und wxShare im erfolgreichen Rückruf des Abrufs einmal aufrufen die Daten.

// homepage.vue
<script>
export default {
  data() {
    return {
    }
  },
  created() {
    getHomepageInfo()
      .then( res => {
        this.$wxShare({
          title: res.title,
          desc: res.desc,
          imgUrl: res.logo
        })
      } )
  }
}
</script>

Zu beachtende Punkte

1 Wenn das Projekt den Nicht-Verlaufsmodus übernimmt, müssen Sie den Teil nach # in der URL entfernen und übergeben an das Backend im Austausch gegen eine WeChat-Signatur.

2. Gemäß den offiziellen Anweisungen von WeChat:

Alle Seiten, die JS-SDK verwenden müssen, müssen zuerst Konfigurationsinformationen einfügen, andernfalls werden sie nicht aufgerufen (es muss nur dieselbe URL aufgerufen werden). einmalig, für Änderungen in der URL Die SPA-Web-App kann jedes Mal aufgerufen werden, wenn sich die URL ändert...

Aufgrund der SPA-Anwendung muss diese nach der URL-Änderung erneut neu konfiguriert werden und die Konfigurationsinformationen von Die aktuelle Seite wird erneut eingefügt, daher muss dieser Schritt auf dem Router ausgeführt werden. Rufen Sie afterEach auf, da gemäß den Anweisungen von vue-router der globale AfterEach-Hook aufgerufen wird wurde bestätigt und die URL wurde geändert. Die WeChat-Signatur kann für die aktualisierte URL erneut abgerufen werden:

Das obige ist der detaillierte Inhalt vonGlobale Konfiguration des Vue-Projekts WeChat Austausch von Ideen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!