类似于"微前端"技术方案
微前端是 将前端应用拆分为多个独立子应用 ，由一个主应用统一调度、集成、路由联动的架构模式；
pc端成熟的技术方案有：iframe、qiankun、wujie、Module Federation 模块联邦等，我们目前使用的是wujie，关于wujie在下一篇我们再讨论，现在主要讲uniapp如何实现类似的技术。
嵌套webview
以下示例支持非H5端，其中app端webview支持本地网页和远程网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下，而小程序只支持远程网页，且需要在小程序后台配置业务域名，H5端请使用Iframe，通过window.message和window.postMessage
类似于iframe，就是子项目都是H5，主应用通过webview渲染页页面
主应用通过网页链接向子应用传递参数：juejin.cn/post/691934...?id=1&name=demo
子应用获取主应用参数：location.href.split('?').pop(),然后再解析
子应用传递参数给主应用需要以下步骤：
- 子应用引入引入uni.web-view.js：gitcode.com/dcloud/uni-...
- 子应用通过uni.postmessage 向子应用发送通知
- 主应用监听webview的message事件接受子应用参数
以下是代码示例：
<template>
<view>
<webview ref='web' :src='url' @onPostMessage='handlePostMessage'></webview>
</view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
methods: {
handlePostMessage(e) {
uni.showModal({
content: JSON.stringify(e.detail),
showCancel: false
})
}
}
}
</script>
uni小程序
我们目前落地的开发方案是原生提供容器，即原生统一处理公共逻辑，并提供各业务应用的入口，然后各业务通过uniapp开发各自的子应用，子应用打包成wgt，原生通过引入uni小程序SDK和各个子应用的wgt进行通信，原生提供公共插件供子应用调用，关于app和wgt通信的方式参考官网文档：nativesupport.dcloud.net.cn/
下面说下，如何将unipp打包为wgt项目
- hbuilder编辑器
这个是大家常用的打包模式
- vue cli项目通过命令行打包
官方说明使用npm run build:app-plus会在/dist/build/app-plus下生成app打包资源。如需制作wgt包，将app-plus中的文件压缩成zip（注意：不要包含app-plus目录），再重命名为${appid}.wgt， appid为manifest.json文件中的appid。
我们可以写node版本简化手动操作,根目录下创建build.js文件，以下是示例代码：
const fs = require('fs');
const path = require('path');
const archiver = require('archiver');
const manifest = require('../src/manifest.json');
// 工具函数：路径解析（提前声明，避免变量提升问题）
const resolve = (dir) => path.resolve(__dirname, dir);
// 配置常量
const APP_ID = manifest.appid;
const SOURCE_DIR = '../dist/build/app-plus';
const OUTPUT_FILE = `../dist/${APP_ID}.wgt`;
const OUTPUT_PATH = resolve(OUTPUT_FILE);
// 创建压缩实例（最高压缩等级）
const archive = archiver('zip', {
zlib: { level: 9 }
});
// 创建输出流
const output = fs.createWriteStream(OUTPUT_PATH);
// 管道连接
archive.pipe(output);
/**
* 递归添加目录/文件到压缩包
* @param {string} dir 源目录
*/
function addFilesToArchive(dir) {
const absPath = resolve(dir);
// 判断目录是否存在
if (!fs.existsSync(absPath)) {
console.error(`❌ 目录不存在：${absPath}`);
process.exit(1);
}
const items = fs.readdirSync(absPath);
items.forEach(item => {
const itemPath = path.join(absPath, item);
const stat = fs.lstatSync(itemPath);
if (stat.isDirectory()) {
// 目录：直接添加（保留结构）
archive.directory(itemPath, item);
} else if (stat.isFile()) {
// 文件：流方式添加
archive.file(itemPath, { name: item });
}
});
}
// 事件监听（更完善的成功/失败提示）
output.on('close', () => {
const size = (archive.pointer() / 1024 / 1024).toFixed(2);
console.log(`\n✅ 打包完成：${APP_ID}.wgt`);
console.log(`📦 文件大小：${size} MB`);
console.log(`📍 输出路径：${OUTPUT_PATH}\n`);
});
archive.on('error', (err) => {
console.error(`\n❌ 打包失败：${err.message}\n`);
throw err;
});
// 执行打包
try {
addFilesToArchive(SOURCE_DIR);
archive.finalize();
} catch (err) {
console.error(`\n💥 执行异常：${err.message}\n`);
process.exit(1);
}