持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情
前言
公司想做一个内部的企微H5应用，给代理人或者销售们用，主要用途有两点：
- 在后台维护一整套素材（图片、文章、文本、视频、语言、小程序等），可以在H5中选择素材并群发给
客户、客户群、朋友圈 - 在后台创建可以用于获客的活码，并留痕 对接企微这块之前没有做过，中间踩了一点点坑，在这里记录一下，并介绍一下基础流程；
技术栈选型
一入Vue3深似海，本次选型还是继续使用Vue3 + Ts + Pinia，在这个基础上加入移动端UI库Vant UI，自适应方案从rem过渡到了postcss-px-to-viewport，后者相对前者来说对我的感觉就是，配置变得更简单了，css工具从 windicss过渡到了unocss，更快更小。当然必不可少的eslint、prettierrc、husky、commitizen都要有，编辑器还是使用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可以选择从服务端加密获取，或者直接在前端加密维护
总结
没有想象的那么复杂
