# 小程序的原生组件渲染层级的问题
小程序中有的组件是由原生的方式进行渲染的, 例如图表、picker-view, 它们的层级是绝对高于普通的页面元素, 无论在普通页面元素中使用多高的 z-index 属性也无法超过这些原生组件的层级
疑惑
在开发者工具中调试时, 确实会出现上述图表层级超越页面元素的问题, 但是实际测试时, 在大多数手机中此层级问题却不是必现问题
为了解决这个穿透的问题, 尝试使用了 cover-view 组件, 它同样由原生组件渲染, 所以它的层级可以超越图表, 按照官方文档的理论如此, 但实际在明厨亮灶小程序中却没有一处改写为 cover-view 生效的内容, 原因可能是由于渲染先后的关系, 导致导航处的 cover-view 仍然无法覆盖页面内的图表显示层级, 及时按照文档修改了 z-index 的属性依旧无法覆盖
最终的解决方案为弹出日历picker时将图表内容隐藏, 用其余占位内容保证页面不出现变化, 让用户尽量无感知, 但这个方案仍然有问题, 即图表滑动到页面顶部时时会覆盖掉顶部的自定义导航(目前这个自定义导航使用的是第三方插件, 并非使用了cover-view), 短时间内无法完美适配
以后的小程序在开发前就要注意到这个原生组件的渲染层级问题
uni-app中的层级说明: uni-app原生组件说明 wx-weapp的cover-view: 微信官方文档cover-view的说明
# 小程序的Storage的问题
小程序在获取getStorageSync时可能会遇到无法获取到值的问题, 这个问题在切出小程序再次回到小程序时稳定重现, 可能会导致数据丢失进而影响功能
为了解决以及避免问题再现, 应该将所有需要的数据在created/mounted时, 先将数据存储在组件内, 则不会丢失数据
# 小程序流媒体播放
小程序支持内置的流媒体播放方案: 但仅支持两种格式的流: .flv 和 .rtmp;
同时并非直接使用video标签, 而是使用 <live-player> 标签, 它与传统的 <video> 不同, 内置的内容比video少很多, 甚至全屏功能也不能直接在标签内设置属性控制;
需要控制全屏功能时需要先使用 createLivePlayerContext() 获取 <live-player> 的实例, 然后再调用 requestFullScreen() 这个API, 并在成功 success 和失败 fail 回调中处理你的代码逻辑
同时全屏后的内容例如退出全屏按钮, 返回按钮等, 都需要写在 <live-player> 标签内部, 最好是使用 <cover-view> 和<cover-image>, 并设置较高层级, 以防止这些内容被视频内容遮挡(即上面的层级问题)
# 小程序的列表与详情相关交互
在移动页面中, 通常是不会出现类似pc上的dialog窗口交互的模式, 通常详情即是一个全新的页面(detail page), 在新页面中还会附带一些影响列表页(list page)的操作, 例如修改状态, 删除条目等
小程序的页面跳转逻辑类似keep-alive, 进入详情页时, 列表页内容将会全部缓存, 这就导致详情页的操作将会影响列表页, 回到列表页直接刷新整个列表将会非常臃肿, 而且让用户回到上次浏览位置也需要记录页码 pageNo 和高度 scrollHeight 信息, 相比恶心的高度计算, 记录当条记录的 id 和 index 就显得非常直观和简单
# 修改状态
修改状态时, 返回列表只刷新对应的条目, 此时只需要只需记录其 id 和 pageNo, 当回到列表页时只需重新获取这一页的数据, 再比对 id 后更新列表对应的条目即可
注意
注意此时重新获取时, 不仅要重新附带当前的全部筛选条件, 还可能会由于数据更新导致本应处于第n页的数据被挤到了第n页后, 为了再次查询到目标条目所以此时pageSize应该被适当放大, 根据这个列表的更新频率来决定 pageSize 应该放到多大
# 删除条目
删除(或者说是操作导致列表在当前筛选条件下消失), 此时记录 index 和 pageNo, 返回列表时将对应条目删除
delete listData[index]
虽然这里是假删除, 但是也不用在意这么做的风险性, 因为这是详情页的处理成功回调后续, 这里删除肯定是不会产生错误的, 除非服务端错误...
# 自己的CDN
明厨亮灶云平台中的富文本功能中使用了tinymce.js, 并且使用了通过url进行加载的方法, url为挂在jsDELIVER的CDN, 但是这个CDN并非国内CDN且不稳定, 导致目前经常会出现富文本加载失败的情况, 因此结合实际和公司内已有的服务器资源, 将同版本的tinymce存放在公司的阿里服务器中, 初次实践时发现js能加载成功, 但是字体图表全部无法成功加载, 浏览器报跨域错误, 最后在阿里服务器中配置了可访问网址白名单即解决
# ws代理
在现有项目中, 获取流视频为通常的ws服务器配置代理, 在本地项目中配置代理时可以直接地址为ws/wss, 但NGINX目前无法直接配置这种代理, 配置的地址依然需要http/https, 并将其升级为websocket
location /httpurl/ {
proxy_pass http://wsbackendurl;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
2
3
4
5
6
# 更加统一的日期
由泛华航空园区项目引发的思考, 在页面间跳转时, 时间控件的不统一导致了不少麻烦事, 为了避免类似的问题再次发生, 日期的相关内容需要更加规范化: 例如时间控件的统一, 全局时间格式化方式的统一等
时间控件的统一需要开发与产品一同协商, 属于不完全由开发掌控的问题, 但是时间格式化可以完全由开发决定(当然也涵盖前后台的时间参数传递之间的统一), 以下有几种思路
# Date.Format
传统的格式化方法, 但是通常都需要修改 Date 对象的构造函数, 格式化代码一搜一大堆→_→
通常情况下不建议这么做, 因为不排除使用的某个第三方库也去修改了 Date 原型上的函数, 从而导致一些不必要的bug
# Intl
Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。
# Temporal
Temporal 也是一个实验性的方案, 但目前支持度不高, 属于未来可期型
# 第三方库
时间相关组件库中, Moment.js 是最全面最历史悠久的库, 随着时间的迭代其包体积对于一个时间库来说已经比较大了(2.24.0.min ~ 16kb), 但是实际项目中可能就使用了一些format之类的API, 实属有点小题大做, 同时还存在一个根本的问题: 其对象是可变的, 意味着为了避免多个时间干扰, 都需要进行克隆.clone();
目前momentjs已经停止开发, 进入维护阶段了
Day.js就是更加合适的库, 它拥有极小的体积( ~ 2kb), 以及与moment.js近乎一致的体验, 而且解决了上述可变对象的问题, 每次调用结果都是全新的对象
# 小程序规范
项目或产品中需要小程序时, 不仅开发要遵守小程序的开发规范, 产品角度也需要遵守小程序的规范
避免如上出现的问题会让小程序的迷之审核通过率大大提高...
同时小程序以后的方向需要原生小程序进行, 虽然跟通常的web-vue应用开发模式不同, 但有着官方更好的支持、更多踩过的坑以及更官方的社区
# Element+
2020-11-30日, 下一代的element+ beta版发布了, 开发者称: "以vue3的方式几乎重写了element的每一行代码", 将来项目中使用vue3开发项目时, 这将是一个很好的选择
目前vue3的官中文档加载还是非常龟速
# 如何让强制浏览器不自动填充账号密码
目前只找到了一种较为可行的方法, 即在input前重复添加一个假的input内容来骗浏览器的自动填充, 但目前对于这种方式仅仅能完美拦截账号的填充, 密码的自动填充即使加上了autocomplete='off', 浏览器仍然会在你以保存的密码中进行自动选择, 应该是浏览器的自动识别 type='password' 导致的