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

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

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

 wechatShareConfig() {
  return {
    : \'example\',
   desc: \'example desc\',
   imgUrl: \'http://xxx/example.png\',
    : 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 {  , desc,  , imgUrl } = config;
 sdk.onMenuShareAppMessage({  , desc,  , imgUrl });
}

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

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

 // 签名验证
 getTicket(wechatShareConfig. ).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);
  });
 });
}

// router.js

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

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

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

 if (!shareConfig) next();

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