uni-app和原生小程序混合项目实战踩坑记

项目背景

接到一个项目，开发一个商城小程序，其实挺常规的，直接沿用之前的模板开发即可，但是 这个项目又存在一些特殊的，就是我们开发的商城小程序需要嵌入到对方已存在上线的小程序中。 这就存在小程序之间的混合开发，两个团队开发模式的磨合等等问题，所以想记录下来，对遇到 同样问题的小伙伴们，提供一点点参考。

双方团队的情况

1. 我们团队开发的小程序，采用的是uni-app开发的整个商城。
2. 对方团队的小程序，采用类似原生，开发的支付宝小程序。
3. 需要将双方的代码合并成一个整体，放到同一个小程序中，进行上线。
4. 在对方团队小程序中，添加一个入口，点击这个入口，跳转到我们开发功能代码中。

从这上面我们可以得出，我们开发的功能作为一个子包，对方团队开发的小程序作为主包。 我们需要混合嵌入到对方团队开发的小程序中。根据上述的需求，我们选用了uni-app和 原生小程序混合开发方案参考文档，前点击

uni-app提供的混合开发流程文档

方式1：把原生小程序转换为uni-app源码。有各种转换工具，详见

方式2：新建一个uni-app项目，把原生小程序的代码变成小程序组件，进而整合到uni-app项目下。uni-app支持使用小程序wxml组件，参考

方式3：原生开发的小程序仍保留，部分新功能使用uni-app开发。

由于对方小程序的代码，我们无权做任何操作，所以排除掉方式1和方式2，我们最终采用的方式3的方式。

具体混合开发步骤

我们看看一起看看方式3开发时，开发的流程以及需要注意的事项：

步骤1：在 cli 中，执行命令：npm run build:mp-weixin --subpackage=sub1 或 yarn build:mp-weixin --subpackage=sub1

这个意思我们正常采用uni-app进行项目的开发，采用上述命令（其中--subpackage=你的包名称），就会在 dist的不同平台目录下（如下图），生成对应的子包目录文件夹，需要将这个生成的目录导入到，对方主体小程序中，进行混合

步骤2：此时的我们再看看，-subpackage打包以及主包的目录结构是怎么样的，又该如何将双方的代码混合在一起呢，以保证项目的正确运行呢

我们发现，subpackage打包的方式和非subpackage(即npm run build:xx-platform)区别在于，非子包打包方式多了 app.json, app.js这两个文件，而common, app.acss等都是同时存在。

步骤3：具体目录混合过程

在混合开始，我们先看看uni-app官方提供混合建议：

1. 开发时需要将资源(图片，css，js等)、页面的绝对路径调整为相对路径，否则打包到原生小程序中时，可能出现路径查找错误。
2. 需要自己把页面或分包配置添加到已有小程序的app.json中。

对于第一条，很好理解，不需要过多解释。经过实践下来，采用绝对路径也没有什么问题。 即在我们采用uni-app开发的小程序中，利用类似@/xx路径的资源链接，合并到主包的时候，没有任何报错。

对于第二条，需要我们的项目，融合到对方的项目中，可以写一个脚本，来处理这些事情，具体的涉及的就是以下几点。

• 子包build之后的目录，融合到对方小程序中
• page.json即页面路由合并，由于我们是把整个build之后的目录进行融合。而build之后没有路由文件，所以我们需要提供一个子包的路由，合并到对方的page.json路由中去。
• 子包build之后生成的app.acss，是全局样式，我们需要和对方的app.acss进行合并成一个文件，其中需要注意样式覆盖问题。

基本做到以上几步，就可以大功告成了，剩下的就是一些细节的调整了。

混合中涉及的通信问题

混合好了，不一定就大功告成了，如果主包和子包涉及通信的话，该怎么处理呢？下面这些方法可供参考。

1. 通过小程序的getApp()全局对象
2. 在主包onLaunch启动的时候，子包的App的onLaunch方法也会调用，如果需要全局调用某些方法，可以在这里进行操作
3. 如果需要等主包某些状态更新，通知子包某些状态更新，可以采用uni.$emit, uni.$on来进行全局事件分发处理。

结尾

如有错误，恳请指正。