前段时间项目遇到一个需求：需要把我们做的原生微信小程序代码和客户用mpvue框架开发的小程序代码进行融合。也就是之前需要两个微信小程序来回跳转传输的，现在合并到一个小程序中。

开发之前查了一些资料，不管是微信原生还是mpvue框架都支持分包。但对于一个更熟于原生框架开发的来说，更想尝试一下自己的思路方法：

1. 在mpvue项目打包之前，修改mpvue项目的跳转逻辑

2. 对mpvue项目进行build打包

3. 把mpvue打包后的文件和原生小程序页面进行合并

4. 配置原生微信小程序app.json文件

思路有了，就开始干，扒代码。

mpvue文件

针对于没有进行npm run build打包的mpvue源文件进行修改：

• 修改appid：把appid修改成要合并后的appid

• 修改src文件下所有有关原来两个小程序跳转的方法（原方法可能是通过wx.navigateToMiniProgram进行小程序之间的跳转的，修改成小程序页面之间的跳转方法，比如：wx.navigateTo）

• 进行npm run build进行打包，这个会在dist文件夹下生成对应的打包文件（比如你提前设置好的打包命令：npm run build:wx，会在dist下面生成wx文件夹及对应打包后的文件）

融合原生小程序代码

要确定原生小程序pages下面的文件和mpvue项目pages文件下的文件没有命名重复的，也一定不能重复。

• 把mpvue打包后后的wx文件夹下面的common文件夹复制到原生小程序根目录下

• 把mpvue打包后的wx文件夹下的pages文件夹下面的文件复制到原生小程序pages文件夹下面

• 修改原生小程序app.json文件内容，配置“pages”:[]项，把新增的pages文件夹下的文件路径配置在app.json文件内

• 把mpvue打包后的wx文件夹下的app.js文件内容复制到原生小程序的app.js文件内

• 把mpvue打包后的wx文件夹下的app.wxss文件内容复制到原生小程序的app.wxss文件内

到这里，基本算是完成了，运行微信开发者工具看看你的项目如何。当然需要根据你的首页需求，来修改要展示的首页路径。