第一个uniapp项目：Hello uniapp-uniapp快速入门与实战

当前位置:　首页>> 技术小册>> uniapp快速入门与实战

### 第一个uniapp项目：Hello uniapp

#### 引言

在踏入uniapp的奇妙世界之前，让我们先简要了解一下uniapp是什么。uniapp是一个使用Vue.js开发所有前端应用的框架，它允许开发者编写一套代码，然后发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/字节跳动/QQ/京东等）上，极大地提升了跨平台开发的效率与体验。本章节，我们将从零开始，创建一个简单的“Hello uniapp”项目，作为你探索uniapp开发之旅的起点。

#### 准备工作

##### 1. 安装HBuilderX

HBuilderX是DCloud（数字天堂）推出的一款前端开发工具，它内置了对uniapp的全面支持，是开发uniapp项目的首选IDE。你可以从[DCloud官网](https://www.dcloud.io/hbuilderx.html)下载并安装HBuilderX。

##### 2. 创建项目

打开HBuilderX，选择顶部菜单的“文件”->“新建”->“项目”，在弹出窗口中选择“uni-app”项目类型，填写项目名称（例如：HelloUniapp），选择模板（对于初学者，可以选择“默认模板”以快速开始），然后点击“创建”按钮。

#### 项目结构解析

创建完成后，你将看到项目的基本结构。以下是一些关键文件夹和文件的简要说明：

- **pages/**：存放所有页面文件的目录。uniapp采用页面路由的方式管理页面，每个页面由`.vue`文件表示。
- **static/**：用于存放静态资源，如图片、字体等。
- **components/**：存放可复用的Vue组件。
- **main.js**：项目的入口文件，主要作用是创建Vue实例，并引入uniapp的App.vue。
- **App.vue**：整个应用的根组件，所有的页面都是在App.vue下切换的。
- **pages.json**：配置页面路由、导航条、选项卡等页面类配置信息。
- **manifest.json**：配置应用名称、图标、权限等应用级别的配置信息。

#### 编写Hello uniapp页面

接下来，我们将修改默认页面以显示“Hello uniapp”文本。

##### 1. 修改页面文件

进入`pages`目录，你会看到一个名为`index`的文件夹，里面包含了`index.vue`文件。这就是项目的首页文件。打开`index.vue`，你将看到Vue单文件组件的结构，包括`<template>`、`<script>`和`<style>`三个部分。

- **修改`<template>`部分**：

```html
  <template>
    <view class="content">
      <text class="title">Hello uniapp</text>
    </view>
  </template>
  ```

这里，我们使用`<view>`标签来定义一个容器（相当于HTML中的`<div>`），并在其中使用`<text>`标签显示“Hello uniapp”文本。注意，uniapp中默认使用`<view>`和`<text>`等标签替代HTML的`<div>`和`<span>`等标签，以更好地适配不同平台。

- **（可选）修改`<script>`部分**：

对于本示例，`<script>`部分可以保持默认，因为我们不需要添加任何JavaScript逻辑。但你可以在这里定义页面的数据、方法等。

- **（可选）修改`<style>`部分**：

为了美化页面，你可以添加一些CSS样式。例如：

```css
  <style>
    .content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* 占据整个视窗高度 */
    }
    .title {
      font-size: 36px;
      color: #333;
      font-weight: bold;
    }
  </style>
  ```

这段样式将使“Hello uniapp”文本居中显示，并设置字体大小和颜色。

##### 2. 预览项目

在HBuilderX中，你可以直接点击工具栏上的“运行”按钮（通常是一个绿色的三角形图标），选择你想要预览的平台（如H5、微信小程序等），然后等待项目编译完成并自动打开预览窗口。如果你选择的是H5平台，它将在默认浏览器中打开；如果选择的是微信小程序等平台，则需要你扫描二维码在对应的客户端中预览。

#### 调试与优化

在开发过程中，难免会遇到各种问题，这时就需要进行调试。uniapp提供了丰富的调试工具，包括但不限于：

- **控制台输出**：使用`console.log()`等JavaScript函数在控制台输出调试信息。
- **Vue Devtools**：对于Vue开发者来说，Vue Devtools是一个不可或缺的调试工具，它允许你检查组件的状态、事件、路由等信息。uniapp项目在H5环境下运行时，可以直接使用Vue Devtools进行调试。
- **真机调试**：对于移动端应用，最直观的调试方式就是在真机上进行。uniapp支持通过HBuilderX的真机调试功能，将手机连接到电脑，直接在手机上预览和调试应用。

#### 结语

至此，你已经成功创建了第一个uniapp项目“Hello uniapp”，并掌握了项目的基本结构、页面编写、预览与调试等基本技能。这只是uniapp世界的冰山一角，接下来，你将深入学习uniapp的路由管理、组件使用、API调用、跨平台兼容等高级话题，不断提升自己的开发能力。记住，实践是检验真理的唯一标准，多动手尝试，多思考总结，你会在uniapp的旅途中越走越远。

该分类下的相关小册推荐：

WebGL开发指南

web前端面试完全指南

vue高级应用开发与构建

Web响应式布局入门到实战