Introduction à la façon d'utiliser la logique WeChat jssdk dans vue (exemple de code)

Le contenu de cet article est une introduction à l'utilisation de la logique WeChat jssdk dans vue (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Utilisation simple de WeChat jssdk dans 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...
});

Ce ci-dessus est l'exemple de code donné par le responsable de WeChat, mais pour une utilisation réelle du projet , le code doit être davantage encapsulé. Cet article démontre basé sur vue, et il en va de même pour d'autres frameworks.

Il a été souligné dans les documents officiels de la plateforme publique WeChat qu'en raison de considérations de sécurité, la logique de signature doit être traitée sur le backend, donc le principe de signature ne sera pas décrit en détail ici. parle principalement de la façon d'utiliser la signature renvoyée par le backend. Au niveau logique, puisque la méthode wx.config est requise avant d'appeler une interface, nous pouvons l'extraire autant que possible et la placer séparément.

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

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
  });
}

De cette façon, l'initialisation de jssdk peut être terminée, puis l'interface de partage peut être initialisée. Au début, je pensais que puisque l'interface de partage pouvait correspondre à chaque url page (SPA dans l'application view), alors elle devait être écrite en utilisant des view mix-ins dans mixin, donc le première version réalisée.

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

// 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);
    });
  });
}

À première vue, il ne semble y avoir rien de mal à cela, mais chaque dossier view a une configuration WeChat qui est très gonflée, donc la première La deuxième version de l'implémentation place l'initialisation .vue dans le crochet jssdk de vue-router, afin qu'une configuration unifiée de la configuration partagée puisse être obtenue, ce qui est plus intuitif. beforeEach

// router.js

//...
routes: [
  {
    path: '/',
    component: Example,
    meta: {
      wechat: {
        share: {
          title: 'example',
          desc: 'example desc',
          imgUrl: 'https://xxx/example.png'
        }
      }
    }
  }
]
//...

// 初始化分享接口
function initWechatShare (config) {
  if (config) {
    share(config);
  }
}

router.beforeEach((to, from, next) => {
  const { shareConfig } = to.meta && to.meta.wechat;
  const link = window.location.href;

  if (!shareConfig) next();

  initWechatShare({ ...shareConfig, link })；
  switchTitle(shareConfig.title); // 切换标题
  next();
});

De cette façon, .vue aura l'air beaucoup plus propre et il n'y aura pas trop de code autre que la logique métier.

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!