新建 uni-app x 项目

菜单文件>新建>项目中，选择新建uni-app x项目。

可以选择空项目，也可以选择hello uni-app x示例项目，这个项目有几百个页面，演示了uni-app x的各种组件和API的用法。

这里新建一个 hello uni-app x 项目：

uni-app x 只支持vue3，无法勾选vue2。

uni-app x 的项目，manifest.json中会多一个节点 "uni-app-x" : {}。这是HBuilder识别项目类型的标记。如手动增删这个节点，需对项目点右键"重新识别项目类型"。

{
    "name" : "hello-uniapp x",
    "appid" : "__UNI__4517034",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "uni-app-x" : {
    }
}

uni-app x 的项目，在左侧项目管理器的图标是圆形的 U（之前是方型的U）。如下图：

创建的项目结构如下：

┌─uniCloud              云空间目录，支付宝小程序云为uniCloud-alipay，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb
│─components            符合vue组件规范的uni-app x组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.uvue      index页面
│  └─list
│     └─list.uvue       list页面
├─static                存放应用引用的本地静态资源（如图片、字体、音视频等）的目录，注意：静态资源都应存放于此目录  
├─uni_modules           存放uni_module 
├─platforms             存放各平台专用页面的目录
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 
|  └─ios                iOS原生资源目录 
├─harmonyConfig         HarmonyOS 端原生资源目录 
├─hybrid                App端存放web-view组件使用的本地html文件的目录，
├─wxcomponents          微信小程序平台wxml组件专用目录
├─unpackage             非工程代码，一般存放运行或发行的编译结果、App自定义基座。默认应配置git忽略
├─main.uts              Vue初始化入口文件
├─App.uvue              应用配置，用来配置App全局样式以及监听 
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，
├─AndroidManifest.xml   Android原生应用清单文件 
├─Info.plist            iOS原生应用配置文件 
└─uni.scss              内置的常用样式变量

运行时的UniApp实例

每个uni-app x应用启动，会有一个UniApp实例，通过全局API getApp() 获取。

运行项目

在HBuilder中，有顶部菜单、toolbar运行按钮、快捷键三种运行入口，选择要运行的目标平台运行项目即可。

运行入口

1、顶部运行菜单

2、toolbar运行按钮

3、快捷键

运行快捷键是：【Ctrl+r】

弹出的菜单还支持键盘快捷选择：

1. 按回车可以选中菜单的第一项；
2. windows下按数字可以快捷选中菜单项开头数字对应的菜单项。

运行平台

运行到APP

• uni-app x 运行到Android和iOS时，提供了真机运行基座（playground），该基座安装到手机后，可以把代码同步到手机上运行在这个基座上。（ 并且在修改代码后热刷新，在手机上及时看到效果。）

• uni-app x 运行到鸿蒙时，没有基座概念，直接调用本地的deveco出包。（当然也不支持热刷新）

标准基座和自定义基座

Android和iOS上的基座有标准基座和自定义基座的概念。

和 uni-app/5+App/wap2app 的基座不同，uni-app x的标准基座是一个绿色圆形的U（之前是方型H），基座名称默认为uni-app x（之前叫HBuilder）。

• uni-app x基座，只能运行uni-app x项目，包名是io.dcloud.uniappx；
• HBuilder基座，可以运行uni-app/5+App/wap2app，包名是io.dcloud.HBuilder。

标准基座

标准基座使用的图标、包名、证书以及配置的三方sdk的appkey等各种原生信息，都是DCloud的。

自定义基座

需要使用自己的包名、证书、原生配置以及变更三方原生sdk时，需在打包界面勾选打包自定义基座，打包后的自定义基座会放置在项目的unpackage目录下，然后在运行项目时的界面中可以选择自定义基座来运行。

uni-app x运行时，默认仅显示开发者代码和uni-app x框架的输出日志，在控制台右上角还可以选择开启原生日志。

接下来，运行本项目到内置浏览器，iPhone 6/7/8 运行效果如下：

运行到web

uni-app x 运行到浏览器时，编译基于vite，特点是按需编译。运行本项目到内置浏览器，运行效果如下：

‌页面开发‌

页面开发‌需要使用Vue.js语法来编写页面（.uvue文件），如下：
pages/index/index.uvue：

<template> 
<view class="container"> <text>Hello UniAppX!</text> </view> 
</template> 
<script> export default { data() { return {}; }, }; 
</script> 
<style>
	.container {
		width: 750rpx;
		background-color: white;
	}
</style>

• 组件化‌：封装可复用的组件（如components/Button.uvue）
• ‌状态管理‌：复杂项目可使用vuex或pinia
• ‌API调用‌：封装request工具类处理网络请求

调试与测试‌

本地调试‌

HBuilderX内置模拟器（浏览器或真机调试）。
使用console.log或Chrome DevTools。

‌多平台适配‌

可以通过条件编译来处理平台差异。

// #ifdef APP-PLUS
console.log('仅App端生效');
// #endif

‌‌性能优化‌

• 减少v-for嵌套、图片压缩等
• 跨端兼容‌：优先使用UniApp官方API，避免直接操作DOM
• ‌性能瓶颈‌：长列表使用<scroll-view>分页加载

构建

‌打包‌

• App：生成apk（Android）或ipa（iOS）。
• 小程序：通过开发者工具上传。
• Web：输出静态资源。