Comment configurer la personnalisation de WeChat dans vue

Pour développer des comptes publics WeChat dans les projets Vue, des paramètres personnalisés WeChat sont nécessaires pour s'adapter à l'interface et aux fonctions des comptes publics WeChat. Cet article explique comment personnaliser les paramètres WeChat dans le projet Vue pour rendre votre programme plus adapté au développement de comptes publics WeChat.

1. Configurez le SDK WeChat JS

Tout d'abord, vous devez enregistrer un compte officiel sur la plateforme publique WeChat et obtenir l'identifiant unique (AppID) et la clé secrète (AppSecret) du compte officiel. Introduisez ensuite l'interface WeChat JS SDK dans index.html du projet Vue.

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

Créez un fichier wechat.js global dans le projet Vue et écrivez le code de configuration :

import wx from 'weixin-js-sdk';

const wechatConfig = {
  debug: false, // 调试模式，设置为true后会进行微信调试 
  appId: '', // 公众号AppID, 必填 
  timestamp: '', // 生成签名的时间戳，必填 
  nonceStr: '', // 生成签名的随机串，必填 
  signature: '', // 签名，必填 
  jsApiList: [] // 必填，需要使用的JS接口列表 
};

/**
 * 获取微信配置
 * @return {Promise}
*/
function getConfig() {
  return new Promise((resolve, reject) => {
    const url = window.location.href.split('#')[0];
    const data = {
      url: url
    };

    axios.post(YOUR_SERVER_API, data).then((result) => {
      const data = result.data;
      wx.config({
        beta: true,
        debug: wechatConfig.debug,
        appId: wechatConfig.appId,
        timestamp: wechatConfig.timestamp,
        nonceStr: wechatConfig.nonceStr,
        signature: wechatConfig.signature,
        jsApiList: wechatConfig.jsApiList
      });
      wx.ready(() => {
        resolve();
      });
    }).catch(() => {
      reject();
    });
  });
}

export default {
  getConfig
}

Expliquez le code :

• ligne 1-2 : Introduisez le SDK WeChat JS.
• ligne 4-14 : Créez un objet weixinConfig, comprenant l'AppID du compte officiel, l'horodatage pour générer la signature, la chaîne aléatoire pour générer la signature, la signature et la liste des interfaces JS qui doivent être utilisées.
• ligne 16-28 : Créez une fonction getConfig et utilisez la méthode axios.post dans la fonction pour lancer une requête au serveur backend afin d'obtenir les informations de configuration de signature du compte officiel. Après avoir obtenu les informations de configuration, appelez la méthode wx.config pour configurer WeChat.
• ligne 30-35 : La méthode getConfig est exposée au monde extérieur et peut être appelée par d'autres modules pour obtenir les informations de configuration du SDK WeChat JS.

2. Appel d'interface

La méthode d'appel de l'interface WeChat dans le projet Vue est fondamentalement la même que la méthode d'appel de la page Web ordinaire. Il vous suffit d'utiliser le cycle de vie et le mécanisme d'événements de Vue pour coordonner l'heure.

Prenons comme exemple le partage vers WeChat Moments dans un projet Vue :

Dans le composant Vue, utilisez le cycle de vie créé pour appeler la méthode getConfig afin de configurer le SDK WeChat JS afin de préparer l'utilisation de l'interface WeChat.

import wechatConfig from 'wechatConfig';

export default {
  data() {
    return {
      shareData: {
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接
        imgUrl: '' // 分享图标
      }
    };
  },
  created() {
    wechatConfig.getConfig().then(() => {
      wx.checkJsApi({ 
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'], // 需要检测的JS接口列表
        success: (res) => { 
          console.log(res.errMsg) // 验证成功后的操作
        } 
      });
    });
  },
  methods: {
    wxShareFriendsCircle() {
      wx.onMenuShareTimeline({
        title: this.shareData.title, // 分享标题 
        link: this.shareData.link, // 分享链接 
        imgUrl: this.shareData.imgUrl, // 分享图标 
        success: () => {
          console.log('分享成功');
        },
        cancel: () => {
          console.log('取消分享');
        }
      });
    }
  }
}

Expliquez le code :

• ligne 1-2 : Introduisez le fichier de configuration personnalisé WeChat wechatConfig.
• ligne 6-15 : Créez un objet de données, comprenant un titre partagé, une description, un lien et une icône.
• ligne 17-23 : En utilisant le cycle de vie créé, lorsque l'instance Vue est créée, la méthode getConfig est automatiquement appelée pour la configuration du SDK WeChat JS. Une fois la configuration terminée, utilisez la méthode wx.checkJsApi pour détecter si l'interface JS requise est disponible.
• ligne 26-34 : Créez la méthode wxShareFriendsCircle et enregistrez-la sur l'événement click dans le composant Vue. Lorsque l'utilisateur ouvre la page et clique sur le bouton de partage, la méthode wx.onMenuShareTimeline est appelée pour terminer les opérations liées au partage.

Résumé :

Cet article présente comment configurer la personnalisation de WeChat dans le projet Vue pour s'adapter à l'interface et aux fonctions du compte officiel WeChat. Les méthodes incluent la configuration du SDK WeChat JS, l'appel de l'interface WeChat, etc. J'espère que cet article pourra fournir une aide de référence aux novices.

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!