So realisieren Sie die globale WeChat-Freigabekonfiguration des Vue-Projekts

Dieses Mal zeige ich Ihnen, wie Sie die WeChat-Freigabe der globalen Konfiguration des Vue-Projekts implementieren und welche Vorsichtsmaßnahmen es gibt, um die globale Konfiguration des Vue-Projekts über die WeChat-Freigabe zu implementieren Ein praktischer Fall, werfen wir einen Blick darauf.

Bei diesem Projekt handelt es sich um 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 die Geschwindigkeit von Hot-Updates für die Entwicklung zu gewährleisten. Jedes Modul ist eine einseitige Anwendung. Es gibt zwei Arten von Seiten: Eine erfordert, dass sich Benutzer anmelden, bevor sie durchsucht werden können, und die andere ermöglicht Benutzern das Durchsuchen, ohne sich anzumelden. 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 allgemeinen und speziellen Fällen. Der erste ist, dass der geteilte Inhalt nicht global konfiguriert werden muss asynchron erhalten, dann im RoutingKonfigurieren Sie beim Springen. Das andere ist, 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-Historienmodus ü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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Achtung, weitere verwandte Artikel auf der chinesischen PHP-Website! 🎜>

So verwenden Sie Koa in Node.js, um die JWT-Benutzerauthentifizierung zu implementieren

Das obige ist der detaillierte Inhalt vonSo realisieren Sie die globale WeChat-Freigabekonfiguration des Vue-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!