H5活动海报响应式实践

349 阅读1分钟

H5活动海报响应式实践

需求描述:

1.三周开发联调一周测试上线

2.整平滑动

3.带动画、音效

技术准备

1.采用尺寸以rem为基础

2.配合postcss-pxtorem将手写设计稿px自动转rem

3.设计稿采用主流设计尺寸750 * 1624

4.微信小程序业务域名配置,需要外网可访问域名

项目实战

1.基于vue-cli搭建项目框架

2.安装编译依赖:postcss-pxtorem

3.安装项目依赖:vue-awesome-swiper swiper(实现整屏滑动)urlparse(解析url)howler(音频播放)

开发过程中坑

 1.ios系统禁止非用户触发播放音频
 
 2.css3旋转在ios会影响图层展示效果
 
 3.ios端对new Date时间字符串需要采用横杠连接,如:2021/12/12 00:00:00,否则无法解析
 

效果验收

1.动画没有全部实现,时间有限

2.小程序发布有时效,非及时,发布后需要平台审核

3.布局边界未全机型适配,导致部分机型文案会截断

项目总结

1.动画、音效调试时间要留充分

2.非用户触发播放音效,建议使用第三方库(howler)

3.全机型适配需要预留1/5时间实现


适配核心实现

image.png

image.png