文章目录
- uni-app的由来
- 什么是uniapp
- 开发工具的选择
- 多端运行是指哪些
- 插件安装
- 修改编辑器的基本设置
- 主题(背景色)切换
- 目录结构
- [使用 Git 管理项目](#使用 Git 管理项目)
- 总结
uni-app的由来
uni,可以理解为应为单词unity,是统一的意思。
很多人以为小程序是微信先推出的,其实,DCloud才是这个行业的开创者。
DCloud于2012年开始研发小程序技术,优化webview的功能和性能,并加入W3C和HTML5中国产业联盟,推出了HBuilder开发工具,为后续产业化做准备。
在2015年9月,DCloud推进微信团队开展小程序业务,演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例,以及分享了webview体验优化的经验。
微信团队经过分析,于2016年初决定上线小程序业务,但其没有接入联盟标准,而是订制了自己的标准。
DCloud持续在业内普及小程序理念,推进各大流量巨头,包括手机厂商,陆续上线类似小程序/快应用等业务。
部分公司接入了联盟标准,但更多公司因利益纷争严重,标准难以统一。
技术是纯粹的,不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件正确的事情。
造成混乱的局面非DCloud所愿。于是我们决定开发一个免费开源的框架。
既然各巨头无法在标准上达成一致,那么就通过这个框架为开发者抹平各平台差异。
这,就是uni-app的由来。
什么是uniapp
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、鸿蒙Next、Web(响应式)、以及各种小程序(微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书)、快应用、鸿蒙元服务等多个平台。即 一套代码多端运行
。
uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
开发工具的选择
HBuilderX安装
可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。
开始之前,开发者需先下载安装如下工具:
HBuilderX:官方IDE下载地址
HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。
创建uni-app
在点击工具栏里的文件 -> 新建 -> 项目(快捷键Ctrl+N):
选择uni-app
类型,输入工程名,选择模板,点击创建,即可成功创建。
uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例,还有一个重要模板是 uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。
多端运行是指哪些
1. 移动端原生应用
举例
iOS:编译为原生应用(IPA 文件),可在 iPhone/iPad 上运行,需通过 App Store 审核发布。
Android:编译为原生应用(APK 文件),支持各类 Android 设备,可发布至 Google Play 或第三方应用商店。
运行
以我的IQOO手机为例
- 开启手机开发者选项:
- 进入手机 设置 → 关于手机 → 软件版本号(连续点击 7 次启用开发者模式)。
- 返回 设置 → 系统管理 → 开发者选项,开启 USB 调试 和 USB 安装(部分机型需额外开启"USB 调试安全设置")。
- 数据线连接电脑:
使用USB 数据线连接 IQOO Neo9 与电脑,选择 文件传输/传输照片 模式,避免仅充电模式导致无法识别。 - 在 HBuilderX 中打开项目:
-
选择 UniApp 项目根目录。
-
选择运行设备:
-
点击工具栏 运行 → 真机运行 → 选择设备(列表中需出现 IQOO Neo9 或对应型号)。
-
自动编译与安装:
-
HBuilderX 会将项目编译为 Android APK,并自动安装到手机。首次运行可能需在手机上确认 允许安装未知来源应用。
-
发布
使用安卓手机为例
- 在HBuilderX工具栏,点击发行,选择原生app-云端打包,如下图:
- 出现如下界面,点击打包即可。
注意 如果你长时间不登录,再次打包的时候需要手机登录一下。登陆后还需要验证手机号,即验证两次。
- 出现下面内容说明打包成功。
2. 小程序平台
举例
UniApp 支持几乎所有主流小程序生态:
国内主流平台:微信小程序、支付宝小程序、百度小程序、字节跳动小程序(抖音/头条)、QQ 小程序、快手小程序、钉钉小程序、360 小程序。
其他平台:京东小程序、飞书小程序等。
运行
-
首先你需要下载微信开发者工具:可参考我之前的博客,然后对微信小程序进行设置。
-
填写自己的微信小程序的 AppID:
-
在 HBuilderX 中,配置"微信开发者工具"的安装路径 :也就是带有微信开发者工具.exe那个路径
-
在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。
注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。
发布
- 申请微信小程序AppID,参考:微信教程。
- 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信",输入小程序名称和appid点击发行即可
3. Web 端(H5)
举例
生成响应式网页应用,可在浏览器中直接访问,支持路由配置、跨域处理及部署到 CDN/服务器。
适配场景:PC 网页、移动端 H5 页面、嵌入其他应用的 WebView。
运行

4. 快应用
支持华为、小米、OPPO、vivo 等设备的快应用平台,实现"即点即用"的轻量化体验。
5. 桌面端应用
Windows/macOS:编译为原生桌面应用(EXE/DMG 文件),可在对应操作系统运行。
6. 其他扩展平台
React Native:通过插件支持将 UniApp 项目转换为 React Native 代码,进一步扩展原生能力。
混合开发:H5 页面可嵌入原生 App(如通过 WebView 组件),实现多项目数据融合。
注意事项
- 平台差异处理:需使用条件编译(如 #ifdef MP-WEIXIN)适配不同平台的 API 或 UI。
- 发布流程差异:
- 小程序需注册平台账号、配置 AppID 并提交审核。
- iOS 应用需 Apple 开发者账号及证书。
- H5 部署需配置服务器路由(如 Nginx 重定向至 index.html)。
插件安装
插件市场:https://ext.dcloud.net.cn/
CodeGeeX插件 (接入ai)
https://ext.dcloud.net.cn/plugin?id=15497
- 点击下载
- 去登录,如果没有账号就去注册一个
- 输入账号密码
- 登录后继续下载
- 确认版本,如果版本不匹配请下载最新版的HBuilderX
- 允许外部链接
- 允许安装
- 注册CodeGeeX账号即可使用
scss插件
为了方便编写样式(例如:<style lang="scss"></style>
),建议安装 scss/sass 编译
插件。插件下载地址:
https://ext.dcloud.net.cn/plugin?name=compile-node-sass
进入插件下载页面之后,点击右上角的 使用 HBuilderX 导入插件
按钮进行自动安装,安装过程如上。
如何卸载插件

点击卸载即可
修改编辑器的基本设置
操作步骤:工具 -> 设置 -> 打开 Settings.json 按需进行配置
打开左边栏 的源码视图 将下列配置粘贴到用户设置即可
json
{
"editor.colorScheme": "Default",
"editor.fontSize": 12,
"editor.fontFamily": "Consolas",
"editor.fontFmyCHS": "微软雅黑 Light",
"editor.insertSpaces": true,
"editor.lineHeight": "1.5",
"editor.minimap.enabled": false,
"editor.mouseWheelZoom": true,
"editor.onlyHighlightWord": false,
"editor.tabSize": 2,
"editor.wordWrap": true,
"explorer.iconTheme": "vs-seti",
"editor.codeassist.px2rem.enabel": false,
"editor.codeassist.px2upx.enabel": false
}
主题(背景色)切换
操作步骤:工具 -> 主题
目录结构
一个 uni-app 项目,默认包含如下目录及文件:
text
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置小程序的全局样式、生命周期函数等
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
使用 Git 管理项目
本地管理
第一步
1 在项目根目录中新建 .gitignore
忽略文件,并配置如下:


json
# 忽略 node_modules 目录
/node_modules
/unpackage/dist
注意:由于我们忽略了 unpackage 目录中仅有的 dist 目录,因此默认情况下, unpackage 目录不会被 Git 追踪
此时,为了让 Git 能够正常追踪 unpackage 目录,按照惯例,我们可以在 unpackage 目录下创建一个叫做.gitkeep
的文件进行占位.gitkeep和dist平级

第二步
打开终端,切换到项目根目录中,运行如下的命令,初始化本地 Git 仓库:

打开目录后,在空白地方 Shift + 鼠标右键

第三步
打开终端后,切换到项目根目录中,运行如下的命令,初始化本地 Git 仓库:
bash
git init
将所有文件都加入到暂存区:
bash
git add .
本地提交更新:
bash
git commit -m "init project"
远程管理
请参考我的 提交至远程仓库 的专栏
总结
HbuilderX官网下载:https://dcloud.io/hbuilderx.html
插件市场:https://ext.dcloud.net.cn/
uniapp语法:https://uniapp.dcloud.net.cn/
微信小程序注册:https://mp.weixin.qq.com/
微信开发者工具下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html