SoFunction
Updated on 2025-04-06

Detailed explanation of the application of WeChat jssdk logic in vue

Simple use of WeChat jssdk in vue

import wx from 'weixin-js-sdk';

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

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

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

The above is an example given by WeChatCode, but for actual project use, further encapsulation of the code is needed. This article is based on vue for demonstration, and the rest of the frameworks are the same.

It has been pointed out in the official document of the WeChat public platform that due to security considerations, the signature logic needs to be placed in the backend to process, so the signature principle will not be described here. It mainly talks about how to use the signature call jssdk after the backend returns. At the logical level, since methods are necessary before calling any interface, we can extract them as much as possible and place them separately.

# utils/
.
├──       # General Functions└── lib
  └── wechat      # WeChat related code    ├── auth     # WeChat users log in to get information related codes    │  ├── 
    │  └── 
    ├── config    # jssdk initialization related code    │  └── 
    ├──   # WeChat related operations    └── share    # Share interface related code      └── 
import sdk from 'weixin-js-sdk';

export function initSdk({ appid, timestamp, noncestr, signature, jsApiList }) { // Get from the backend ({
  debug: .VUE_APP_ENV !== 'production',
  appId: appid,
  timestamp: timestamp,
  nonceStr: noncestr,
  signature: signature,
  jsApiList: jsApiList
 });
}

This will complete the initialization of jssdk, and then the initialization of the sharing interface can be performed. At first, I wanted to share that since the interface may correspond to each url page (view in SPA application), it should be written using mixin in the view, so the first version of the implementation was created.

// 
export default {
 name: 'example',

 wechatShareConfig() {
  return {
   title: 'example',
   desc: 'example desc',
   imgUrl: 'http://xxx/',
   link: ('#')[0]
  };
 }
}


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

// Get the wechat sharing interface configurationfunction getWechatShareConfig(vm) {
 const { wechatShareConfig } = vm.$options;
 if (wechatShareConfig) {
  return typeof wechatShareConfig === 'function'
   ? (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'; // Signature interfaceimport { initSdk } from '@/utils/lib/wechat/config';
import sdk from 'weixin-js-sdk';

// Interface listconst JS_API_LIST = ['onMenuShareAppMessage', 'onMenuShareTimeline'];

// Message sharingfunction onMenuShareAppMessage(config) {
 const { title, desc, link, imgUrl } = config;
 ({ title, desc, link, imgUrl });
}

// Share on Momentsfunction onMenuShareTimeline(config) {
 const { title, link, imgUrl } = config;
 ({ title, link, imgUrl });
}

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

 // Signature verification getTicket().then(res => {
  // Initialize `jssdk`  initSdk({
   appid: ,
   timestamp: ,
   noncestr: ,
   signature: ,
   jsApiList: JS_API_LIST
  });

  (() => {
   // Initialize the target interface   onMenuShareAppMessage(wechatShareConfig);
   onMenuShareTimeline(wechatShareConfig);
  });
 });
}

After writing it, it seems nothing wrong at first, but the .vue in each view folder has a WeChat configuration that looks very bloated, so the second version implementation is to initialize jssdk in the vue-router beforeEach hook, which can realize the unified configuration of sharing configurations, which is more intuitive.

// 

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

// Initialize the sharing interfacefunction initWechatShare (config) {
 if (config) {
  share(config);
 }
}

((to, from, next) => {
 const { shareConfig } =  && ;
 const link = ;

 if (!shareConfig) next();

 initWechatShare({ ...shareConfig, link })；
 switchTitle(); // Switch title next();
});

In this way, .vue will appear much refreshing and there will be no too much code outside of business logic.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.