Configuration globale du projet Vue WeChat partageant des idées
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)
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
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!

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

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.

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.

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 : 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

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 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

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

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.
