前端技术有HTML5、CSS3、JavaScript
、Node
，目前较火的前端框架有Vue、React，流行的多端开发框架有uni-app、Taro等。本文主要介绍uni-app
。

一、uni-app到底是什么

简单来讲，uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码
，即可发布到ioses
、androids、H5及各种小程序（如微信、支付宝、百度、头条、QQ、钉钉
、淘宝等）
、快应用等多个平台。

uni-app在开发者数量
、案例数量
、跨平台能力、扩展灵活性、性能体验、周边生态
、学习成本、开发成本八大关键指标上拥有巨大的优势
。

1. 开发者数量与案例数量更多

2. 跨平台能力与扩展灵活性更强

• 开发者编写一套代码，可发布到ioses
  、androids及各种小程序
  、快应用等多个平台。

• 在跨平台的同时，通过条件编译和平台特有API调用，可以“优雅”地为某平台编写个性化代码，调用专有能力而不影响其他平台
  。

• 支持原生代码混写和原生SDK集成。

1. 性能体验优秀

• 体验更好的Hybrid框架，加载新页面时速度更快
  。

• App端支持Weex原生渲染
  ，可支撑更流畅的用户体验
  。

• 小程序端的性能优于市场其他框架
  。

1. 周边生态丰富

• 插件市场拥有数千款插件
  。

• 支持NPM（Node Package Manager
  ，Node.js包管理和分发工具），支持小程序组件和SDK
  ，兼容mpvue组件和项目，兼容Weex组件
  。

• 微信生态的各种SDK可直接用于跨平台App。

1. 学习成本低 基于通用的前端技术栈，采用Vue语法和微信小程序API
   ，无额外学习成本。

2. 开发成本低

• 招聘、管理
  
  、测试各方面的成本都大幅下降
  。

• HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍。

uni-app的功能框架如图1.1所示。

从图1.1可以看出，uni-app在跨平台过程中不牺牲平台特色
，可“优雅”地调用平台专有能力
，真正做到海纳百川
、各取所长

。

接下来看如何搭建uni-app的实操环境。

二、 uni-app 环境搭建

要使用 uni-app

，需要安装 HBuilder X 开发者工具
，在 HBuilder X 中运行项目，编写代码。当然
，也可以使用 Vscode、WebStorm 等软件编写

，最后用 HBuilder X 运行即可
。

2.1 下载与使用 HBuilder X 开发者工具

在使用uni-app项目之前，必须使用 HBuilder X 运行项目和生成生产环境的代码
。

下载时选择正式版，可以选择Windows版和Mac OS版
，这两种又各有两个版本，分别是标准版和App开发版
。其中，标准版可直接用于Web开发、MarkDown
、字处理场景、小程序等。如果开发App，则需要手动安装插件。App开发版预置开发App所需的插件，开箱即用

。如果只是开发小程序和h5
，则安装标准版即可
。此处以App开发版为例演示

。

HBuilder X 下载完成后安装即可（Windows版和Mac OS版的安装都很简单，按提示操作就行）。

2.2 创建项目

使用HBuilder X创建项目有以下两种方式
。

2.2.1 通过 HBuilder X 可视化界面创建项目

这里以Mac OS版为实例进行演示。打开HBuilder X

，选择“文件”→“新建”→“1.项目”命令，如图2.1所示

。

弹出“新建项目”对话框，如图2.2所示
。

选中uni-app单选按钮，自定义项目名称为uniappdemo
，模板选择“uni-ui项目”，单击“创建”按钮。项目创建完成后即可运行，打开项目中的任意文件，如App.vue
，如图2.3所示。

以“浏览器运行模式”为例，选择“运行”→“运行到浏览器”命令，选择浏览器，即可在浏览器中体验uni-app的H5版

。

2.2.2 通过 vue-cli 命令行创建项目

首先，安装运行环境。在命令提示符窗口输入以下命令：

npm install -g @vue/cli


全局安装vue-cli
，如果安装过vue-cli可省略此步骤
。使用正式版（对应HBuilder X最新正式版）创建uni-app项目
，在命令提示符窗口输入以下命令：

vue create -p dcloudio/uni-preset-vue 项目名称


使用Alpha版（对应HBuilder X最新Alpha版）创建uni-app项目，在命令提示符窗口输入以下命令：

vue create -p dcloudio/uni-preset-vue#alpha 项目名称


此时，会提示选择项目模板，初次体验建议选择 Hello uni-app 项目模板
，如图2.4所示。

创建完成后，使用以下命令运行和发布项目：

npm run dev:%PLATFORM% //运行项目
npm run build:%PLATFORM% //发布项目


%PLATFORM% 的取值见表2.1。

表 2.1 %PLATFORM% 的取值

以运行

、发布微信小程序为例，输入以下命令：

npm run dev:mp-weixin //运行微信小程序
npm run build:mp-weixin //发布微信小程序


这样即可运行
、发布微信小程序
。当然，运行微信小程序必须先安装微信小程序开发者工具
。

uni-app标准的项目结构如图2.5所示。

2.3 App 真机运行

开发androids手机App通常使用Windows操作系统，使用uni-app开发App在运行调试时可以使用模拟器或真机。

2.3.1 真机运行

真机运行需要连接手机
，开启USB调试，进入uniappdemo项目，选择“运行”→“运行到手机或模拟器”命令，在其下拉菜单中选择运行的设备
，即可在该设备中体验uni-app
，如图2.6所示
。

如果不用真机运行，也可以使用模拟器运行，如图2.7所示
。

2.3.2 打包发行

将App打包为原生App有两种模式——云端和离线。1. 云端打开HBuilder X
，选择“发行”→“原生App-云打包”命令，如图8所示，打开图2.9所示的云端打包界面

。

在App正式运营时要选择自有证书，如果不知道如何生成证书，可单击“如何生成证书”超链接按照教程自己生成
。如果不生成ioses版的App包，则取消勾选ioses(ipa包)复选框。单击“打包”按钮
，进入打包状态。注意，必须在https://www.dcloud.io官网注册成为会员并登录才能使用云端打包功能，如果没有注册或登录会员，HBuilder X会给出提示和注册地址
，按照提示操作即可。打包成功后，在HBuilder X软件的控制台会给出下载apk包的地址
，如图2.10所示

。

2. 离线离线打包配置比较复杂，需要使用App离线开发者工具包
，即App离线SDK。把App运行环境（runtime）封装为原生开发调用接口，开发者可以在自己的 androids 及 ioses 原生开发环境配置工程中使用，包括 androids离线开发SDK和ioses离线开发SDK。App离线SDK主要用于App本地离线打包及扩展原生能力
，对应HBuilder X的云端打包功能


。当uni-app

、h5 App等项目发行为原生App时
，无须将App资源及打包要使用的签名证书等提交到云端打包服务器
，在开发者本地配置的原生开发环境中即可生成安装apk/ipa包。

androids平台App本地离线打包官方文档地址

ioses平台App本地离线打包官方文档地址

按照官方文档安装及配置完成离线SDK后，在HBuilder X中选择“发行”→“原生App-本地打包”→“生成本地打包App资源”命令，如图2.11所示。

由于离线打包需要安装androids开发环境和ioses开发环境
，对于没有原生App开发基础的人员来说，安装及配置难度较高
，因此推荐使用云端打包
。

2.4 uni-app 微信小程序调试

使用uni-app开发小程序非常方便，其开发效率远远高于原生小程序开发。本篇的实战项目也是小程序项目。

2.4.1 下载微信小程序开发者工具

要开发小程序，必须下载对应小程序的开发者工具。这里以微信小程序为例，首先下载微信小程序开发者工具。打开网址
，进入如图2.12所示页面
。

这里选择稳定版，下载的是MacOS版本

。下载完成后，进行安装，根据提示操作即可。安装完成后，打开微信小程序开发者工具的服务端口
，进入微信小程序开发者工具，选择“设置”→“安全设置”命令，打开如图2.13所示的窗口，将“服务端口”改为打开状态。

2.4.2 运行项目

安装并配置完成微信小程序开发者工具后，打开HBuilder X，进入项目，选择“运行”→“运行到小程序模拟器”→“微信开发者工具”命令，即可在微信小程序开发者工具中体验uni-app
，如图2.14所示。

注意：如果是第一次使用，需要先配置小程序IDE的相关路径才能运行成功
。选择“运行”→运行到小程序模拟器→“运行设置”命令，在图2.15所示的位置输入微信小程序开发者工具的安装路径即可
。

uni-app默认把项目编译到项目根目录的unpackage目录中。

2.4.3 发行小程序

发行微信小程序必须有微信小程序AppID。在微信公众号平台（网址为https://mp.weixin.qq.com）注册账号，进入小程序管理后台
，选择“开发”→“开发设置”命令
，即可在打开的页面中获取微信小程序AppID
。在HBuilder X中，选择“发行”→“小程序-微信（仅适用于uni-app）”命令
，弹出“微信小程序发行”对话框，输入小程序名称和AppID
，单击“发行”按钮
，在unpackage/dist/build/mp-weixin中生成微信小程序项目代码
，如图2.16所示。

稍等片刻，系统会自动启动微信小程序开发者工具。如果没有自动启动，则需要手动打开微信小程序开发者工具
。导入项目，项目路径在根目录unpackage/dist/build/mp-weixin 文件中
，项目导入后单击“上传”按钮
，按照“提交审核”→“发布”小程序标准流程逐步操作即可

。

2.5 H5 运行与发行

H5一般指HTML 5，是构建Web内容的一种语言描述方式

，是指Web端在浏览器中运行，HBuilder X提供了Web运行环境，用户只需要选择运行的浏览器
。

2.5.1 运行项目

打开项目，选择“运行”→“运行到浏览器”命令，在其子菜单中选择合适的浏览器，如Chrome，即可在浏览器中体验uni-app的H5版，如图2.17所示
。

2.5.2 发行项目

使用HBuilder X打开项目根目录下的manifest.json文件，进入可视化界面
，如图2.18所示。

uni-app中的路由模式和Vue一样，具有hash和history两种模式
。这里选择hash模式。应用的基础路径相当于vue.config.js配置文件中的publicPath选项，如发行在网站根目录

，可不配置应用基本路径。在HBuilder X中，选择“发行”→“网站-H5手机版（仅适用于uni-app）”命令
，即可生成H5的相关资源文件
，保存于 unpackage 目录，如图2.19所示
。

生成的文件保存在unpackage/dist/build/h5文件夹中，将h5文件夹中的所有文件上传到服务器即可。

三、 尺寸单位
、Flex布局与背景图片

3.1 Flex 布局

为了支持跨平台，uni-app建议使用Flex布局（Flexible Box
，弹性布局）。传统的布局基于盒状模型，依赖 display 属性


、position属性和float属性
。如果使用Flex布局，则不建议使用float属性
。

3.1.1 Flex 布局概述

Flex用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。代码示例如下
：

.box{
display: flex;
}


行内元素也可以使用 Flex 布局。代码示例如下
：

.box{
display: inline-flex;
}


采用 Flex 布局的元素称为 Flex 容器（flex container），简称容器
，如图3.1所示
。它的所有子元素自动成为容器成员
，称为 Flex 项目（flex item），简称项目
。

容器默认存在两条轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）称为main start，结束位置称为main end；交叉轴的开始位置称为cross start，结束位置称为cross end
。项目默认沿主轴排列。单个项目占据的主轴空间称为main size，占据的交叉轴空间称为cross size。

3.1.2 容器的属性

Flex布局支持6个容器属性：flex-direction
、flex-wrap、flex-flow、justify-content、align-items
、align-content
。

3.1.3 项目的属性

Flex布局支持6个项目属性
：order、flex-grow、flex-shrink
、flex-basis
、flex

、align-self
。

3.2 背景图片

uni-app支持在CSS里设置背景图片，设置方式与普通Web项目大体相同
，但是也有一些不同
，下面介绍注意事项
。

3.2.1 使用本地背景图片的问题

在CSS里设置背景图片时，为了多端兼容，需要注意：（1）支持 base64 格式图片。（2）支持网络路径图片。（3）小程序不支持在CSS中使用本地文件，包括本地的背景图片和字体文件，需要是base64方式才可使用。App端在v3模式以前也有相同限制，从v3编译模式起支持直接使用本地背景图片和字体。

使用本地路径背景图片需要注意
：（1）为方便开发者
，当背景图片小于 40KB且uni-app 编译到不支持本地背景图片的平台时，会自动将其转换为 base64 格式。（2）当背景图片不小于 40KB时
，会有性能问题，故不建议使用太大的背景图片
。如果开发者必须使用太大的背景图片，则需要自己将其转换为 base64 格式
，或将其复制到服务器上
，从网络地址引用。（3）本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。代码示例如下：

.test2 {
background-image: url('~@/static/logo.png');
}


注意

：微信小程序真机不支持相对路径，但开发者工具支持
。因此

，以真机为主的开发不要使用相对路径。

3.2.2 代码演示及把图片转换为 base64 格式

在项目中引入背景图片，观察其能否转换为base64格式
。在static文件夹下创建images文件夹，将背景图片复制到images文件夹下
，在pages/index/index.vue文件中的代码如下：

<template>
<view>
<view class="bg"></view>
</view>
</template>
<script>
</script>
<style>
.bg{
width:200rpx;
height:200rpx;
background-image: url("~@/static/images/1.jpg");
background-size:100%
}
</style>


在微信开发者工具中运行，效果如图3.3所示。

由图3.3可以看出，当背景图片小于40KB时
，其会自动转换为base64格式；如果背景图片大于40KB，则应使用网络图片。

以上就是对uni-app这一框架的学习与实践笔记
。