前言

本文是我开发了许多 H5 活动后写下的小结

正文

必备库

CSS：aqua.css

JS：kyouka

样式

端口适配

移动端：vw

pc 端：px

目前我适配两端的做法：将颜色等外观相关的属性放在一起，用媒体查询来隔开长度单位属性。小项目可以这么做，但大项目还是要写两套。

防花屏

开启gpu加速

transform: rotateZ(0);

加载速度慢

考虑压缩图片素材，squoosh将不透明的 png 压缩成 jpg，onlineimagetool批量压缩大小

自定义字体

用fontmin生成字体再插入页面即可

业务

ios 键盘弹出错位修复

ky.iosInputScrollFix();

防止提交后再次发送请求

动态绑定一个pointer-events-none类即可

安卓机兼容无限下拉加载

• 不能在底部放绝对定位的图片，否则会影响高度计算，正确的做法是在加载完成后再显示图片
• 注意安卓有虚拟键会导致划不到底，应该给触底条件添加一个容差

强制刷新缓存

有的手机缓存不容易清除，此时就可以在文件后加后缀以清除缓存，例如app.js?v=1

vue 项目将资源转移至 cdn

在.env.production中配置 cdn 地址即可

注：像 app.xxx.css 这类要经常改动的文件不放在 cdn 上

vue 防止多个页面的事件重合

切换到另一个页面后，别忘了移除上一个页面的监听事件和定时器

onUnmounted(() => {
  window.removeEventListener("scroll", onReachBottom);
});

Date 最兼容的写法

new Date("2020/12/19 00:00:00");

跳转到外链后分享失效

这个问题的发生时机在除首页外的其他页面，因此尽量将外链放首页

注意点

1. 发送请求后注意要同步更新页面上的数据
2. 若用户上传的图片太大，则用Compressor压缩图片后再上传
3. 展示型页面一定要注意文本的长度，单行过长则应截断（.truncate），行数过多则做成滚动式（.overflow-scroll）
4. 图片很多的列表页应采用懒加载（lazyload）
5. 如果后端还没有完成接口，那么前端可以先用假数据进行模拟测试（mock）
6. 有些数据（比如活动的开始结束时间）不要写死，要读取后台，因为随时都有可能改动
7. 分享助力类活动往往需要自定义分享标题，要提前问客户
8. 切图尽量用 2 倍图，如果还不够清晰就用 3 倍图
9. 抽奖码判断中奖时要加includes包含判断
10. 海报生成为了避免出现底部多余的部分，应当固定好高度（通常是ky.vw2px(210)）