微信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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
js电话号码验证方法
Sep 28 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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
php strrpos()与strripos()函数
2013/08/31 PHP
php验证码实现代码(3种)
2015/09/07 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python实现简单加密解密机制
2019/03/19 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python的数学算法函数及公式用法
2020/11/18 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2015年党员承诺书
2015/01/21 职场文书
通知范文怎么写
2015/04/16 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
学校开除通知书
2015/04/25 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
公司酒会致辞
2015/07/30 职场文书
校园安全主题班会
2015/08/12 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
Java实现房屋出租系统详解
2021/10/05 Java/Android
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers