Einführung in die Verwendung der WeChat-JSSDK-Logik in Vue (Codebeispiel)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung der WeChat-jssdk-Logik (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

Einfache Verwendung von WeChat jssdk in vue

import wx from 'weixin-js-sdk';

wx.config({
  debug: true,
  appId: '',
  timestamp: ,
  nonceStr: '',
  signature: '',
  jsApiList: []
});

wx.ready(() => {
  // do something...
});

wx.error((err) => {
  // do something...
});

Das Obige ist der Beispiel-Code, der vom WeChat-Beamten bereitgestellt wurde, aber für den tatsächlichen Projektgebrauch da ist sind immer noch Der Code muss weiter gekapselt werden. Dieser Artikel basiert auf Vue, und das Gleiche gilt für andere Frameworks.

Im offiziellen Dokument der öffentlichen WeChat-Plattform wurde darauf hingewiesen, dass die Signaturlogik aus Sicherheitsgründen im Backend verarbeitet werden muss, sodass das Prinzip der Signatur hier nicht im Detail beschrieben wird Es geht hauptsächlich darum, wie die vom Backend zurückgegebene Signatur verwendet wird. Rufen Sie jssdk auf. Da auf logischer Ebene die Methode wx.config vor dem Aufruf einer Schnittstelle erforderlich ist, können wir sie so weit wie möglich extrahieren und separat platzieren.

# utils/
.
├── common.js            # 通用函数
└── lib
    └── wechat           # 微信相关代码
        ├── auth         # 微信用户登陆获取信息相关代码
        │   ├── auth.js
        │   └── index.js
        ├── config       # jssdk 初始化相关代码
        │   └── index.js
        ├── helper.js    # 微信相关操作
        └── share        # 分享接口相关代码
            └── index.js

rrree

Auf diese Weise kann die Initialisierung von jssdk abgeschlossen und anschließend die Freigabeschnittstelle initialisiert werden. Am Anfang dachte ich, da die Freigabeschnittstelle jeder url-Seite (SPA in der view-Anwendung) entsprechen könnte, sollte sie mit view-Mix-Ins in mixin geschrieben werden erste Version realisiert.

import sdk from 'weixin-js-sdk';

export function initSdk({ appid, timestamp, noncestr, signature, jsApiList }) { // 从后端获取
  sdk.config({
    debug: process.env.VUE_APP_ENV !== 'production',
    appId: appid,
    timestamp: timestamp,
    nonceStr: noncestr,
    signature: signature,
    jsApiList: jsApiList
  });
}

// example.vue
export default {
  name: 'example',

  wechatShareConfig() {
    return {
      title: 'example',
      desc: 'example desc',
      imgUrl: 'http://xxx/example.png',
      link: window.location.href.split('#')[0]
    };
  }
}

// wechatMixin.js
import { share } from '@/utils/lib/wechat/share';

// 获取 wechat 分享接口配置
function getWechatShareConfig(vm) {
  const { wechatShareConfig } = vm.$options;
  if (wechatShareConfig) {
    return typeof wechatShareConfig === 'function'
      ? wechatShareConfig.call(vm)
      : wechatShareConfig;
  }
}

const wechatShareMixin = {
  created() {
    const wechatShareConfig = getWechatShareConfig(this);
    if (wechatShareConfig) {
      share({ ...wechatShareConfig });
    }
  }
};

export default wechatShareMixin;

Auf den ersten Blick scheint daran nichts auszusetzen zu sein, aber jeder view im Ordner .vue hat eine WeChat-Konfiguration, die sehr aufgebläht ist, sodass die zweite Version von jssdk implementiert wird Die Initialisierung wird im vue-router-Hook von beforeEach durchgeführt, sodass eine einheitliche Konfiguration der gemeinsam genutzten Konfiguration erreicht werden kann, was intuitiver ist.

// utils/lib/wechat/share
import { getTicket } from '@/utils/lib/wechat/helper'; // 签名接口
import { initSdk } from '@/utils/lib/wechat/config';
import sdk from 'weixin-js-sdk';

// 接口清单
const JS_API_LIST = ['onMenuShareAppMessage', 'onMenuShareTimeline'];

// 消息分享
function onMenuShareAppMessage(config) {
  const { title, desc, link, imgUrl } = config;
  sdk.onMenuShareAppMessage({ title, desc, link, imgUrl });
}

// 朋友圈分享
function onMenuShareTimeline(config) {
  const { title, link, imgUrl } = config;
  sdk.onMenuShareTimeline({ title, link, imgUrl });
}

export function share(wechatShareConfig) {
  if (!wechatShareConfig.link) return false;

  // 签名验证
  getTicket(wechatShareConfig.link).then(res => {
    // 初始化 `jssdk`
    initSdk({
      appid: res.appid,
      timestamp: res.timestamp,
      noncestr: res.noncestr,
      signature: res.signature,
      jsApiList: JS_API_LIST
    });

    sdk.ready(() => {
      // 初始化目标接口
      onMenuShareAppMessage(wechatShareConfig);
      onMenuShareTimeline(wechatShareConfig);
    });
  });
}

Auf diese Weise sieht .vue viel sauberer aus und es wird nicht zu viel Code außer der Geschäftslogik geben.

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung der WeChat-JSSDK-Logik in Vue (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!