vue에서 WeChat jssdk 로직을 사용하는 방법 소개(코드 예시)

이 글은 vue(코드 예제)에서 WeChat jssdk 로직을 사용하는 방법을 소개합니다. 이는 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Simple use of 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...
});

위는 WeChat 공식에서 제공한 code 예시이지만, 실제 프로젝트 사용을 위해서는 코드를 추가로 캡슐화해야 합니다. 이 기사는 vue를 기반으로 설명하며 다른 프레임워크에도 동일하게 적용됩니다.

위챗 공개 플랫폼의 공식 문서에는 보안상의 이유로 서명 로직을 백엔드에서 처리해야 한다고 명시되어 있으므로 여기서는 서명 원리에 대해 자세히 설명하지 않습니다. 백엔드에서 반환된 서명을 사용하여 jssdk를 호출합니다. 논리적 수준에서는 인터페이스를 호출하기 전에 wx.config 메소드가 필요하므로 최대한 추출하여 별도로 배치할 수 있습니다.

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

이렇게 하면 jssdk 초기화가 완료되고 공유 인터페이스도 초기화될 수 있습니다. 처음에는 모든 url 페이지에 해당하는 인터페이스(SPA 애플리케이션의 보기)를 공유할 수 있다고 생각했는데, 그러면 >view에 있어야 합니다. mixin을 사용하여 믹스인을 사용하여 작성되었으므로 구현의 첫 번째 버전이 생성되었습니다. jssdk 的初始化，之后可以进行分享接口的初始化。最初的时候我想分享接口既然是可能对应每一个 url 页面（SPA 应用中的 ），那么就应该在 中使用 mixin 混入来书写，所以产生了第一版实现。

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

写完之后乍一看似乎没什么毛病，但是每个 文件夹下的 .vue 都有一份微信配置显得很是臃肿，所以第二版实现则是将 jssdk 初始化放在 vue-router 的 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();
});

rrreeerrreee작성하고 보니 얼핏 보면 별 문제 없어 보이는데, 폴더 아래의 각 .vue에 위챗 구성이 너무 부풀어오르는 것 같아서, 두 번째 버전 구현은 vue-router의 beforeEach 후크에 jssdk 초기화를 배치하여 공유 구성의 통합 구성이 가능하도록 하는 것입니다. 좀 더 직관적입니다.

rrreee

이렇게 하면 .vue가 훨씬 깔끔하게 보이고 비즈니스 로직 이외의 코드가 너무 많지 않게 됩니다. 🎜

위 내용은 vue에서 WeChat jssdk 로직을 사용하는 방법 소개(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!