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


Posted in Javascript onNovember 14, 2018

微信 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 清爽很多,不会有太多业务逻辑之外的代码。

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

Javascript 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
js回调函数仿360开机
Dec 26 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 #Javascript
React和Vue中监听变量变化的方法
Nov 14 #Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 #Javascript
js html实现计算器功能
Nov 13 #Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 #Javascript
小程序登录态管理的方法示例
Nov 13 #Javascript
You might like
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP获得数组交集与差集的方法
2015/06/10 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
js获取单选按钮的数据
2006/11/27 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
Sea.JS知识总结
2016/05/05 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
python条件和循环的使用方法
2013/11/01 Python
Python动态加载模块的3种方法
2014/11/22 Python
python中list列表的高级函数
2016/05/17 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python eval函数介绍及用法
2020/11/09 Python
python中time、datetime模块的使用
2020/12/14 Python
音乐学专业求职信
2014/07/22 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
教师旷工检讨书
2015/08/15 职场文书
趣味运动会广播稿
2015/08/19 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技