4Ark
·
uni-app 与原生小程序混合开发方案
💡
原文中文，约6900字，阅读约需17分钟。
📝
内容提要
本文分享了在微信小程序项目中采用混合开发方案的经验，主要通过 uni-app 复用原生小程序页面以提升开发效率。介绍了 Vite 插件的实现，自动同步文件、管理资源和状态共享，解决了技术栈割裂问题。
🎯
关键要点
- 本文分享了在微信小程序项目中采用混合开发方案的经验，主要通过 uni-app 复用原生小程序页面以提升开发效率。
- 介绍了 Vite 插件的实现，自动同步文件、管理资源和状态共享，解决了技术栈割裂问题。
- 项目现状分析显示，重构原生项目的收益不高，因此选择混合开发的渐进式方案。
- uni-app 官方文档提供了几种与原生小程序混合开发的技术方案，但无法完全满足业务需求。
- 设计了一套更具通用性和可扩展性的混合开发方案，以方便快速适配应用。
- 核心思路是将原生小程序页面搬到 uni-app 项目的构建产物中，并注册页面。
- 开发 Vite 插件以自动化同步原生小程序页面和资源管理。
- 插件实现了构建阶段的自动同步、资源管理、配置更新和开发体验的提升。
- 状态共享方案利用小程序全局实例 getApp() 作为跨技术栈的通信桥梁。
- 将 uni-app 项目的构建产物集成到原生小程序项目中，并注册页面，支持分发到 APP、H5 等。
- 在 uni-app 项目的 package.json 中配置分包构建命令，支持多个分包。
- Vite 插件实现了构建阶段的文件同步和开发体验的热更新。
➡️
