uni-app 与小程序原生项目混合开发方案概述

2,889 阅读4分钟

简述

使用 uni-app 或者 Taro 等其他跨端框架来进行小程序项目开发,往往能够极大的提高开发效率。但这个高效的定义往往是针对于从零搭建的新项目,而那些已经存在并发布了的小程序原生项目,想和此类的跨端框架再进行结合开发,结果往往会不尽如人意。经过团队内部的多次实践,对于部分实际场景(不涵盖所有)我们有了如下一些结合开发方案。

uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

方案背景

我们需要快速开发一个新的小程序项目,跨端框架被指定采用 uni-app 框架进行开发。同时我们还收到了 5 个各自独立的原生小程序项目,要求是这一次新项目的开发,需要将目前的所有小程序做一个整合。

那么大致的方案有如下几种:

1、新项目采用 uni-app 跨端框架开发,而老项目保持不变(保持独立小程序发布),新项目中添加入口,能够跳转到各个已存在的老项目。

2、新项目采用 uni-app 跨端框架开发,并将所有老项目的内容,通过 uni-app 框架重写,达到统一技术规范的整体项目。

3、新项目采用 uni-app 跨端框架开发,通过自动化脚本,将老项目内容合并到新项目中,达到统一发布的整体项目。

方案决策

方案 1 必然是成本和风险最小,技术难度最低,效率最高的。但是最终上级需求是,需要将多个小程序整合为一个小程序,降低年费,运行成本。

方案 2 在技术层面就被 pass 了。你说啥?把别人的所有老项目都重写一遍,需求文档有吗?时间有吗?不高兴写,谁爱做谁拿去做。

那么只能采用方案 3 了,混合开发,没的挑了,而且也还算合情合理。

架构

通过比较充分的调研和实践,目前 uni-app 框架与原生小程序混合开发,还无法做到很好的结合,所以需要采取 uni-app 编译后再与原生小程序合并的方式。具体需要注意细节有如下几点:

1、分包结构:uni-app 开发的新项目需要作为主包,而所有已存在的原生小程序包以分包的形式接入(当然 uni-app 项目内部内容依然可以拆分包,原生小程序内容也可继续拆分包)。

2、提取全局逻辑:所有原有小程序逻辑中,原来注册在 app.js 中的应用级方法需要合并到 uni-app 框架开发的主包逻辑上。原因无他,分包项目不再具有小程序 app 应用级别配置文件,只有在主包中才可以设置小程序 app 应用级别配置。所以原有小程序 app 应用级别的功能内容都需要提取注入到主包(uni-app 项目) app.js 上处理。

3、分包限制:每一个分包限制可以关注微信官方文档,主要注意单个分包大小限制为 2M,分包之间逻辑不可互相引用。

4、资源路径:因为通过自动化合并操作后,原生小程序的目录结构会有所调整,需要注意小程序中资源的引用路径,应改为相对路径或在线资源(当然通过自动化命令,可以做到路径匹配替换,也还可以做很多特殊的操作)。

合并流程简述

主要操作步骤如下:

1、uni-app 项目进行小程序端编译,并输出到 dist 目录。

2、执行自动化脚本。

  • 第一步:将 uni-app 输出的小程序内容,拷贝到预上传目录 XXX 中。
  • 第二步:将原生的小程序项目的指定内容,以分包的结构目录拷贝到预上传目录 XXX 中。
  • 第三步:将 uni-app 项目输出的 app.json 配置文件,与原生小程序项目 app.json 文件中的路由配置进行校验并合并。
  • 第四步:通过微信开发者工具预览预上传目录,校验小程序功能是否完整,并最终发布到官方平台。

最后

技术方案都是以实际应用场景为技术背景,根据现有的技术架构,再因地制宜的制定和落地。上述描述的最终方案并不能适配所有的业务场景,同样上述的方案还要考虑项目合并的整体包大小,以及后期的业务拓展性,以及自动化工具的稳定和易用性也决定了上述方案在实际应用中的高效与否。

参考资料