前端技术有5、3、、，目前较火的前端框架有、，流行的多端框架有-、等。本文主要介绍-。
一、-到底是什么
简单来讲，-是一个使用 . 所有前端应用的框架，者编写一套代码，即可发布到、、5及各种小程序（如微信、支付宝、百度、头条、、钉钉、淘宝等）、快应用等多个平台。
-在者数量、案例数量、跨平台能力、扩展灵活性、性能体验、周边生态、学习成本、成本八大关键指标上拥有巨大的优势。
者数量与案例数量更多
跨平台能力与扩展灵活性更强
者编写一套，可发布到、及各种小程序、快应用等多个平台。
在跨平台的同时，通过条件编译和平台特有调用，可以“优雅”地为某平台编写个性化代码，专有能力而不影响其他平台。
支持原生代码混写和原生集成。
性能体验优秀
体验更好的框架，加载新页面时速度更快。
端支持原生渲染，可支撑更流畅的用户体验。
小程序端的性能优于市场其他框架。
周边生态丰富
插件市场拥有数千款。
支持（ ，.包管理和分发工具），支持小程序组件和，兼容组件和项目，兼容组件。
微信生态的各种可直接用于跨平台。
学习成本低 基于通用的前端技术栈，采用语法和微信小程序，无额外学习成本。
成本低
招聘、管理、测试各方面的成本都大幅下降。
是高效神器，熟练掌握后研发效率至少翻倍。
-的功能框架如图1.1所示。
从图1.1可以看出，-在跨平台过程中不牺牲平台特色，可“优雅”地调用平台专有能力，真正做到海纳百川、各取所长。
接下来看如何搭建-的实操环境。
二、 - 环境搭建
要使用 - ，需要安装 者工具，在 中运行项目，编写代码。当然，也可以使用 、 等软件编写，最后用 运行即可。
2.1 下载与使用 者工具
在使用-项目之前，必须使用 运行项目和生成生产环境的代码。
的下载地址：。
下载时选择正式版，可以选择版和 版，这两种又各有两个版本，分别是标准版和版。其中，标准版可直接用于、、字处理场景、小程序等。如果，则需要手动安装插件。版预置所需的插件，开箱即用。如果只是小程序和5，则安装标准版即可。此处以版为例演示。
下载完成后安装即可（版和 版的安装都很简单，按提示操作就行）。
2.2 创建项目
使用 创建项目有以下两种方式。
2.2.1 通过 可视化界面创建项目
这里以 版为实例进行演示。打开 ，选择“文件”→“新建”→“1.项目”命令，如图2.1所示。
弹出“新建项目”对话框，如图2.2所示。
选中-单选按钮，自定义项目名称为，模板选择“-项目”，单击“创建”按钮。项目创建完成后即可运行，打开项目中的任意文件，如.，如图2.3所示。
以“浏览器运行模式”为例，选择“运行”→“运行到浏览器”命令，选择浏览器，即可在浏览器中体验-的5版。
2.2.2 通过 - 命令行创建项目
首先，安装运行环境。在命令提示符窗口输入以下命令：
全局安装-，如果安装过-可省略此步骤。使用正式版（对应 最新正式版）创建-项目，在命令提示符窗口输入以下命令：
使用版（对应 最新版）创建-项目，在命令提示符窗口输入以下命令：
此时，会提示选择项目模板，初次体验建议选择 - 项目模板，如图2.4所示。
创建完成后，使用以下命令运行和发布项目：
%% 的取值见表2.1。
表 2.1 %% 的取值
值 平 台 - 平台生成打包资源（支持 :-，可用于持续集成。不支持 ，运行调试仍需在 中操作） 5 5 版在浏览器运行 - 支付宝小程序 - 百度小程序 - 微信小程序 - 字节跳动小程序 - 小程序 -360 360 小程序 - 快应用 () -- 快应用联盟 -- 快应用华为
以运行、发布微信小程序为例，输入以下命令：
这样即可运行、发布微信小程序。当然，运行微信小程序必须先安装微信小程序者工具。
-标准的项目结构如图2.5所示。
手机通常使用操作系统，使用-在运行调试时可以使用模拟器或真机。
2.3.1 真机运行
真机运行需要连接手机，开启调试，进入项目，选择“运行”→“运行到手机或模拟器”命令，在其下拉菜单中选择运行的设备，即可在该设备中体验-，如图2.6所示。
如果不用真机运行，也可以使用模拟器运行，如图2.7所示。
将打包为原生有两种模式——云端和离线。1. 云端打开 ，选择“发行”→“原生-云打包”命令，如图8所示，打开图2.9所示的云端打包界面。
在正式运营时要选择自有证书，如果不知道如何生成证书，可单击“如何生成证书”超链接按照教程自己生成。如果不生成版的包，则取消勾选(包)复选框。单击“打包”按钮，进入打包状态。注意，必须在官网注册成为会员并登录才能使用云端打包功能，如果没有注册或登录会员， 会给出提示和注册地址，按照提示操作即可。打包成功后，在 软件的控制台会给出下载包的地址，如图2.10所示。
2. 离线离线打包配置比较复杂，需要使用离线者工具包，即离线。把运行环境（）封装为原生调用接口，者可以在自己的 及 原生环境配置工程中使用，包括 离线和离线。离线主要用于本地离线打包及扩展原生能力，对应 的云端打包功能。当-、5+等项目发行为原生时，无须将资源及打包要使用的签名证书等提交到云端打包服务器，在者本地配置的原生环境中即可生成安装/包。
平台本地离线打包官方文档地址
平台本地离线打包官方文档地址
按照官方文档安装及配置完成离线后，在 中选择“发行”→“原生-本地打包”→“生成本地打包资源”命令，如图2.11所示。
由于离线打包需要安装环境和环境，对于没有原生基础的人员来说，安装及配置难度较高，因此推荐使用云端打包。
2.4 - 微信小程序调试
使用-小程序非常方便，其效率远远高于原生小程序。本篇的实战项目也是小程序项目。
2.4.1 下载微信小程序者工具
要小程序，必须下载对应小程序的者工具。这里以微信小程序为例，首先下载微信小程序者工具。打开网址，进入如图2.12所示页面。
这里选择稳定版，下载的是版本。下载完成后，进行安装，根据提示操作即可。安装完成后，打开微信小程序者工具的服务端口，进入微信小程序者工具，选择“设置”→“安全设置”命令，打开如图2.13所示的窗口，将“服务端口”改为打开状态。
安装并配置完成微信小程序者工具后，打开 ，进入项目，选择“运行”→“运行到小程序模拟器”→“微信者工具”命令，即可在微信小程序者工具中体验-，如图2.14所示。
注意：如果是第一次使用，需要先配置小程序的相关路径才能运行成功。选择“运行”→运行到小程序模拟器→“运行设置”命令，在图2.15所示的位置输入微信小程序者工具的安装路径即可。
-默认把项目编译到项目根目录的目录中。
2.4.3 发行小程序
发行微信小程序必须有微信小程序。在微信公众平台（网址为注册账，进入小程序管理后台，选择“”→“设置”命令，即可在打开的页面中获取微信小程序。在 中，选择“发行”→“小程序-微信（仅适用于-）”命令，弹出“微信小程序发行”对话框，输入小程序名称和，单击“发行”按钮，在///-中生成微信小程序项目代码，如图2.16所示。
稍等片刻，系统会自动启动微信小程序者工具。如果没有自动启动，则需要手动打开微信小程序者工具。导入项目，项目路径在根目录///- 文件中，项目导入后单击“上传”按钮，按照“提交审核”→“发布”小程序标准流程逐步操作即可。
2.5 5 运行与发行
5一般指 5，是构建内容的一种语言描述方式，是指端在浏览器中运行， 提供了运行环境，用户只需要选择运行的浏览器。
2.5.1 运行项目
打开项目，选择“运行”→“运行到浏览器”命令，在其子菜单中选择合适的浏览器，如，即可在浏览器中体验-的5版，如图2.17所示。
使用 打开项目根目录下的.文件，进入可视化界面，如图2.18所示。
-中的路由模式和一样，具有和两种模式。这里选择模式。应用的基础路径相当于..配置文件中的选项，如发行在网站根目录，可不配置应用基本路径。在 中，选择“发行”→“网站-5手机版（仅适用于-）”命令，即可生成5的相关资源文件，保存于 目录，如图2.19所示。
生成的文件保存在///5文件夹中，将5文件夹中的所有文件上传到服务器即可。
三、 尺寸单位、布局与背景图片 3.1 布局
为了支持跨平台，-建议使用布局（ ，弹性布局）。传统的布局基于盒状模型，依赖 属性、属性和属性。如果使用布局，则不建议使用属性。
3.1.1 布局概述
用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 布局。代码示例如下：
行内元素也可以使用 布局。代码示例如下：
采用 布局的元素称为 容器（ ），简称容器，如图3.1所示。它的所有子元素自动成为容器成员，称为 项目（ ），简称项目。
容器默认存在两条轴：水平的主轴（ ）和垂直的交叉轴（ ）。主轴的开始位置（与边框的交叉点）称为 ，结束位置称为 ；交叉轴的开始位置称为 ，结束位置称为 。项目默认沿主轴排列。单个项目占据的主轴空间称为 ，占据的交叉轴空间称为 。
3.1.2 容器的属性
布局支持6个容器属性：-、-、-、-、-、-。
3.1.3 项目的属性
布局支持6个项目属性：、-、-、-、、-。
3.2 背景图片
-支持在里设置背景图片，设置方式与普通项目大体相同，但是也有一些不同，下面介绍注意事项。
3.2.1 使用本地背景图片的问题
在里设置背景图片时，为了多端兼容，需要注意：（1）支持 64 格式图片。（2）支持网络路径图片。（3）小程序不支持在中使用本地文件，包括本地的背景图片和字体文件，需要是64方式才可使用。端在3模式以前也有相同限制，从3编译模式起支持直接使用本地背景图片和字体。
使用本地路径背景图片需要注意：（1）为方便者，当背景图片小于 40且- 编译到不支持本地背景图片的平台时，会自动将其转换为 64 格式。（2）当背景图片不小于 40时，会有性能问题，故不建议使用太大的背景图片。如果者必须使用太大的背景图片，则需要自己将其转换为 64 格式，或将其到服务器上，从网络地址引用。（3）本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。代码示例如下：
注意：微信小程序真机不支持相对路径，但者工具支持。因此，以真机为主的不要使用相对路径。
3.2.2 代码演示及把图片转换为 64 格式
在项目中引入背景图片，观察其能否转换为64格式。在文件夹下创建文件夹，将背景图片到文件夹下，在//.文件中的代码如下：
