一个经过N代程序员努力的代码库
我们有一个原生的微信小程序项目，该项目的代码是项目初期从外包公司买下来的，经过三年多N代开发人员的不懈努力，代码已经腐化的非常严重了。无论增加新功无论是修复bug，只要是对代码进行改动，就会出现各种莫名其妙的bug，而且问题非常难以排查定位。里面存在着大量无用的代码逻辑，还有被注释掉的代码。对这个代码库进行维护简直就是噩梦一样。所以，我们要对小程序项目进行重构。
重构的原则
综合目前前端团队技术栈等多方面原因，我们选择了使用uniapp+vue2 作为重构的框架。最终目标是：将现有原生微信小程序代码逐步重构为使用uniapp框架的实现。重构的过程中要满足以下原则：
- 不能影响现有小程序功能的使用。
- 不能阻碍新功能的添加和bug修复。
- 重构后的代码要为跨端小程序打包做准备。
技术选型
uniapp官方提供了三种“老项目中引入uniapp”的方式：
-
方式1：把原生小程序转换为uni-app源码。
-
方式2：新建一个uni-app项目，把原生小程序的代码变成小程序组件，进而整合到uni-app项目下。
-
方式3：原生开发的小程序仍保留，部分新功能使用uni-app开发。
- 使用发行为混合分包的功能
- 三方开发者插件
我们担心使用方式1转换后的代码出现问题后，会直接导致问题排查成本的增加。因为我们的代码是如此的脆弱。 方式2的改动成本比较大。方式3比较符合我们的要求场景，同时我们也想逐步替换重新实现老代码，因此我们选择了方式3的第二种方式 三方开发者插件。
uniapp2wxpack 配置
uniapp2wxpack是一个可以使uni-app和原生小程序进行混合开发的插件，详细使用方式可以去uniapp2wxpack查看。
我们使用这个插件的极端混合方式进行开发。对原生小程序项目无需做任何改变。 极端混合模式可以将完整的微信原生小程序项目，保证目录结构不变的情况下混合（merge）到uni-app项目中。
混合规则：
- 当原生文件路径与uni打包后的文件路径冲突时，以uni打包后的文件为优先
- 根目录的
app.js和app.wxss以原生项目的文件路径为优先，并且会做特殊的混合处理，将uni打包后的app.js和app.wxss与原生的文件混合
仅需要配置projectToSubPackageConfig.js即可，并且项目中的pack.config.js的packPath属性也会自动变成空字符
// projectToSubPackageConfig.js
module.exports={
// 微信原生小程序目录
mainWeixinMpPath: 'mainWeixinMp',
// uni项目输出的分包在微信原生小程序中的路径
subPackagePath: '',
// uni项目的App.vue中初始设置的处理方式，默认是relegation(降级模式)，[top(顶级模式) / none(丢弃)]
appMode: 'top',
// 如果微信原生小程序目录中的目录名称合uni项目输出的目录名相同，是否融合处理，默认不融合处理，直接忽略原生小程序里的目录，merge以uni项目优先
mergePack: true
}
这样原生小程序就完整的迁移成了uni-app项目,我们要重构某个组件或者页面的时候直接在uniapp项目中创建同名文件进行开发即可。
