Maison interface Web js tutoriel Configuration globale du projet Vue WeChat partageant des idées

Configuration globale du projet Vue WeChat partageant des idées

May 05, 2018 pm 02:13 PM
分享 思路 配置

Cet article présente principalement les idées détaillées de partage WeChat sur la configuration globale du projet Vue. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Ce projet est. un projet mobile Principalement utilisé pour accéder aux services du compte public. 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 qui nécessite que les utilisateurs se connectent avant de pouvoir naviguer, et l'autre que les utilisateurs peuvent parcourir 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. En général, la copie de partage par défaut est configurée globalement. Le premier est que le contenu partagé n'a pas besoin d'être obtenu. de manière asynchrone et est configuré lorsque l'itinéraire saute, 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)
Copier après la connexion

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>
Copier après la connexion

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

Recommandations associées :

Liaison LAN de l'environnement de développement du projet webpack vue. Méthode IP


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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment partager Quark Netdisk avec Baidu Netdisk ? Comment partager Quark Netdisk avec Baidu Netdisk ? Mar 14, 2024 pm 04:40 PM

Quark Netdisk et Baidu Netdisk sont tous deux des outils de stockage très pratiques. De nombreux utilisateurs se demandent si ces deux logiciels sont interopérables ? Comment partager Quark Netdisk avec Baidu Netdisk ? Laissez ce site présenter en détail aux utilisateurs comment enregistrer les fichiers Quark Network Disk sur Baidu Network Disk. Comment enregistrer des fichiers de Quark Network Disk vers Baidu Network Disk Méthode 1. Si vous souhaitez savoir comment transférer des fichiers de Quark Network Disk vers Baidu Network Disk, téléchargez d'abord les fichiers qui doivent être enregistrés sur Quark Network Disk, puis ouvrez le client Baidu Network Disk, sélectionnez le dossier dans lequel le fichier compressé doit être enregistré et double-cliquez pour ouvrir le dossier. 2. Après avoir ouvert le dossier, cliquez sur « Télécharger » dans le coin supérieur gauche de la fenêtre. 3. Recherchez le fichier compressé qui doit être téléchargé sur votre ordinateur et cliquez pour le sélectionner.

Le principe de fonctionnement et la méthode de configuration de GDM dans le système Linux Le principe de fonctionnement et la méthode de configuration de GDM dans le système Linux Mar 01, 2024 pm 06:36 PM

Titre : Le principe de fonctionnement et la méthode de configuration de GDM dans les systèmes Linux Dans les systèmes d'exploitation Linux, GDM (GNOMEDisplayManager) est un gestionnaire d'affichage commun utilisé pour contrôler la connexion à l'interface utilisateur graphique (GUI) et la gestion des sessions utilisateur. Cet article présentera le principe de fonctionnement et la méthode de configuration de GDM, ainsi que des exemples de code spécifiques. 1. Principe de fonctionnement de GDM GDM est le gestionnaire d'affichage de l'environnement de bureau GNOME. Il est chargé de démarrer le serveur X et de fournir l'interface de connexion à l'utilisateur.

Comment partager NetEase Cloud Music avec WeChat Moments_Tutorial sur le partage de NetEase Cloud Music avec WeChat Moments Comment partager NetEase Cloud Music avec WeChat Moments_Tutorial sur le partage de NetEase Cloud Music avec WeChat Moments Mar 25, 2024 am 11:41 AM

1. Tout d'abord, nous entrons dans NetEase Cloud Music, puis cliquons sur l'interface de la page d'accueil du logiciel pour accéder à l'interface de lecture de chansons. 2. Ensuite, dans l'interface de lecture de la chanson, recherchez le bouton de fonction de partage en haut à droite, comme indiqué dans l'encadré rouge de la figure ci-dessous, cliquez pour sélectionner le canal de partage dans le canal de partage, cliquez sur l'option « Partager sur » sur en bas, puis sélectionnez le premier « WeChat Moments » qui vous permet de partager du contenu avec WeChat Moments.

Comprendre Linux Bashrc : fonctions, configuration et utilisation Comprendre Linux Bashrc : fonctions, configuration et utilisation Mar 20, 2024 pm 03:30 PM

Comprendre Linux Bashrc : fonction, configuration et utilisation Dans les systèmes Linux, Bashrc (BourneAgainShellruncommands) est un fichier de configuration très important, qui contient diverses commandes et paramètres qui sont automatiquement exécutés au démarrage du système. Le fichier Bashrc se trouve généralement dans le répertoire personnel de l'utilisateur et est un fichier caché. Sa fonction est de personnaliser l'environnement Bashshell pour l'utilisateur. 1. Environnement de configuration des fonctions Bashrc

Comment partager des fichiers avec des amis sur Baidu Netdisk Comment partager des fichiers avec des amis sur Baidu Netdisk Mar 25, 2024 pm 06:52 PM

Récemment, le client Android Baidu Netdisk a inauguré une nouvelle version 8.0.0. Cette version apporte non seulement de nombreux changements, mais ajoute également de nombreuses fonctions pratiques. Parmi eux, le plus frappant est l’amélioration de la fonction de partage de dossiers. Désormais, les utilisateurs peuvent facilement inviter des amis à rejoindre et partager des fichiers importants au travail et dans la vie, obtenant ainsi une collaboration et un partage plus pratiques. Alors, comment partager les fichiers que vous devez partager avec vos amis ? Ci-dessous, l'éditeur de ce site vous fera une introduction détaillée, j'espère qu'il pourra vous aider ! 1) Ouvrez l'application Baidu Cloud, cliquez d'abord pour sélectionner le dossier approprié sur la page d'accueil, puis cliquez sur l'icône [...] dans le coin supérieur droit de l'interface (comme indiqué ci-dessous) 2) Cliquez ensuite sur [+] dans la colonne "Membres partagés" 】, et enfin cochez tous

Comment configurer un groupe de travail dans le système Win11 Comment configurer un groupe de travail dans le système Win11 Feb 22, 2024 pm 09:50 PM

Comment configurer un groupe de travail dans Win11 Un groupe de travail est un moyen de connecter plusieurs ordinateurs dans un réseau local, ce qui permet de partager des fichiers, des imprimantes et d'autres ressources entre les ordinateurs. Dans le système Win11, configurer un groupe de travail est très simple, suivez simplement les étapes ci-dessous. Étape 1 : Ouvrez l'application « Paramètres ». Cliquez d'abord sur le bouton « Démarrer » du système Win11, puis sélectionnez l'application « Paramètres » dans le menu contextuel. Vous pouvez également utiliser le raccourci « Win+I » pour ouvrir « Paramètres ». Étape 2 : Sélectionnez « Système » Dans l'application Paramètres, vous verrez plusieurs options. Veuillez cliquer sur l'option "Système" pour accéder à la page des paramètres système. Étape 3 : Sélectionnez « À propos » Dans la page des paramètres « Système », vous verrez plusieurs sous-options. Cliquez s'il vous plait

Comment configurer et installer FTPS sur le système Linux Comment configurer et installer FTPS sur le système Linux Mar 20, 2024 pm 02:03 PM

Titre : Comment configurer et installer FTPS dans le système Linux, des exemples de code spécifiques sont requis. Dans le système Linux, FTPS est un protocole de transfert de fichiers sécurisé. Par rapport à FTP, FTPS crypte les données transmises via le protocole TLS/SSL, ce qui améliore la sécurité des données. transmission. Dans cet article, nous présenterons comment configurer et installer FTPS dans un système Linux et fournirons des exemples de code spécifiques. Étape 1 : Installer vsftpd Ouvrez le terminal et entrez la commande suivante pour installer vsftpd : sudo

Interprétation des paramètres de configuration de MyBatis Generator et bonnes pratiques Interprétation des paramètres de configuration de MyBatis Generator et bonnes pratiques Feb 23, 2024 am 09:51 AM

MyBatisGenerator est un outil de génération de code officiellement fourni par MyBatis, qui peut aider les développeurs à générer rapidement des JavaBeans, des interfaces Mapper et des fichiers de mappage XML conformes à la structure des tables de base de données. Dans le processus d'utilisation de MyBatisGenerator pour la génération de code, la définition des paramètres de configuration est cruciale. Cet article commencera du point de vue des paramètres de configuration et explorera en profondeur les fonctions de MyBatisGenerator.

See all articles