欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-23 11:26:19
微信 jssdk 在 vue 中的简单使用 import wx from 'weixin-js-sdk'; wx.config({ debug: t...

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

写完之后乍一看似乎没什么毛病,但是每个 view 文件夹下的 .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();
});

这样一来,会显得 .vue 清爽很多,不会有太多业务逻辑之外的代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。