【Vue3】我用Vue3 + Ts + Pinia + Vant 完成了一个企微H5应用!

简介: 公司想做一个内部的企微H5应用,给代理人或者销售们用,主要用途有两点:在后台维护一整套素材(图片、文章、文本、视频、语言、小程序等),可以在H5中选择素材并群发给客户、客户群、朋友圈

前言

公司想做一个内部的企微H5应用,给代理人或者销售们用,主要用途有两点:

  1. 在后台维护一整套素材(图片、文章、文本、视频、语言、小程序等),可以在H5中选择素材并群发给客户客户群朋友圈
  2. 在后台创建可以用于获客的活码,并留痕 对接企微这块之前没有做过,中间踩了一点点坑,在这里记录一下,并介绍一下基础流程;

技术栈选型

一入Vue3深似海,本次选型还是继续使用Vue3 + Ts + Pinia,在这个基础上加入移动端UI库Vant UI,自适应方案从rem过渡到了postcss-px-to-viewport,后者相对前者来说对我的感觉就是,配置变得更简单了,css工具从 windicss过渡到了unocss,更快更小。当然必不可少的eslintprettierrchuskycommitizen都要有,编辑器还是使用vscode

说到IDE,在【我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】文章中有人质疑为什么非要强制小伙伴使用vscode,这里再说明一下,我觉得是两方面吧,一是我是想借此机会统一编辑器,我觉得这是一件很正常操作,二是在特殊背景下某些决策是会影响到一部分人,这个是不可避免的,少数服从多数吧.(ps. leader真难当)

接入SDK

首先需要引入俩SDK

对应 wx.config

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
复制代码

对应 wx.agentConfig

<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
复制代码

这俩api在SPA应用中需要在route update的时候调用,仅仅调用一次是不够的。

wx.config

window.wx.config({
    beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: corpId, // 必填,企业微信的corpID
    timestamp, // 必填,生成签名的时间戳
    nonceStr, // 必填,生成签名的随机串
    signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
    jsApiList: JS_API_LIST // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
  });
复制代码

wx.agentConfig

window.wx.agentConfig({
    corpid: corpId, // 必填,企业微信的corpid,必须与当前登录的企业一致
    debug: true,
    agentid: agentId, // 必填,企业微信的应用id (e.g. 1000247)
    timestamp, // 必填,生成签名的时间戳
    nonceStr, // 必填,生成签名的随机串
    signature, // 必填,签名,见附录-JS-SDK使用权限签名算法
    jsApiList: JS_API_LIST, // 必填,传入需要使用的接口名称
  });
复制代码

JS_API_LIST

JS_API_LIST 指的是你需要调用的 wx的api的集合,只要你要调用,就必须放在 JS_API_LIST中,要不然会无权限

export const JS_API_LIST = ['closeWindow']
复制代码

timestamp & nonceStr & signature

这个是需要在后端生成的,不建议放在前端,需要注意的是wx.config&wx.agentConfig生成签名的方式一致,但是jsapi_ticket后去的方式不一致,需要在之前的基础上加上type=agent_config

遇到的问题

首次登录成功之后,无法直接退出到工作台

第一次授权登录以后,无法直接退出到工作台,而是退出到授权页,这里需要通过声明一个session,然后判断session,再调用企微的 closewindow手动关闭

页面redirect_url有误

在给后端传递url时,不能直接去window.loaction.origin,需要在这个基础上拼接一个/,但是在进行auth link的时候是不需要的

IOS页面底部安全区导致mask无法遮盖整个视口

需要在 html.meta设置 viewport-fit=cover

wx.agentConfig涉及的api提示 no permission的问题

wx.agentConfig必须在wx.config之后进行调用

项目设计

说一下需要重点处理的部分hook

hooks

useWechat

用来统一管理wx api,比如唤起聊天窗口群发信息

网络异常,图片无法展示
|

localstorage

本地存储通过cropty aes进行非对称加密,cryptoSecret可以选择从服务端加密获取,或者直接在前端加密维护

总结

没有想象的那么复杂


目录
打赏
0
0
0
0
82
分享
相关文章
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
55 11
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
105 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
75 1
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
150 1
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
52 8
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
89 3
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
173 0
Vue3+Vite+TypeScript常用项目模块详解
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)

热门文章

最新文章