So richten Sie die WeChat-Anpassung in Vue ein

Für die Entwicklung öffentlicher WeChat-Konten in Vue-Projekten sind benutzerdefinierte WeChat-Einstellungen erforderlich, um sie an die Benutzeroberfläche und die Funktionen öffentlicher WeChat-Konten anzupassen. In diesem Artikel erfahren Sie, wie Sie die WeChat-Einstellungen im Vue-Projekt anpassen, um Ihr Programm besser für die Entwicklung öffentlicher WeChat-Konten geeignet zu machen.

1. Richten Sie das WeChat JS SDK ein

Zuerst müssen Sie ein offizielles Konto auf der öffentlichen WeChat-Plattform registrieren und die eindeutige Kennung (AppID) und den geheimen Schlüssel (AppSecret) des offiziellen Kontos erhalten. Führen Sie dann die WeChat JS SDK-Schnittstelle in index.html des Vue-Projekts ein.

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

Erstellen Sie eine globale wechat.js-Datei im Vue-Projekt und schreiben Sie den Konfigurationscode:

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
}

Erklären Sie den Code:

• Zeile 1-2: Stellen Sie das WeChat JS SDK vor.
• Zeile 4-14: Erstellen Sie ein Objekt weixinConfig, einschließlich der AppID des offiziellen Kontos, des Zeitstempels zum Generieren der Signatur, der Zufallszeichenfolge zum Generieren der Signatur, der Signatur und der Liste der JS-Schnittstellen, die verwendet werden müssen.
• Zeile 16-28: Erstellen Sie eine Funktion getConfig und verwenden Sie die Methode axios.post innerhalb der Funktion, um eine Anfrage an den Backend-Server zu initiieren, um die Signaturkonfigurationsinformationen des offiziellen Kontos zu erhalten. Rufen Sie nach Erhalt der Konfigurationsinformationen die Methode wx.config auf, um WeChat zu konfigurieren.
• Zeile 30-35: Die getConfig-Methode wird der Außenwelt zugänglich gemacht und kann von anderen Modulen aufgerufen werden, um die WeChat JS SDK-Konfigurationsinformationen abzurufen.

2. Schnittstellenaufruf

Die Methode zum Aufrufen der WeChat-Schnittstelle im Vue-Projekt ist grundsätzlich dieselbe wie die Methode zum Aufrufen einer normalen Webseite. Sie müssen lediglich den Lebenszyklus und den Ereignismechanismus von Vue verwenden, um die Zeit zu koordinieren.

Nehmen Sie als Beispiel die Freigabe von WeChat-Momenten in einem Vue-Projekt:

In der Vue-Komponente verwenden Sie den erstellten Lebenszyklus, um die getConfig-Methode aufzurufen, um das WeChat JS SDK zu konfigurieren, um die Verwendung der WeChat-Schnittstelle vorzubereiten.

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('取消分享');
        }
      });
    }
  }
}

Erklären Sie den Code:

• Zeile 1-2: Einführung der benutzerdefinierten WeChat-Konfigurationsdatei wechatConfig.
• Zeile 6-15: Erstellen Sie ein Datenobjekt, einschließlich gemeinsamem Titel, Beschreibung, Link und Symbol.
• Zeile 17-23: Mithilfe des erstellten Lebenszyklus wird beim Erstellen der Vue-Instanz automatisch die getConfig-Methode für die WeChat JS SDK-Konfiguration aufgerufen. Nachdem die Konfiguration abgeschlossen ist, überprüfen Sie mit der Methode wx.checkJsApi, ob die erforderliche JS-Schnittstelle verfügbar ist.
• Zeile 26-34: Erstellen Sie die Methode wxShareFriendsCircle und registrieren Sie sie beim Click-Ereignis in der Vue-Komponente. Wenn der Benutzer die Seite öffnet und auf die Schaltfläche „Teilen“ klickt, wird die Methode „wx.onMenuShareTimeline“ aufgerufen, um die mit der Freigabe verbundenen Vorgänge abzuschließen.

Zusammenfassung:

In diesem Artikel wird erläutert, wie Sie die WeChat-Anpassung im Vue-Projekt einrichten, um sie an die Benutzeroberfläche und die Funktionen des offiziellen WeChat-Kontos anzupassen. Zu den Methoden gehören das Einrichten des WeChat JS SDK, das Aufrufen der WeChat-Schnittstelle usw. Ich hoffe, dass dieser Artikel Anfängern eine Referenzhilfe bieten kann.

Das obige ist der detaillierte Inhalt vonSo richten Sie die WeChat-Anpassung in Vue ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!