微信jssdk逻辑在vue中的运用详解

微信 jssdk 在 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...
});

以上是微信官方给出的示例代码，但是对于实际项目使用，还需要进一步对代码进行封装。本文基于 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），那么就应该在 view 中使用 mixin 混入来书写，所以产生了第一版实现。

// example.vue
export default {
 name: 'example',
 wechatShareConfig() {
  return {
   title: 'example',
   desc: 'example desc',
   imgUrl: 'http://huoche.7234.cn/images/jb51/ts2mls3xy4p.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() {								 
 1/2    1 2 下一页 尾页