uni-app概述

本节需要弄明白 3 个问题。

（1）什么是uni-app。（2）为什么要学习uni-app。（3）怎样学习uni-app。

什么是uni-app

官网介绍 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、各种小程序以及快应用等多个平台。通俗地讲，uni-app 是一个前端框架，开发者编写一套代码即可发布到各大主流平台，从而实现了程序跨平台使用。
为什么要学习uni-app

uni-app 降低了开发者的学习成本，只要掌握了 uni-app，就可以编写各种小程序、安卓 App 以及苹果 App 等。最主要的原因是我们已经学习了 Vue.js，有了 Vue.js 作为基础，可以快速掌握 uni-app。
怎样学习uni-app

首先需要大家掌握 Vue.js，因为 uni-app 是使用 Vue.js 开发的前端框架。本书分为两个章节讲解 uni-app，第 13 章讲解 uni-app 的基础知识，如目录结构、页面结构、常用组件、生命周期等，第 14 章为企业项目实战，通过项目掌握 uni-app 的实际使用。

创建uni-app项目

选择软件

uni-app 项目需要使用 HBuilderX 开发，HBuilderX 的下载地址为 https://www.dcloud.io/hbuilderx.html ，选择 App 的开发版本，如图 13-1 所示。

Figure 1. 图13-1　下载HBuilderX

创建uni-app项目

双击打开 HBuilderX 开发软件，选择 “文件”→“新建”→“项目” 命令，如图 13-2 所示。

Figure 2. 图13-2　创建uni-app项目

新建项目时选择 uni-app 项目类型，然后选择项目站点，单击 “创建” 按钮即可，如图 13-3 所示。

Figure 3. 图13-3　选择uni-app项目

HBuilderX 会自动生成项目目录，如图 13-4 所示。

Figure 4. 图13-4　uni-app项目目录

选择“运行”→“运行到浏览器（选择计算机已安装的浏览器）”命令，如图13-5所示

Figure 5. 图13-5　运行uni-app项目

在浏览器中看到如图 13-6 所示的状态即表示项目创建成功。

Figure 6. 图13-6　uni-app项目首页

uni-app目录结构

本节介绍 uni-app 目录结构，根据 uni-app 自动生成的目录结构，从上往下依次讲解。

pages文件夹：存放项目页面。
static文件夹：存放静态资源，例如图片。
App.vue：入口组件。
main.js：入口JS文件。
manifest.json：配置文件，可以配置App图标、启动页面等，一般在发布时使用。
pages.json：页面管理（重要）。pages.json有两个重要功能，其一为管理项目页面，其二为设置页面样式。

uni-app运行机制

本节讲解 uni-app 运行机制。

运行 uni-app 程序后，首先访问的页面就是 pages.json 文件，所有页面都在 pages 属性中，pages 是一个对象数组，每一个对象表示一个页面，第一个对象就是运行后要显示的页面，默认显示的页面是 pages/index/index。

uni-app页面结构

打开 pages/index/index 页面，发现 uni-app 的页面结构和 Vue.js 的页面结构一样，都是 .vue 页面，由 template、script、style 3 个部分组成，代码如下。

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello'
    }
  },
  onLoad() {
  },
  methods: {
  }
}
</script>

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

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

.text-area {
  display: flex;
  justify-content: center;
}

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

与 Vue.js 不同的是，HTML 的一些标签不能用了，如列表 ul li 标签、img 标签、div 标签等。uni-app 有自己的组件，在 13.2 节将详细讲解。

配置样式

返回 pages.json 文件，globalStyle 用于配置全局样式，代码如下。

{
  "globalStyle": {
    "navigationBarTextStyle": "black", // 设置页面导航标题的颜色
    "navigationBarTitleText": "uni-app", // 设置导航标题
    "navigationBarBackgroundColor": "#F8F8F8", // 设置导航背景
    "backgroundColor": "#F8F8F8" // 设置页面背景
  }
}

navigationBarTextStyle 的作用是设置导航标题颜色，只能设置为黑色（black）或者白色（white）。

以上为默认配置样式，随着知识点的增加，globalStyle 中的属性会越来越多。

globalStyle 中的属性为全局配置，所有页面都会继承，但是在实际开发中，每个页面都有自己的导航标题，下面讲解单页面配置。

单页面配置是指单独设置页面的标题、背景等，要在每个页面的 style 属性下设置，代码如下。

{
  "pages": [
//pages数组中的第一项表示应用启动页，可参考https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTextStyle": "white", // 设置页面导航标题的颜色
        "navigationBarTitleText": "uni-app", // 设置导航标题
        "navigationBarBackgroundColor": "#000", // 设置导航背景
        "backgroundColor": "#F8F8F8" // 设置页面背景
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black", // 设置页面导航标题的颜色
    "navigationBarTitleText": "uni-app", // 设置导航标题
    "navigationBarBackgroundColor": "#F8F8F8", // 设置导航背景
    "backgroundColor": "#F8F8F8" // 设置页面背景
  }
}

如果单页面和全局设置了同样的属性，最终以单页面设置的属性样式为准，例如上述代码，单页面中设置导航的背景为黑色，字体为白色。全局样式设置的导航背景为灰白色，字体为黑色。运行程序，生效的是单页面样式，如图 13-7 所示。

Figure 7. 图13-7　导航样式显示