hello-uniapp：uni-app 官方示例合集 HBuilderX 与 CLI 运行指南
hello-uniapp 是 DCloud 官方 uni-app 框架的示例工程，一套代码同时发行到 iOS、Android、H5、微信/支付宝/百度/字节/QQ 等多个小程序平台，是学习 uni-app 跨端开发的最佳入门样例。
一、项目官方信息
| 项目 | 信息 |
|---|---|
| GitHub 仓库 | https://github.com/dcloudio/hello-uniapp |
| 官方文档 | https://uniapp.dcloud.net.cn |
| HBuilderX 下载 | https://www.dcloud.io/hbuilderx.html |
| 开源协议 | MIT |
| 主要语言 | Vue（67.7%） |
| Star 数 | 3k+ |
| 支持端 | iOS、Android、H5、多家小程序 |
二、官方图片
hello-uniapp 仓库社交预览图：
三、环境要求
- 方式一：HBuilderX（推荐，下载 App 开发版，内置环境、开箱即用）；
- 方式二：Node.js + Vue CLI（命令行创建）；
- 运行到微信小程序需配合微信开发者工具。
四、部署/接入步骤
方式 A：HBuilderX 可视化创建（推荐）
- 下载并安装 HBuilderX App 开发版（https://www.dcloud.io/hbuilderx.html ）；
- 在 HBuilderX 中导入 hello-uniapp 示例工程；
- 菜单「运行 → 运行到小程序模拟器 → 微信开发者工具」，即可在微信开发者工具中预览；
- 也可运行到 H5、Android、iOS 基座。
HBuilderX 内置相关环境，无需单独配置 Node.js，为 uni-app 做了专门强化。
方式 B：Vue CLI 创建
npm install -g @vue/cli
创建正式版 uni-app 项目：
vue create -p dcloudio/uni-preset-vue my-project
创建 alpha 版：
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
提示选择项目模板时，选择 hello uni-app 模板。
进入项目目录并运行到 H5：
cd my-project
npm run dev:h5
五、使用方法
一套代码多端发行
uni-app 可同时发行到 Android、iOS、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ 小程序、快应用、360 小程序等平台。hello-uniapp 示例覆盖跨端常用 API 与组件用法。
运行到微信小程序
- 在 HBuilderX 中菜单「运行 → 运行到小程序模拟器 → 微信开发者工具」；
- 首次运行需在微信开发者工具中设置「服务端口」并关联 HBuilderX；
- 即可预览示例在微信小程序中的效果。
更多资源
- 官方社区提问：https://ask.dcloud.net.cn/explore/
- 插件市场模板与示例：https://ext.dcloud.net.cn/
六、常见问题 FAQ
Q1：hello-uniapp 是什么？ uni-app 官方示例工程，一套代码同时发行到 iOS、Android、H5、多家小程序。
Q2：推荐哪种方式创建？ 推荐 HBuilderX，内置环境开箱即用；也可用 Vue CLI 命令行创建。
Q3：怎么运行到微信小程序？ HBuilderX 菜单「运行 → 运行到小程序模拟器 → 微信开发者工具」，配合微信开发者工具。
Q4：CLI 创建的命令是什么？
vue create -p dcloudio/uni-preset-vue my-project，选择 hello uni-app 模板。
Q5：支持哪些端？ Android、iOS、H5、微信/支付宝/百度/字节/QQ 小程序、快应用、360 小程序等。
Q6：遇到问题去哪问？ 官方社区 https://ask.dcloud.net.cn/explore/ ，欢迎提 issues。
七、跳转链接
- GitHub 仓库：https://github.com/dcloudio/hello-uniapp
- 官方文档：https://uniapp.dcloud.net.cn
- HBuilderX 下载：https://www.dcloud.io/hbuilderx.html
- 官方社区：https://ask.dcloud.net.cn/explore/