微信jssdk逻辑在vue中的运用详解
网络编程 2021-07-04 16:47www.168986.cn编程入门
这篇文章主要介绍了微信jssdk逻辑在vue中的运用详解,长沙网络推广觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
微信 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/ . ├── mon.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: '/', ponent: 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 清爽很多,不会有太多业务逻辑之外的代码。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程