uniapp x如何使用

Uniapp X 具体怎么使用？有没有详细的教程或者示例代码可以参考？我刚接触这个框架，不太清楚如何开始配置和开发项目，求大神指点！

2 回复

UniApp X 是基于 Vue 3 的跨端开发框架。使用步骤：

  1. 安装 HBuilderX 开发工具
  2. 新建 UniApp X 项目
  3. 编写 .uvue 文件（类似 Vue 单文件组件）
  4. 通过条件编译实现多端适配
  5. 真机调试/云打包

支持编译到小程序、App、H5 等多端。语法接近 Vue 3 + TypeScript，学习成本较低。


UniApp X 是 UniApp 的全新版本，基于 Vue 3 和 TypeScript 开发，支持跨平台应用（如小程序、H5、App 等）。以下是 UniApp X 的基本使用步骤和核心概念：

1. 环境搭建

  • 安装 HBuilderX（官方 IDE）：从官网下载并安装，选择 App 开发版。
  • 创建项目：打开 HBuilderX → 新建 → 项目 → 选择 “UniApp X” 模板。

2. 项目结构

  • pages：页面文件目录，每个页面由 .uvue 文件（类似 Vue 单文件组件）组成。
  • static：存放静态资源（如图片）。
  • manifest.json：应用配置，如平台设置、AppID 等。
  • pages.json：页面路由和样式配置。

3. 编写页面

在 pages/index/index.uvue 中编写代码，示例：

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="changeText">点击修改</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Hello UniApp X!')
const changeText = () => {
  message.value = '文本已更新！'
}
</script>

<style>
.container {
  padding: 20px;
}
</style>
  • 使用 <script setup> 简化组合式 API。
  • 样式支持 CSS 标准，默认使用 rpx 适配不同屏幕。

4. 运行与调试

  • 小程序：在 HBuilderX 中点击 “运行” → 选择平台（如微信小程序），需提前配置 AppID。
  • H5：直接运行到浏览器。
  • App：连接手机或模拟器运行。

5. 常用功能

  • 路由跳转：使用 uni.navigateTo API。
  • 网络请求：通过 uni.request 发送 HTTP 请求。
  • 条件编译：用 #ifdef 区分平台，例如：
    <view>
  #ifdef APP-PLUS
  <text>仅 App 端显示</text>
  #endif
</view>

6. 注意事项

  • UniApp X 要求使用 TypeScript，需熟悉 Vue 3 语法。
  • 部分 API 和组件可能与旧版 UniApp 不同，参考官方文档更新。

通过以上步骤，你可以快速开始开发跨平台应用。详细内容请查阅 UniApp X 官方文档。

回到顶部