uni-app x初探

一、概述

uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。

uni-app x 是一个庞大的工程，它包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。

uts是一门类ts的、跨平台的、新语言。

uts在Android平台编译为kotlin、在iOS平台编译为swift、在鸿蒙next平台上编译为ArkTS、在Web和小程序平台编译为js。

在Android平台，uni-app x 的工程被整体编译为kotlin代码，本质上是换了vue写法的原生kotlin应用，在性能上与原生kotlin一致。

 

简单来说，uni-app x使用一套代码，就可以支持5大平台：Android，iOS，鸿蒙next，Web，微信小程序

官方文档：https://doc.dcloud.net.cn/uni-app-x/

二、HBuilderX

HBuilderX 是一款由 DCloud 开发的高效前端集成开发环境（IDE），专为现代 Web 和移动应用设计，支持跨平台开发（Windows/macOS）‌

HBuilderX也是官方推荐，开发uni-app x项目的ide开发软件。

 官方下载地址：https://www.dcloud.io/hbuilderx.html

这里有2个版本，分别是正式版，Alpha版。 Alpha版本更高一些，可以体验到最新功能。

 

所以我这里下载的是Alpha版本，下载完成后，直接解压，双击HBuilderX.exe即可运行。这个是纯绿色版本，不需要安装，解压就可以用了。

 三、项目创建

创建项目

1. 打开 HBuilderX
2. 点击菜单栏 文件 → 新建 → 项目
3. 在弹窗中选择：
   • 项目模板：uni-app x（注意不是 “uni-app”）
   • 项目名称：如 my-first-unix
   • 项目路径：选择本地存储位置
   • 选择框架：Vue 3 
4. 点击“创建”

 项目创建后，HBuilderX 会自动安装依赖（基于 pnpm）

项目结构初览

创建完成后，你会看到如下核心文件

my-first-unix/
├── App.uvue       # 根组件
├── index.html     # 首页
├── main.uts       # 入口文件（TS）
├── manifest.json  # 应用配置文件
├── pages          # 页面目录
├── pages.json     # 页面路由配置
├── static         # 存放静态资源
└── uni.scss       # 全局样式

 四、运行项目

运行到浏览器（H5）

选中项目根目录任意文件 → 运行 → 运行到内置浏览器

或点击工具栏绿色运行按钮

运行到 Android 模拟器

先启动安卓模拟器，我用的是MuMu模拟器，这个比较好用，打王者荣耀很顺手。

点击设置，ADB调试，开启本地连接

 打开cmd窗口，输入以下命令，连接MuMu模拟器

adb connect 127.0.0.1:7555

没有报错，表示连接成功

 

打开 HBuilderX，运行→ 运行到手机或模拟器→ 运行到Android App基座

这里出现的vivo手机，就是MuMu模拟器

点击运行之后，就会开始编译apk文件。日志输出如下：

 此时，模拟器就会自动打开app程序

 第一次编译比较慢，因为要安装一些组件，后续编译会快一些。

 

至此，结束！