--- theme: cyanosis highlight: atelier-cave-light --- ## 前言最近入职了一家公司，做的是房屋租赁平台；技术栈是 uniapp 做多端，包含 Android、IOS，两个端都需要做 H5、微信 H5 和 APP，总共是 6 个端。项目是已经上线运行的，目前主要的工作是解决一些历史遗留的 Bug，完善项目的可用性；在解决这些 Bug 的时候也学到了很多东西，也遇到了很多难以解决的问题，在这里做个总结。 ## 输入框 Emoji 渲染这个问题应该有很多成熟的插件可以实现，但是询问了同事，告知找了很多 uniapp 的插件都不能满足需求；目前项目对于这个功能是分 Android 和 IOS 做不同适配，Android 中使用 editor 渲染，而 IOS 中使用 textarea，然后将 emoji 转换为 `[哭脸]` 这样的方式去渲染，为什么 IOS 不用 editor 的原因没有去深究。我也找了很多相关的插件，比较友好的一种方式是将项目的 emoji 图片转化为字体，通过字体的方式去渲染，在多端中也能保持一致。但是实际操作下来，在 IOS 端会有问题，见下图对比： Android ![android emoji](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c797691380a40319e6f78edd267af79~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080\&h=1118\&s=291773\&e=jpg\&b=84bff3) IOS ![ios emoji](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dd585e0477245569afea874cf87e45d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=750\&h=721\&s=92410\&e=jpg\&b=f7f7f7) 可以发现 IOS 中 emoji 实在是太小了，与字体大小不匹配，造成的视觉落差比较大。我有尝试过使用 `unicode-range` + `size-adjust`（见 [使用CSS size-adjust和unicode-range改变任意文字尺寸]）来单独控制 emoji 的大小，在最新版 Chrome 中是有效的，但在 safari 中不能正常渲染，原因在于 `size-adjust` 的兼容性不好。到这里也没有再继续研究。 ## uniapp picker 组件的一些问题 uniapp 的 picker 不能定制样式，而项目对多端统一的要求比较高，以往在 APP 端是通过修改基座源码来改变 picker 样式的，因为麻烦，而且之前有过忘了修改基座源码而导致多端样式不一致的问题，所以目前需求是使用插件或自定义组件来实现。使用封装组件的方式，利用 `uni-popup` 做弹出控制，`picker-view` 做 picker 的渲染控制，模拟实现 picker 组件；同时在自定义组件中统一解决项目中关于 picker 组件的问题，代码如下： ```vue ``` 这个组件因为使用了 `uni-popup` 做弹出控制，所以样式可能会被含有 `transform` 属性的父元素干扰，我去翻过 picker 组件的源码，主要是通过分端实现，在 H5 中直接使用 DOM API 将元素挂载到 `root` 元素下，而在 APP 端通过 [HTML5+] API 创建 webview 视图来实现（PS：有时间研究下 [HTML5+] 和 uniapp 源码还是挺好的，可以知其然而知其所以然）。 ## fixed 注意事项因为项目主要是移动端，所以做了宽度限制，在宽屏（PC 或平板横屏）中项目展示区域可能不会使用到所有可视区域，此时会在两边留有空白区域，如果按平常的固定定位写法： ```css .fixed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* or */ inset: 0; } ``` ![20231113002311](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec0a883f4cf141cc856328ff1b068edf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1366\&h=521\&s=19009\&e=png\&b=494949) 会出现上图中的问题，此时正确的写法应该是加上 uniapp 官方提供的上下左右边距： ```css .fixed { position: fixed; top: var(--window-top); right: var(--window-right); bottom: var(--window-bottom); left: var(--window-left); } ``` ![20231113002605](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b7f4d6c47774904875dd9ab12ed0c24~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1366\&h=528\&s=18582\&e=png\&b=f3f3f3) ## ios H5 阻尼滚动项目用到滚动的地方基本都是用 scroll-view（虽然性能不好，但当时好像也是为了解决 ios 微信 H5 的一个 bug 才使用的，可以说是填了一个坑又来一个坑），在 scroll-view 滚动时可能会触发页面的滚动，因为 ios 是自带有阻尼回弹效果的，当页面滚动到边界时触发阻尼效果，此时 scroll-view 的滚动会失效，出现页面无法滑动的假象，如下图： ![ios h5 阻尼回弹](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aca2cc5e4cb64b6087db7b96da18ac08~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=750\&h=1334\&s=58918\&e=jpg\&b=f4f3f3) 可以看到触发了页面的滚动，而 scroll-view 的滚动无法触发，导致出现滑不动的情况，需要等待几秒后才能继续滑动。这个问题目前还没有好的解决方案，如果需要处理最好是使用页面的滚动行为，对于性能也会更好一点。 ## ios H5 输入框聚焦后底部出现留白这其实是正常的现象，因为 ios H5 会在输入框聚焦软键盘弹出时给底部添加一块空白区域来让页面上推，防止有区域被软键盘遮挡，如下图： ![ios H5 底部留白](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3830d6e7cbc548b582d60920d00a949d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=750\&h=971\&s=52841\&e=jpg\&b=f9f7f7) 虽然是正常现象，奈何老板有命，不得不从。为了看不到这个空白区域，一个简单的想法是空白区域即将出现在可视区时，阻止页面继续滑动，为此我们需要知道两个关键的变量： * 软键盘的高度 * 软键盘弹出时页面卷上去的高度（也就是底部空白块的高度）然后就可以愉快的侦听页面滚动和触摸事件了，因为页面滚动是无法取消的，所以这里的做法是每次滚动超出时回滚页面，而触摸事件则可以阻止默认的行为，代码如下： ```vue ``` 上述代码虽然有效，但还有几个需要解决的地方： * `window.visualViewport` 在 ios 13 中才开始支持，需要找到其他兼容性更好的方式获取软键盘高度 * 如果触发滚动时手指缓慢滑动至边界且不松手，此时会频繁触发 **滚动溢出 <-> 回滚** 而导致页面抖动 * 在两个输入框中进行切换，且输入框类型不相同（普通输入框和密码输入框），如果两个输入框高度不一致，此时获取到的键盘高度是不正确的 ## ios H5 侧滑返回这个问题可能不常见，但是触发比较简单。只要从页面 A 进入页面 B，页面 B 中的路由阻止了路由跳转事件（`next(false)`），此时通过其他方式是不能离开页面 B 的，但是通过侧滑返回可以返回到页面 A。这个时候如果你去操作页面 A 会发现非常卡顿，且等待一段时间后又会回到页面 B。关于这个问题主要是看具体的需求，这里我的需求就是侧滑返回时操作页面不能卡顿，所以在页面路由中进行了判断，如果是 ios H5 的侧滑返回则不阻止它跳转。 ## Android App 请求权限问题因为项目有做推流、黑名单之类的功能，所以需要用户的设备信息来识别身份，不可避免的使用到 [HTML5+] 的 `getInfo`、`getOAID` API 获取设备 id，但是目前主流的 Android 版本对于这些信息都要求要用户授权才能获取。因为项目在启动时是默认调用相关 API 的，就会导致频繁的向用户请求授权，同时还要考虑用户永久拒绝权限的情况，可能需要通过其他方式来识别用户设备身份。 ## 阻尼回弹老板要多端同步实现阻尼回弹效果，还要非常丝滑的那种。找到了一个老牌 js 滚动插件 [iscroll]，研究了它滚动部分的源码，然后照猫画虎写了一个适配 uniapp 的组件，在 H5 端效果还是可以的，APP 端如果只是简单的展示列表也比较丝滑，可惜放在项目中就一个字：卡！！！下面是写的组件源码，无法在实际项目中使用，但研究下思路进行完善也是可以的： ```vue ``` 目前想要实现较为丝滑的阻尼回弹效果可能需要替换为 nvue 页面，使用官方的 list 组件来完成了。 ## 输入框的一些问题这个没什么好说的，多端适配一堆问题，很多都不好解决。总结下项目中遇到的： * 输入框 emoji 渲染 * 多端软键盘弹出的差异（见 uniapp [关于软键盘弹出的逻辑说明]） * 关于软键盘弹出，比较多的问题是软键盘弹出回弹导致的布局异常 * 在 Android 中，软键盘弹出页面顶起是没有过渡的，会比较生硬；ios 会丝滑一点 * 软键盘弹起时是否会顶起页面，使输入框可见。（一个思路是屏蔽原生的顶起效果，使用过渡来实现平滑上移下移效果） * 快速操作时的 bug * 快速双击输入框可能会导致软键盘闪现 * 在 Android APP 下使用状态控制输入框时，聚焦后快速点击空白处使其失焦大概率会频繁的触发聚焦失焦事件（见 [【报Bug】Android App 下，输入框会频繁聚焦失焦！！！]） * 软键盘收起页面底部偶现出现空白 * ios 输入框聚焦后快速点击 `picker` 类组件从底部弹起，页面底部出现空白还有一些问题与多端适配无关，比如输入框需要过滤特殊字符防止 xss 攻击，这个还是要重视的（[Cross-site scripting（跨站脚本攻击）]）。上述问题基本都没有得到有效解决，后续可能需要封装组件进行统一的处理，也欢迎各位大佬提出自己的想法。 ## 关于项目管理的一些思考接触了一个多月的项目代码，感觉它的问题还是比较大的，也总结了一些关于项目管理需要考虑的点： 1. 不要使用全局混入，全局混入可能会导致多余的依赖，产生性能问题 2. 不要将工具函数挂载到 Vue 原型中，一个 .Vue 被视为一个模块，模块应该遵循最小依赖原则，只引入自己需要的，通过导入的方式也能更好的跟踪代码来源 3. 存储、事件总线等功能的 key 值应该统一管理，方便排查来源，同时需要对每个 key 以注释或直观命名的方式说明作用 4. 一些使用率很高的组件、函数要考虑到后续扩展和修改，不要书写强耦合的代码 5. 拆分拆分拆分！！！ \-- end [使用CSS size-adjust和unicode-range改变任意文字尺寸]: https://www.zhangxinxu.com/wordpress/2022/03/css-size-adjust-font-unicode-range/ [HTML5+]: https://www.html5plus.org/doc/h5p.html [iscroll]: https://github.com/cubiq/iscroll [关于软键盘弹出的逻辑说明]: https://zh.uniapp.dcloud.io/component/input.html#%E5%85%B3%E4%BA%8E%E8%BD%AF%E9%94%AE%E7%9B%98%E5%BC%B9%E5%87%BA%E7%9A%84%E9%80%BB%E8%BE%91%E8%AF%B4%E6%98%8E [【报Bug】Android App 下，输入框会频繁聚焦失焦！！！ ]: https://ask.dcloud.net.cn/question/181250 [Cross-site scripting（跨站脚本攻击）]: https://developer.mozilla.org/zh-CN/docs/Glossary/Cross-site_scripting