这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
跨端概念介绍
背景
PC端、移动端、Web端、IOT端……
目标
-
提高研发效率
- 降低学习成本
- 保证多端一致性
-
提升用户体验
- 稳定性好
- 用户体验好
-
动态化
- 支持动态化
- 满足业务需求
常见跨端技术方案
Hybrid 方案
基于 webview 渲染，通过 JS Bridge 把部分系统功能开放给 JS 调用
原生渲染方案
使用 JS 开发，通过中间层桥接后使用原生组件来渲染 UI 界面
- React Native
自渲染方案
利用 skia 重新实现渲染管线，不依赖原生组件
- Flutter
小程序方案
使用小程序 DLS + JS 开发，通过中间层桥接后调用原生能力，使用 webview 来渲染 UI 界面
- 微信小程序
- QQ小程序
- 支付宝小程序
- 抖音小程序
- 钉钉小程序
- 飞书小程序
- 头条小程序
- 百度小程序
- 快手小程序
- 美团小程序
- 360小程序
- 快应用
- ……
技术方案比较
基于小程序跨端实践
开发步骤
下载开发者工具
小程序开发&调试
小程序上传
小程序性能优化
小程序性能是指小程序在宿主 APP 中加载和呈现的速度，以及用户交互的响应程度
优化意义
提高用户留存率
提升转化率
改善用户体验
优化手段
启动性能体验优化
- 减少包体积 - 合理使用分包，及时清理冗余资源，控制静态资源大小
- 减少同步逻辑 - 优先使用异步 API，避免复杂的计算逻辑
- 更早的展示首屏数据 - 尽早调用关键 API 和请求，接入数据预取
- 合理缓存数据 - 网络数据缓存，API 数据缓存
- 图片优化 - 合理选取图片格式，合理压缩图片，使用 CDN 并开启缓存
- 其他 - 框架骨架屏，占位组件
运行时性能体验
- 合理使用 setData - 减少发送频率，动画不使用 setData
- 合理使用自定义组件 - 合理的拆分组件数量，只注册当前使用的组件，同步修改组件初始 data
- 合理监听处理事件 - 合理监听处理 scroll 事件，移除非必要的事件绑定
- 内存优化 - 及时解绑事件监听，及时清理定时器
- 导航栏适配 - 适当开启自定义导航栏，关键信息避开状态栏和胶囊按钮
- 分屏适配 - 使用CSS（vh）实现自适应布局
