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

总结

没有想象的那么复杂


目录
相关文章
|
10天前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
37 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
156 64
|
2月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
128 60
|
5天前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
25 8
|
20天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
69 3
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
47 8
|
2月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
42 1
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
51 1
|
2月前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。