快速上手

本文将帮助您快速创建并运行一个 uni-app 项目，体验 uni-app 的开发流程。

环境准备

在开始之前，请确保您的开发环境已经安装了以下工具：

Node.js (>= 14.0.0)
包管理工具：npm（Node.js 自带）或 yarn
编辑器：推荐使用 HBuilderX（官方IDE，内置相关环境）或 VS Code

创建项目

方式一：使用 HBuilderX 可视化界面创建（推荐新手）

下载并安装 HBuilderX
打开 HBuilderX，点击顶部菜单栏的 文件 -> 新建 -> 项目
在弹出的窗口中选择 uni-app，填写项目名称，选择默认模板
点击 创建 按钮完成项目创建

HBuilderX创建项目

方式二：使用命令行创建（适合有经验的开发者）

全局安装 Vue CLI（如果已安装可跳过）

bash

npm install -g @vue/cli

安装 uni-app 模板

bash

npm install -g @dcloudio/vue-cli-plugin-uni

创建 uni-app 项目

bash

# 创建默认模板项目
vue create -p dcloudio/uni-preset-vue my-project

# 或者使用交互式命令选择模板
vue create --preset dcloudio/uni-preset-vue my-project

项目结构

创建完成后，您将得到一个基本的 uni-app 项目，其目录结构如下：

│  App.vue                         # 应用入口文件
│  index.html                      # H5 入口页面
│  main.js                         # 项目入口文件
│  manifest.json                   # 应用配置文件
│  pages.json                      # 页面配置文件
│  uni.scss                        # 全局样式变量
│  
├─pages                            # 页面文件夹
│  └─index
│      index.vue                   # 示例页面
│      
├─static                           # 静态资源目录
│      logo.png                    # 示例图片
│      
└─unpackage                        # 打包目录
    └─dist
        ├─dev
        │  └─mp-weixin             # 微信小程序开发版
        └─build
            └─h5                   # H5 正式版

运行项目

在 HBuilderX 中运行

在 HBuilderX 中打开项目
点击工具栏的 运行 -> 选择运行到对应平台（如 浏览器、小程序模拟器、手机App等）
等待编译完成后，项目将在选择的平台上运行

HBuilderX运行项目

使用命令行运行

在项目根目录下执行对应的命令：

bash

# 运行到 H5
npm run dev:h5

# 运行到微信小程序
npm run dev:mp-weixin

# 运行到支付宝小程序
npm run dev:mp-alipay

# 运行到 App
npm run dev:app-plus

# 更多平台请查看 package.json 中的 scripts 配置

开发第一个页面

现在，让我们修改默认的示例页面，创建一个简单的 Hello World 应用。

打开 pages/index/index.vue 文件
将文件内容替换为以下代码：

vue

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <button type="primary" @click="changeTitle">点击我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello uni-app!'
    }
  },
  onLoad() {
    console.log('页面加载完成')
  },
  methods: {
    changeTitle() {
      this.title = '你好，uni-app！'
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>

保存文件并重新运行项目，您将看到一个简单的页面，包含一个图片、一段文字和一个按钮
点击按钮，文字将从英文变为中文

添加新页面

接下来，让我们添加一个新页面，并实现页面之间的跳转：

在 pages 目录下创建一个新的文件夹 about
在 about 文件夹中创建 about.vue 文件，内容如下：

vue

<template>
  <view class="container">
    <view class="about-title">关于我们</view>
    <view class="about-content">
      这是一个使用 uni-app 开发的示例应用。
      uni-app 是一个使用 Vue.js 开发所有前端应用的框架。
    </view>
    <button type="default" @click="goBack">返回首页</button>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.container {
  padding: 40rpx;
}

.about-title {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}

.about-content {
  font-size: 30rpx;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 60rpx;
}
</style>

修改 pages.json 文件，注册新页面：

json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

修改 pages/index/index.vue 文件，添加跳转按钮：

vue

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <button type="primary" @click="changeTitle" style="margin-bottom: 20rpx;">点击我</button>
    <button type="default" @click="goToAbout">关于我们</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello uni-app!'
    }
  },
  onLoad() {
    console.log('页面加载完成')
  },
  methods: {
    changeTitle() {
      this.title = '你好，uni-app！'
    },
    goToAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    }
  }
}
</script>

<style>
/* 样式保持不变 */
</style>

保存所有文件并重新运行项目
点击"关于我们"按钮，将跳转到关于页面
点击"返回首页"按钮，将返回到首页

使用组件

uni-app 提供了丰富的内置组件，让我们在项目中使用一些常用组件：

修改 pages/index/index.vue 文件，添加一些组件：

vue

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    
    <!-- 按钮组件 -->
    <button type="primary" @click="changeTitle" style="margin-bottom: 20rpx;">点击我</button>
    <button type="default" @click="goToAbout" style="margin-bottom: 20rpx;">关于我们</button>
    
    <!-- 表单组件 -->
    <view class="form-item">
      <input type="text" v-model="inputValue" placeholder="请输入内容" />
    </view>
    
    <!-- 进度条组件 -->
    <progress :percent="progressValue" show-info stroke-width="3" />
    
    <!-- 滑块组件 -->
    <slider :value="progressValue" @change="sliderChange" show-value min="0" max="100" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello uni-app!',
      inputValue: '',
      progressValue: 50
    }
  },
  onLoad() {
    console.log('页面加载完成')
  },
  methods: {
    changeTitle() {
      this.title = '你好，uni-app！'
    },
    goToAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    },
    sliderChange(e) {
      this.progressValue = e.detail.value
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 100rpx;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.form-item {
  width: 100%;
  margin-bottom: 20rpx;
}

input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

progress, slider {
  width: 100%;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
</style>

保存文件并重新运行项目，您将看到添加的各种组件
尝试与这些组件交互，体验它们的功能

使用 API

uni-app 提供了丰富的 API，可以调用设备功能和平台服务。让我们在项目中使用一些常用 API：

修改 pages/index/index.vue 文件，添加一些 API 调用：

vue

<template>
  <view class="content">
    <!-- 保留原有内容 -->
    
    <view class="api-section">
      <view class="section-title">API 示例</view>
      <button type="primary" @click="showToast" style="margin-bottom: 20rpx;">显示提示框</button>
      <button type="primary" @click="showLoading" style="margin-bottom: 20rpx;">显示加载框</button>
      <button type="primary" @click="showModal" style="margin-bottom: 20rpx;">显示对话框</button>
      <button type="primary" @click="getSystemInfo" style="margin-bottom: 20rpx;">获取系统信息</button>
    </view>
    
    <view class="system-info" v-if="systemInfoText">
      <text>{{ systemInfoText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello uni-app!',
      inputValue: '',
      progressValue: 50,
      systemInfoText: ''
    }
  },
  // 保留原有方法
  methods: {
    // 原有方法保持不变
    
    // 新增 API 调用方法
    showToast() {
      uni.showToast({
        title: '这是一个提示框',
        icon: 'success',
        duration: 2000
      })
    },
    showLoading() {
      uni.showLoading({
        title: '加载中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
      }, 2000)
    },
    showModal() {
      uni.showModal({
        title: '提示',
        content: '这是一个模态对话框',
        success: (res) => {
          if (res.confirm) {
            this.showToast()
          }
        }
      })
    },
    getSystemInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.systemInfoText = `设备品牌：${res.brand}\n设备型号：${res.model}\n操作系统：${res.platform}\n系统版本：${res.system}\n屏幕宽度：${res.screenWidth}\n屏幕高度：${res.screenHeight}`
        }
      })
    }
  }
}
</script>

<style>
/* 保留原有样式 */

.api-section {
  width: 100%;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-align: center;
}

.system-info {
  width: 100%;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  margin-bottom: 40rpx;
}

.system-info text {
  font-size: 24rpx;
  line-height: 1.8;
}
</style>

保存文件并重新运行项目
点击各个按钮，体验不同的 API 功能

下一步

恭喜！您已经成功创建并运行了一个 uni-app 项目，并学习了基本的开发流程。接下来，您可以：

学习更多 uni-app 组件
了解 uni-app 的生命周期
探索 uni-app 的路由与页面跳转
查看实战案例获取灵感
阅读常见问题解决开发中遇到的问题

uni-app 的世界非常广阔，希望您能在这个平台上开发出优秀的应用！

快速上手 ​

环境准备 ​

创建项目 ​

方式一：使用 HBuilderX 可视化界面创建（推荐新手） ​

方式二：使用命令行创建（适合有经验的开发者） ​

项目结构 ​

运行项目 ​

在 HBuilderX 中运行 ​

使用命令行运行 ​

开发第一个页面 ​

添加新页面 ​

使用组件 ​

使用 API ​

下一步 ​

快速上手

环境准备

创建项目

方式一：使用 HBuilderX 可视化界面创建（推荐新手）

方式二：使用命令行创建（适合有经验的开发者）

项目结构

运行项目

在 HBuilderX 中运行

使用命令行运行

开发第一个页面

添加新页面

使用组件

使用 API

下一步