uniapp嵌入小程序
如何在Uniapp中嵌入小程序
Uniapp支持将项目编译为微信小程序、支付宝小程序、百度小程序等平台。嵌入小程序的核心在于配置和编译步骤。
配置manifest.json
在项目根目录的manifest.json文件中,配置小程序相关设置。找到"mp-weixin"或对应平台字段,填写小程序的AppID和其他必要参数。示例:
"mp-weixin": {
"appid": "你的微信小程序AppID",
"setting": {
"urlCheck": false
}
}
配置pages.json
在pages.json中设置小程序的页面路由和窗口样式。确保页面路径与小程序规范一致:
{
"pages": [
{
"path": "pages/index/index",
"style": { "navigationBarTitleText": "首页" }
}
]
}
编译为小程序 使用HBuilderX或命令行工具将项目编译为小程序。在HBuilderX中,选择菜单栏"发行"->"小程序-微信",或使用命令行:

npm run dev:mp-weixin # 开发环境
npm run build:mp-weixin # 生产环境
小程序目录结构
编译后会在项目根目录生成dist/dev/mp-weixin或dist/build/mp-weixin文件夹。该目录结构符合微信小程序规范,可直接用微信开发者工具导入。
调试与发布 使用对应平台的开发者工具(如微信开发者工具)打开生成的小程序目录。在工具中进行预览、调试,最后通过平台后台提交审核发布。
注意事项
平台差异处理 不同小程序平台API存在差异,需要使用条件编译。示例:

// #ifdef MP-WEIXIN
wx.login()
// #endif
// #ifdef MP-ALIPAY
my.getAuthCode()
// #endif
分包加载优化
对于较大项目,建议使用小程序分包功能。在pages.json中配置:
"subPackages": [{
"root": "subPackageA",
"pages": [
{"path": "page1", "style": {}}
]
}]
生命周期适配
小程序和Uniapp生命周期略有不同。注意onLoad、onShow等生命周期函数的平台特定行为,必要时使用uni.onAppShow等全局监听。
组件使用限制 避免使用小程序平台不支持的组件,部分浏览器专用组件(如video)在小程序中需要按平台规范使用。
API权限配置 部分小程序API需要提前在对应平台后台申请权限,并在manifest.json中声明requiredPrivateInfos字段。






