uni-app简介+HBuilderX使用

文章目录

• uni-app的由来
• 什么是uniapp
• 开发工具的选择
• • HBuilderX安装
  • 创建uni-app
• 多端运行是指哪些
• • [1. 移动端原生应用](#1. 移动端原生应用)
  • • 举例
    • 运行
    • 发布
  • [2. 小程序平台​](#2. 小程序平台)
  • • 举例
    • 运行
    • 发布
  • [3. Web 端（H5）​​](#3. Web 端（H5）)
  • • 举例
    • 运行
  • [4. 快应用​​](#4. 快应用)
  • [5. 桌面端应用​​](#5. 桌面端应用)
  • [​6. 其他扩展平台​​](#6. 其他扩展平台)
• 插件安装
• • CodeGeeX插件 (接入ai)
  • scss插件
  • 如何卸载插件
• 修改编辑器的基本设置
• 主题(背景色)切换
• 目录结构
• [使用 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手机为例

1. 开启手机开发者选项：
   • 进入手机 设置 → 关于手机 → 软件版本号（连续点击 7 次启用开发者模式）。
   • 返回 设置 → 系统管理 → 开发者选项，开启 USB 调试 和 USB 安装（部分机型需额外开启"USB 调试安全设置"）。
2. 数据线连接电脑：
   使用USB 数据线连接 IQOO Neo9 与电脑，选择 文件传输/传输照片 模式，避免仅充电模式导致无法识别。
3. 在 HBuilderX 中打开项目：

   • 选择 UniApp 项目根目录。

   • ​​选择运行设备​​：

   • 点击工具栏 ​​运行 → 真机运行 → 选择设备​​（列表中需出现 IQOO Neo9 或对应型号）。
     

   • ​​自动编译与安装​​：

   • HBuilderX 会将项目编译为 Android APK，并自动安装到手机。首次运行可能需在手机上确认 ​​允许安装未知来源应用​​。

发布

使用安卓手机为例

1. 在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：
   
2. 出现如下界面，点击打包即可。
   注意 如果你长时间不登录，再次打包的时候需要手机登录一下。登陆后还需要验证手机号，即验证两次。
3. 出现下面内容说明打包成功。
   

2. 小程序平台​

举例

UniApp 支持几乎所有主流小程序生态：

​​国内主流平台​​：微信小程序、支付宝小程序、百度小程序、字节跳动小程序（抖音/头条）、QQ 小程序、快手小程序、钉钉小程序、360 小程序。

​​其他平台​​：京东小程序、飞书小程序等。

运行

1. 首先你需要下载微信开发者工具：可参考我之前的博客，然后对微信小程序进行设置。
   
   

2. 填写自己的微信小程序的 AppID：
   

3. 在 HBuilderX 中，配置"微信开发者工具"的安装路径 ：也就是带有微信开发者工具.exe那个路径
   

4. 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
   

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。

发布

1. 申请微信小程序AppID，参考：微信教程。
2. 在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 组件），实现多项目数据融合。

注意事项​​

1. 平台差异处理：需使用条件编译（如 #ifdef MP-WEIXIN）适配不同平台的 API 或 UI。
2. 发布流程差异：
   • 小程序需注册平台账号、配置 AppID 并提交审核。
   • iOS 应用需 Apple 开发者账号及证书。
   • H5 部署需配置服务器路由（如 Nginx 重定向至 index.html）。

插件安装

插件市场：https://ext.dcloud.net.cn/

CodeGeeX插件 (接入ai)

https://ext.dcloud.net.cn/plugin?id=15497

1. 点击下载
   
2. 去登录，如果没有账号就去注册一个
   
3. 输入账号密码
   
4. 登录后继续下载
   
5. 确认版本，如果版本不匹配请下载最新版的HBuilderX
   
6. 允许外部链接
   
7. 允许安装
   
8. 注册CodeGeeX账号即可使用

scss插件

为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，安装过程如上。

如何卸载插件

点击卸载即可

修改编辑器的基本设置

操作步骤：工具 -> 设置 -> 打开 Settings.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 项目，默认包含如下目录及文件：

┌─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 忽略文件，并配置如下：

# 忽略 node_modules 目录
/node_modules
/unpackage/dist

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

第二步

打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库：

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

第三步

打开终端后，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库：

git init

将所有文件都加入到暂存区：

git add .

本地提交更新：

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