Comment réaliser la configuration globale du projet Vue, partage WeChat

Cette fois, je vais vous montrer comment implémenter le partage WeChat de la configuration globale du projet Vue, et quelles sont les précautions pour implémenter la configuration globale du projet Vue via le partage WeChat. un cas pratique, jetons un coup d'oeil.

Ce projet est un projet mobile, principalement utilisé pour accéder aux services des comptes publics. Le projet utilise deux méthodes de connexion, la connexion autorisée par WeChat et la connexion par compte et mot de passe. Pour les projets mobiles, afin de faciliter l'expansion du projet et d'assurer une vitesse de mise à jour rapide du développement, le projet est divisé en différents modules, chaque module est une application d'une seule page. Il existe deux types de pages, l'une nécessite les utilisateurs de se connecter avant de pouvoir les parcourir, et l'autre permet aux utilisateurs de naviguer sans se connecter. Quel que soit celui utilisé, le partage WeChat est configuré.

Technologie utilisée

1. Utilisez vue comme framework
2 Utilisez vux comme bibliothèque de composants d'interface utilisateur

Configuration globale. des idées de partage WeChat

1. Distinguer entre général et spécial. Dans les cas généraux, la copie de partage par défaut est configurée globalement. Le premier est que le contenu partagé n'a pas besoin de l'être. obtenu de manière asynchrone, puis dans routageConfigurer lors du saut. L'autre est que le contenu partagé doit être obtenu de manière asynchrone et que le contenu partagé doit être mis à jour après l'obtention du contenu asynchrone.

2. Pour le contenu qui n'a pas besoin d'être obtenu de manière asynchrone, nous utilisons la méthode définie dans les méta-informations de routage et appelons directement la fonction publique pour mettre à jour le contenu partagé après chaque saut de route.

Pour plus de détails, veuillez consulter les instructions d'utilisation de 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)

Après la configuration ci-dessus, router.afterEach appellera wxShare une fois, relira les méta-informations dans le routeur et redéfinir le contenu de partage WeChat, pour atteindre l'objectif de combiner configuration globale et configuration spéciale.

Contenu partagé qui doit être obtenu de manière asynchrone

Dans ce cas, nous pouvons utiliser le hook créé de l'instance vue et appeler wxShare une fois dans le rappel réussi d'obtention les données.

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

Points à noter

1 Si le projet adopte le mode non-historique, vous devez supprimer la partie après # sur l'URL et. transmettez-le au backend en échange du signe WeChat.

2. Selon les instructions officielles de WeChat :

Toutes les pages qui doivent utiliser JS-SDK doivent d'abord injecter des informations de configuration, sinon elles ne seront pas appelées (la même URL doit seulement être appelée une fois, pour les changements d'url L'application Web SPA peut être appelée à chaque fois que l'url change...

En raison de l'application SPA, après le changement d'url, elle doit être à nouveau reconfigurée et les informations de configuration de la page actuelle est réinjectée, cette étape doit donc être effectuée sur le routeur Appelé afterEach Car selon les instructions de vue-router, le hook global afterEach est appelé après la confirmation de la navigation. a été confirmé et l'URL a changé. La signature WeChat peut être obtenue à nouveau pour l'URL mise à jour

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Explication détaillée des étapes pour optimiser le projet Vue

Comment utiliser Koa dans Node.js pour implémenter l'authentification des utilisateurs JWT

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!