【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可以选择从服务端加密获取,或者直接在前端加密维护

总结

没有想象的那么复杂


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

热门文章

最新文章