回顾

在这家公司做了哪些项目里

在新公司主要做了 hrosaas，hrsaas，微信第三方平台（用来生成客户小程序），以及公司的一些招聘，缴纳社保的小程序。也做了公司产品小程序配套的公众号页面。

这些项目里有遇到什么困难

在小程序实现全局状态管理库

在招聘小程序中写聊天页面的时候，需要使用类似 vuex 的全局状态管理库，然后自己封装了一个，主要的思路是先封装 Page 函数和 Component 函数，传入 store 和 options，将需要用到 store 的数据设置在 options.use 里，然后遍历递归这个 use 这个数组，生成这个这个 page 需要依赖的 keymap，以及在第一个使用封装 Page 页面的 onload 中使用 Object.defineProperty 开始监听 store 里数据的变化，并使用 this.setData 赋值初始值。当 store 里的数据变化的时候，会依次遍历所有的路由实例，如果当前页面的 keymap 有依赖这个数据的话，则执行 setdata 函数。

这里针对数组的监听类似 vue2 中的实现，只对常用的几个数组函数做了重写。针对 store 还做了 page 构造器的 computed 和 watch。

做聊天微信小程序

使用的是腾讯的 IM 通信服务，然后自己实现聊天需要的功能，群组，成员设置（禁言，踢出），群公告，个人信息，聊天信息（文本，语音，表情，图片），自定义消息（诸如红包）。然后在写聊天页面中，因为需要上移滚动弹出历史消息，那么理想的实现方式就是使用 column-reserve，这个可以比较完美的完成这个需求。但是每个聊天记录的前几条会在最下面呈现，而这个又与想要的不符合，所以这里还去获取了聊天页面的实际高度，并且在聊天数据较少的时候去计算聊天内容的高度，如果没有超过实际高度，则使用 flex-end，否则使用 flex-start。

然后就是 scroll-view 的滚动到顶部后触发到事件，在使用 column-reserve 后，ios 和安卓机在微信里的表现形式不一致，安卓能够准确的监听到这个事件，但是 ios 无法准确的监听到，所以 ios 的这个事件需要自己实现，这里需要做节流处理，因为不需要那么高精度的滑动距离操控。bug 链接。

实现了自定义海报。

在九月份上线了，hr 和求职者单聊的聊天模式，体验吊打 boss 招聘，拼多多等各种同类单聊小程序。

里面遇到的一些问题： 不使用 column-reserve，上滑的时候会发生跳页，使用也 scroll-anchoring，因为 scroll-anchoring 只针对未滑动到顶部的时候，即 scrollTop 不为 0 的时候，这个时候往 list.unshift 不会发生跳页，但是只要 scrollTop 为 0 的时候，还是会跳页。 那么也许就可以使用 scroll-into-view，在跳页的时候瞬间回到之前展示的那个 item，但是这个体验不好，会有一些误差，而且页面会抖动，所以放弃。

使用 column-reserve，首页需要计算第一页元素的高度，以及手机屏幕的可视区域高度，计算获得是否需要 flex-end，所获取的聊天数据需要倒叙插入。有多条数据时候，部分机型不会进入页面就跳转到最底部，需要手动执行。

底部 emoji，语音，以及键盘的过渡效果实现，需要各自计算原本的高度，在安卓和 ios 中单独处理，因为 ios 的 handlekeyboardheightchange 延迟比安卓的低。还需要单独处理 handleBlur，handleFocus，handleInputTap 以及各个选项栏的点击时间，控制前后的进出过渡效果，不能产生冲突，同时 2 个过渡效果展示。同时还要注意性能。

做第三方平台

主要还是步骤比较繁琐，需要手动实现微信公众平台的功能，但是做完感觉难度也不大。

现在的第三方平台小程序主要是做招聘相关的，里面实现了线上换肤，海报等等

做了企业微信的插件，智联招聘的自动爬取插件

企业微信的插件的功能是，企业微信用户通过企业微信给微信客户发送 h5 链接，然后微信用户打开 h5 链接，可以直接填写个人信息，然后企业微信用户可以直接通过插件直接预览微信用户填的信息。

智联招聘的自动爬取插件主要是先通过 chrome 插件获取当前用户(大概需要 4-5 个左右)的 token 一些鉴权信息，rt，at 啥的，然后在自己搭建的 node 后台服务器直接建立请求爬取接口(当然这里需要有一些避免被当作机器人的逻辑操作)。

hrss-admin 和 hross

在做这几个项目的时候，因为前期为了项目开发进度快，hross 选取了 layui，hrss 采用了 guns-admin，但是这两个框架在使用的时候都有一定的缺陷。layui 老旧，api 不友好，不好维护，耦合性强，好处是兼容老式浏览器，开发进度快。guns-admin 系统内容太多，启动慢，对我们来说无效组件太多，而且采用的是 vue2，而现在 vue3 性能对比高了很多，而且我们又没有需要兼容 ie11 及一下的浏览器，所以最后 hrss-admin 采用 guns-admin 的后台，然后自己开发了一套适配该后台的 vue3 基础框架，保留了原有系统的权限管理，放弃了 vue2 和 antd-design-vue，使用情况对比 guns-admin 改良了很多。而且也没有首屏渲染慢的问题。

guns-admin 使用体验不好有一部分原因是采用 antd-pro 原始框架配上 guns 自有的权限配置，使得在登陆后的操作过多，现在鉴权的判断，动态渲染路由，以及系统应用的切换。我后面将大系统拆分成一个个小系统，在同一个应用管理后台的大体系下，每个应用对应一个项目，不在需要切换系统应用，不再需要获取所有应用的路由，以及简化了权限的判断。

更新 wxml-to-canvas 库

因为部分安卓手机在高 dpr 的情况下，将 canvas 渲染成图片导出的时候像素过大，导致文件过大，故设置安卓部分手机 dpr 为 2。

实现多行自动添加省略号的功能。

在 render 前，await 画布的初始化。

代码格式

统一使用 prettier，saas，小程序使用 gulp 自动编译 sccs 成 wxss。

全面拥抱 TS

新的项目基本可以用的都用上了 TS。

佛系开源

wxml-to-canvas-enhance。

vant，naive-ui，weex-ui，ant-design-pro，ecomfe/zrender。 pr。