微信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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
转换中文日期的PHP程序
2006/10/09 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
详解jQuery事件
2017/01/13 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python采集博客中上传的QQ截图文件
2014/07/18 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
给客户的道歉信
2014/01/13 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
元宵节主持词
2014/03/25 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js