决定创建混合应用程序是第一步。第二是确保它看起来不像“包装网站”。用户有很高的期望：他们想要原生手势、流畅的动画和离线操作。
本文是一份技术和产品清单，旨在确保您的混合应用程序项目（无论是 React Native、Flutter 还是 Ionic）从第一次提交就取得成功。
第一阶段：技术选择（基础）
- 评估当前团队：
- 你的团队来自Web（React/Vue）吗？使用 React Native 或 Ionic。
- 您的团队喜欢强类型和面向对象（Java/C#）吗？使用 Flutter (Dart)。
- 检查本机库：
- 您的应用程序是否需要特定的 SDK（例如来自不知名制造商的生物识别读取器）？检查所选混合技术是否有“桥梁”（桥/插件）。如果没有，您也必须编写本机代码。
第 2 阶段：环境配置（设置）
- CI/CD（持续集成）：
- 配置 Bitrise、AppCenter 或 Codemagic 等工具。混合应用程序具有复杂的构建。自动生成0和1。
- 状态管理：
- 定义数据的传输方式。 （Redux、MobX、Bloc、Riverpod）。这里糟糕的架构会减慢应用程序的速度。
- 原生导航：
- 使用模拟系统导航的库。
- React Native：使用 2（使用下面的原生片段）。
- 不要尝试“手动”重新创建屏幕过渡动画。这会很奇怪。
第三阶段：用户体验（UX/UI）
危险就在这里。混合应用程序的“恐怖谷”。
- 尊重平台：
- 在 iOS 上，“后退”按钮实际上并不存在（它需要位于屏幕上）。在安卓上，有。
- 在 iOS 上，选项卡位于底部。在 Android 上，旧的默认设置位于顶部（但现在它也位于底部）。
- 使用自适应组件为每个操作系统呈现正确的样式。
- 安全区域：
- 小心“Notch”（摄像头切口）和 iPhone X+ 主栏。使用 3 不剪切内容。
- 触觉反馈（触觉）：
- 添加点击按钮或犯错误时的细微振动。这赋予了它重量和“原生应用程序”的感觉。
第 4 阶段：性能（优化）
- 延迟加载（列表）：
- 切勿一次渲染 1,000 个项目的列表。使用4(RN) 或5(Flutter) 仅渲染屏幕上的内容。
- 优化图像：
- 使用现代格式 (WebP) 和图像缓存。加载大图像会导致主线程崩溃。
- 避免重新渲染：
- 研究组件的生命周期。如果用户在输入中键入一个字母并且整个屏幕闪烁，则表明出现了问题。
第五阶段：发布和商店
- 图标和启动画面：
- 生成所有需要的尺寸（有几十个）。自动工具有很大帮助。
- 权限：
- 配置6(iOS) 和7。解释一下为什么你想要相机。苹果会拒绝没有明确理由请求许可的应用程序。
结论
创建混合应用程序比创建两个本机应用程序更快，但它需要纪律。如果您遵循此清单，您将确保您的最终用户甚至不会注意到幕后运行的技术。他只会知道该应用程序很好。
另请阅读
- 【什么是混合应用-结合真实案例一步一步8
- [混合应用程序是什么 - 分步快速指南9
- 【应用中的电池消耗：与真实案例的比较10
- 【应用中的电池消耗：比较和快速指南11
- 【Ios原生开发-初学者如何选择12
- [应用程序中的微交互：完整指南13