背景
工行需求：
要将hiecho小程序小程序嵌入到合作方（第三方）的基于uni-app实现的小程序中
需要整个hiecho小程序嵌入到uni-app中
uni-app官网提供了三个思路
官网思路见：uniapp.dcloud.net.cn/hybrid.html
uni-app和原生小程序混合开发问题：
-
方式1：把原生小程序转换为uni-app源码，此时相当于融合两个uniapp小程序 ✅
-
原理：将微信小程序转换成uni-app的格式，有工具做80%的处理，但剩余的20%，比如具体路径、通信等，仍需要手工处理
-
转换工具：
- 文档 ask.dcloud.net.cn/article/357… 最近更新时间 24年7月
- 工具链接：ext.dcloud.net.cn/plugin?id=2…
- 实际使用中发现，利用npm安装工具去转换会卡死，尝试在HbuildX工具中通过插件转换能成功
-
实际使用时可以根据具体的场景，编写脚本，减少转换后的uni版小程序需要手动处理的内容
-
-
方式2：新建一个uni-app项目，把原生小程序的代码变成小程序组件，进而整合到uni-app项目下。uni-app支持使用小程序wxml组件，参考 ❌
- 微信小程序中涉及页面较多，目前没有工具能直接将页面转换成组件，工作量很大
-
方式3：原生开发的小程序仍保留，部分新功能使用uni-app开发。❌
- 将uni-app转成微信小程序，再做为分包引入到微信小程序中
- 场景是将微信小程序嵌入到uni-app，这个方法反了过来，因此不合适
-
【以下为非官方的方案】
-
方式4：直接将原生小程序作为分包融合❌
-
具体思路：
- uniapp打包后的dist本身也是符合微信规范的原生小程序，因此考虑直接在打包前引入原生小程序
- 不可以在uni-app打包后再处理分包，因为此时uniapp打包后的dist文件是混淆过的，可读性很差
-
官方文档没有提供该思路下的demo，不确定可行性如何（大概率是不行的）
-
-
方式5：直接重新开发一个uni-app版本的小程序❌
- 其实就是方式1的复杂化，不考虑
综上，建议采用方式1做融合
想要极少工作量去融合两个小程序是不可能的，只能简化融合的步骤
动手实践
目的
将hi-echo小程序以分包的形式嵌入一个空白的uni-app项目的全步骤
以hi-echo的首页为例子
完整转换步骤记录
hiecho的原生小程序项目名为virtual-human-mini-program
1.通过uni-app提供的工具，将hiecho小程序转换为uni-app格式
工具提供的转换方法有npm与IDE中通过插件转换，实际运行中，npm安装在本人mac会直接卡死，因此下面是IDE中转换的步骤
-
下载uni-app官方IDE HBuilderX，下载地址 www.dcloud.io/hbuilderx.h…
-
安装插件 miniprogram-to-uniapp v2插件 插件地址ext.dcloud.net.cn/plugin?id=2…
- 安装插件后，对着项目右键，点击miniprogram to uniapp v2即可转换
-
进行转化，对着项目右键即可
- 转换后，会在同级目录中多出_uni后缀的文件夹
2. 初始化一个uni-app项目，参考官网 uniapp.dcloud.net.cn/quickstart-…
依次运行两个命令
npm install -g @vue/clivue create -p dcloudio/uni-preset-vue uni_test- 选择默认模版
- 初始化后结构如下
运行npm run dev:mp-weixin后会出来一个dist文件夹，通过微信开发工具加载dist/dev/mp-weixin即可
3.将hiecho小程序的uni-app版本以分包形式引入（即步骤一生成出来的_uni后缀的文件夹）
需要整合两个uni-app下的main.js、app.vue文件等才能正常运行，并不能直接完美引入，下面是一些处理步骤
-
直接将hiecho的uni-app文件夹整个复制到src/下
-
更新原uni-app下的pages.json,添加subPackages中
- 注意，array下需要是obj的格式，不能直接用路径
{
...
"subPackages": [{
"root": "virtual-human-mini-program",
"pages": [{
"path": "pages/index/index",
"style": { "navigationBarTitleText": "首页" }
}]
}]
}
3. 更新appid（可选）
1. 由于创建的uni-app是示例模板，因此用hi-echo的appid替换
2. 替换到src/manifest.json/"mp-weixin"的appid下
3. 此时的目录结构如下
4. 
4. 改hiecho的'@/'依赖(后续可考虑使用脚本来替换)
1. hiecho原声小程序转为uni-app后，会新增很多'@/xxx‘的路径
2. 转换后的依赖是基于跟目录的，而实际上我们把他放到了新增uni-app项目的分包目录下，而不是根目录下，因此需要更新链接
3. 将形如`import swiperEle from '@/components/swiper'路径`更新为` `import swiperEle from ' **@/virtual-human-mini-program**/components/swiper';\`
4. demo中是通过vscode的全局替换匹配
5. !\[]\( "Guoheng Mai > 原生小程序嵌入uni-app实践 > image2024-12-18\_14-22-47.png")
5. 补充安装hiecho依赖
1. 将hi-echo的npm dependencies与devDepen复制到uni-app下的对应位置，并重新npm install即可
2. 
6. 修改module.exports的导出
1. 项目中发现，hi-echo的http相关文件都用了import A from xxx; 然后又module.exports={B}的形式，esm与module混用了
2. 将module.exports改为export.default
3. 因为只涉及了hiecho的pages/index/index页面，所以只针对涉及到的页面做了修改，页面多的话扩大修改范围即可
4. 
7. 需要将两个uni-app项目app.vue与main.js的文件合并一下
1. 到这一步，页面已经能显示出来了，但由于hiecho的uni版下的app.vue与main.js内容没加载，缺少依赖会报错
2. 合并main.js 见图片，简单复制过去即可
1. 
3. 合并app.vue文件
1. 与main.js文件类似，将hiecho下的手动合并过去。这里有些文件的路径要同步修改
1. !\[]\( "Guoheng Mai > 原生小程序嵌入uni-app实践 > image2024-12-18\_14-40-54.png")
8. 到这里，整个项目已经跑起来了。控制台有个api报错，暂时没再去看了
1. 样式相关的还没有做处理，不过大同小异。再增加hiecho的其他页面时步骤也是类似的
2. 针对hiecho下的分包，可以变成uni-app的分包来处理。改了后就和hiecho是平级的了
demo地址：xxx/uniapp_test_merge_hiecho.git>
最终效果
