说起“无人机”，不论是在国内还是国际，能够让你马上想到的品牌一定是“大疆”。大疆开辟了民用无人机这一崭新市场，完成“从0到1”的颠覆性创新，是世界各地的科技爱好者心中无人机的大品牌。作为中国“智造”之光，2017年圣诞节期间大疆在YouTube上投放了一组“画风清奇”的送礼广告，洗脑了全球消费者。

是给哪些用户看的呢？又是如何出现在目标用户的面前呢？请听我们给你讲讲这其中的奥妙。

大疆的产品线非常丰富，旗下的产品分为消费级产品和专业级产品等，目前主要覆盖业余爱好者、摄影发烧友，再到专业机构等人群。而大疆希望找到更多大众用户，这些用户对大疆并不熟悉，不是深度摄影科技迷。

大疆首先看准了“送礼人群”，也就是过节给自己家人朋友送礼的这群人，这群人喜欢有新意的礼品，而且对礼品种类和价格都比较open。圣诞节是个送礼高峰，因此在圣诞节向送礼人群推荐大疆，是个很好的契机。

送礼人群是个巨大群体，怎么在圣诞节期间，从茫茫的互联网上找到这些送礼人群呢？这是大疆面对的第一个难题。

挑战二：让送礼人群转粉大疆

大部分的消费者，如果没有额外的信息恰到好处地刺激他们，他们在选购岁末礼物时只会想到传统的一些礼品选项，比如游戏机、咖啡机、健身器材等，大疆应该如何提醒他们，“嘿，其实大疆无人机也是很好的选择！”呢？因此找到这些人后，用更互动有趣的方式展现大疆，让消费者眼前一亮，激发他们对大疆的喜爱，这是第二个难题。

所以要吸引到原来对大疆品牌认识度比较低的这部分人，一定要找对切入口，找到好平台。“送礼选大疆”是切入口，平台是Google的视频广告YouTube。大疆和Google共同策划的圣诞送礼营销，就这么拉开了帷幕。

“今年，让他惊喜，可别买游戏机了！” 巧妙地打动本来想着买游戏机的消费者。

首先怎么找到送礼人群呢？我们知道网络上的搜索行为，是网民消费需求的直接体现，他们在搜索什么，就代表他们对什么感兴趣。因此Google帮助大疆总结了送礼人群会搜索的关键词，包含从咖啡机、滑板、游戏机、耳机、键盘等品类，这些品类和大疆部分产品价格相当，所以送礼人群可能会转买大疆。通过这些关键词设定，就定位到了这群人。

YouTube：假日营销的一张好牌

找到了这些送礼人群后，怎么把广告推送到他们面前，用什么形式更吸引人？这就需要YouTube广告出马了。2016年益普索的调查显示，YouTube是全球对消费者买什么富有非常大影响力的视频网站。而且视频形式更加直观、内容呈现也更丰富。

大疆针对旗下四款产品，做了4个长度为十几秒的视频广告，作为YouTube广告素材。主要使用YouTube TrueView广告，它和大部分强制的贴片视频广告不一样，观众在观看和点击上完全自主。简单来说观众先观看短短几秒，随后决定是否继续观看，如果点击你的广告或观看超过30秒，你才付费；如果选择了不想看，那广告观看30秒内并不收取广告费，对广告主来说，相当于不仅免费获得了曝光，并且通过YouTube筛选出真正对广告内容感兴趣的人。

为了让客户更容易被吸引，Google把客户搜索的关键词和看到的广告语做了匹配，共生成了80多个定制化版本，真正做到了千人千面。

比如，当有人在YouTube上搜索PS4游戏机时，Google就已经记录下这部分人的行为，那么在他看YouTube视频时，就会在视频开始前看到“不要给他送游！戏！机！了！用大疆赢得他的心，看看他会有多惊喜吧。” 她仿佛能看到丈夫拿到一个大疆Mavic无人机时手舞足蹈的样子。对应的，还有“不要送咖啡机”“不要送健身器”“不要送耳机”版本的视频，都会有针对性地投放到搜索过这些词的消费者面前。

大疆全球 “种草” 成功

本轮广告提升了大家对大疆的品牌兴趣度，美国网友对大疆品牌兴趣度提升了11.9%，非美国国家的兴趣度提升达到了17.3%。大疆在YouTube的频道上每个视频下面都有粉丝热烈地讨论和反馈。

YouTube上还有大量粉丝自发上传的无人机拍下的画面，汇集了世界各个角落美不胜收的景色，这是以前普通人完全无法拍到和看到的。大疆的技术和产品拓宽了普通人体验世界的疆界，而Google的产品则帮助大疆拓展了全球的市场。

以上内容属作者个人观点，不代表雨果网立场！本文经原作者授权转载，转载需经原作者授权同意。

小程序依托微信超过 10 亿的海量用户，它无需安装即可使用的完美用户体验，已经成为商家竞相争夺的大蛋糕，同时，小程序开发快速、容易部署广受程序员的喜爱，作为程序员的我们，还有什么理由不学习小程序开发呢？

本达人课为小程序以及云开发快速入门课程，主要分为 6 部分内容。

• 入门部分：这部分内容结合着小实例来讲解小程序的开发环境搭建以及开发的基本步骤，然后介绍了小程序中常用的布局，如水平排列和垂直排列布局等。

• 组件部分：主要介绍了小程序开发中常用的组件，如 text 组件、icon 组件、进度、滚动视图、轮询图、各种表单组件、多媒体组件。

• API 部分：主要介绍了小程序开发中常用到的 API，如网络 API、多媒体 API、数据存储 API、位置 API、界面 API 和开发接口 API。

• WeUI 部分：主要介绍了 WeUI 高级 UI 组件的核心使用方法，包括基础组件和 Badge 的用法。

• 云开发部分：包括云数据库、云存储和云函数的核心 API 讲解。

• 实例部分：主要介绍了 6 个小项目实例，其中美团客户端的例子支持小程序支付功能。

学完本达人课后，读者可以快速掌握小程序的核心开发技术，熟练使用小程序的各种组件以及 API 开发包括服务端的小程序，并可以开发出复杂的小程序应用。

李宁，欧瑞科技创始人 & CEO，技术狂热分子，IT 畅销书作者，CSDN 特约讲师、CSDN 博客专家，拥有近 20 年软件开发和培训经验。主要研究领域包括 Python、深度学习、数据分析、区块链、Android、Java 等。曾出版超过 30 本 IT 畅销书，主要包括《Python 从菜鸟到高手》、《Swift 权威指南》、《Android 开发指南》等。

导读：小程序风口已经到来，你准备好了吗

小程序是腾讯公司推出的，可以运行在微信中，加载速度比 H5 快，开发效率也比 App 快，所以小程序是获得用户、成为流量入口的最佳选择。随着小程序的成熟，微信体内的各入口将全面转入小程序形态。现在开发小程序的创业公司越来越多，甚至很多大公司也加入了小程序开发的序列，作为程序员的我们，是否会开发小程序，将会成为职场上升值加薪的重要筹码。

小程序之所以现在这么火，是因为有非常多的引流模式和盈利模式，本文将介绍其中的集中引流模式和盈利模式。不管读者学了小程序开发是为了升值加薪、还是为了找工作，或是为了创业，都会有很大的帮助，毕竟老板都喜欢既会技术、又知道如何将技术变现的员工。

到目前为止应用程序的类型已经经历了 3 个时代：PC 时代、App 时代和轻应用时代，其中 PC 时代是指桌面应用以及 Web 应用，这个时代从 2008 年基本结束了，从此以后开始进入 App 时代，App 主要指的是 Android App 和 iOS App，这一时代一直到 2016 年，虽然 Android App 和 iOS App 功能很强大，但安装和升级很费劲，大的 App 可能是有几十 M，甚至上百 M，所以从 2016 年开始，轻型应用开始走入我们的视线，这其中以微信小程序为主，其他的还包括支付宝小程序、百度轻应用、快应用等，这 3 个时代如下图所示。

下面聊聊小程序的变现渠道，目前微信用户有 10 亿左右，理论上，这 10 亿用户都有可能成为小程序的准用户，其中可挖掘的商业价值非常巨大，如电商、内容付费、游戏、广告等。由于小程序安装非常方便，只需要用手机微信扫描小程序码就可以安装，所以相比 App，用户更有安装小程序的意愿。

那么微信小程序对于我们技术人员有哪些创业机会呢？在展示新创业机会之前，我们得要重新审视这两点。

（1）小程序不能照搬公众号的思路

因为同属于微信这个圈子，所以很多人想当然地将小程序当作一种新型的公众号，认为做公众号的那一套方法，移植到小程序上面应该也差不多，其实这种想法是不恰当的。

当然，小程序可以借助公众号这个已经成熟的自媒体生态获取用户，但如果完全用公众号的思路进行思考，是走不通的。

（2）不要把小程序当作 Web App

小程序是完全基于微信生态的产品，所以它无论在 UI 设计上还是在功能上，都和微信本身紧密结合，所以在开发和运营时，都要首先从微信这个大环境的角度出发，它可以是一个只有某项核心功能的简化版 App，也可以是一个解决用户临时需求的小工具，但无论如何，它都是基于微信而生的。

下面就来看看小程序的新机遇在哪里？

所谓的新交互，是指跟原来不一样的玩法，比如说基于群的互动和娱乐，它不仅仅是用群的方式来获取群的流量红利，更多的是基于这种群的关系去开发出更多适合群的场景的玩法出来，它将会是最新且变异量最大的一种。

尤记得在 2017 年 1 月 9 号小程序上线发布会上，张小龙举了一个例子，大意就是几个喜欢看球的男生，建了一个微信群，小程序的窗口可以浮在群聊之上，在小程序里面播放视频并实时显示比分，在群里大家还可以讨论的热火朝天，甚至可以玩一些“押注”的小游戏，这样的场景可能会有很多，比如女生一起拉个群看综艺，或者一起拉个群线上 K 歌等。

互联网最性感的地方，就在于能在线还原生活中的场景，并且门槛更低、体验更好。

2018 年，小程序的新交互方式给我展示了这个可能性其实是爆发式的，诸如头脑王者、各种吃鸡游戏、猜歌达人等都是为场景化而生，这种新型的交互方式门槛低、用户精准，在产品有足够的谈资和趣味性很容易在圈子里面引起大家的热议。

小程序出来之后，极大地降低了生产门槛，以前对大量没有媒体能力的人来讲，是不可能生成公众号的，但是现在如果让他们去利用小程序做一个小店铺，是可行的。

所以现在有些人，专注到中老年市场、农村市场的有服务能力的人群，比如果农，可以很方便地生成自己的店铺并上架商品，这个就是新人群的一种，甚至更简单的，每天为中老年的女性用户推送一条养生相关的视频或者音频，也能快速的实现用户增长。

移动端长图文内容编辑器美篇去年九月至今刚上线不久，排名就以火箭之势飞数上升——在阿拉丁统计平台公布的小程序榜单“小程序新增榜”、“小程序上升榜”及“小程序工具榜”中，稳坐第一宝座，更是在双11电商一片红火的时候，晋级总榜前十！

小程序上线初始，主推的就是“location”属性，赋能线下商家在线触达其用户。小程序是网站或者 App 的话，二维码就像他们的网址或者 App 链接，在此之前，从来没有如此低门槛低成本的解决方案。比如对一个包子馒头店的老板，可以通过“个人号 + 群 + 小程序”的形式，持续耕耘好自己的一亩三分地。在这个形态中，可能存在帮助线下商家更好地用好“微信能量”的机会。

零售的本质是人和商品，以前的零售，无论是线下零售还是线上网店，除了商品本身，都有自己的客户，但客户是不融合互通的，所以呈现线性增长。新零售的核心就是线上线下互通融合，随着线上线下完全融合，线上客户与线下客户形成叠加和交叉，形成指数级的效应。小程序作为连接线下的最佳工具，将成为新零售时代，线下门店拥有“线上店”最简便和最佳的方式。

好了，讲了这么多小程序的好处，以及如何用小程序盈利、小程序的新机遇等，但有一个前提，需要先学会开发小程序。从下一课开始，我们就开始学习小程序开发，为了让读者能更好地掌握小程序的开发技术，本系列文章的最后提供了 6 个实战案例，以便让读者可以将理论和实战相结合。

下面详细说明一下本系列文章的主要内容。

• 小程序开发环境安装和配置
• 开发第一个小程序：石头剪子布
• 小程序布局，主要涉及到水平排列、水平折行排列、垂直排列、垂直折行排列、水平和垂直排列对齐方式、水平等间隔排列等
• API 详解（网络、多媒体 API、文件、数据、位置等 API）
• 实战案例一：高仿 iOS 计算器
• 实战案例五：小程序版网上商城
• 实战案例六：美团客户端（带支付功能）

读者通过本系列文章，不仅可以深入了解小程序开发的所有技术，还可以获得大量的实战经验。

第01课：小程序初体验

微信小程序是继订阅号、服务号、企业号之后，微信公众平台上全新的一种连接用户与服务的方式，目前已经有大量小程序上线，第一波红利开始显现，希望赶上第一波红利的同学抓紧了，时间不多了。

在开始学习小程序之前，先来看一下如何搭建小程序的开发环境。微信平台上的任何东西，要想使用，首先需有一个账号，小程序也不例外，先到到 去注册一个小程序账号，进入该页面，单击右上角“立即注册”链接，会显示如下图的注册页面。

这 4 个注册类型需要使用 4 个不同的账号，如果读者已经有了订阅号或其他号的账号，仍然需要再次注册小程序账号。

现在单击“小程序”选项，会让你输入邮箱、密码、验证码等信息，这些都是注册的常规流程，这里不再敖述，然后单击下方的“注册”按钮，系统会发送一封 Email 到你注册的邮箱中，单击 Email 中的链接，这时会进入填写注册信息页面。目前小程序的账号注册并不对个人开发，只对如下图所示的 4 种类型的组织。

如果读者有自己的企业，或为单位注册，可以选择相应的类型。如果读者只是个人，可以尝试选择“其他组织”，并任意填写组织代码等信息，据说可以通过，由于本人并没有做这方面的尝试，所以并不能保证一定等通过，读者可以试一下。选择其他类型需要相关的资质证明，如果选择企业需要企业营业执照等信息。

在注册的过程中要用企业账户向腾讯官方的账号打款 0.06 元进行验证（要求在 10 天之内打款，否则验证失败，而且只能是 0.06 元）。不管验证是否成功，款都会退回到原来的企业账户，验证是自动的，但并不是实时的。腾讯的服务端应该是隔一段时间进行一次验证，可能会等几个小时，请耐心等待。

在验证通过之前，仍然可以用注册 Email 登录小程序后台，但无法获取小程序 AppID，验证通过后，会通过站内短信（在小程序后台右上角）进行通知。要注意的是，登录小程序后台的过程中要使用手机微信扫描二维码进行登录，请用管理员的微信扫描登录小程序后台。

当成功注册小程序账号后，可以进入页面进行登录，登录的过程中需要使用管理员的手机微信扫描二维码。刚一登录进小程序的后台管理页面，会看到如下图所示的主页面。

尽管开发小程序，AppID 并不是必须的，但如果要在真机上测试小程序，以及发布小程序，就必须要 AppID 了，这就和 Apple 的开发者账号一样，如果不花 99$/1 年的费用购买开发者账号，就只能在 iOS 模拟器上玩玩了。当然，小程序的 AppID 是不收钱的，只要注册者满足资质，就可以免费注册，并获得 AppID。

如果读者按着上一节的步骤成功注册了小程序账号，并登录到小程序后台管理页面，点击左下角的“设置”链接，在右侧点击“开发设置”选项卡，就会看到“开发者 ID”列表，第一项“AppID（小程序 ID）”后面就是 AppID，如下图所示。

这个 AppID 是我做的一个小程序（极客题库）的 AppID，不过就算大家知道了这个 AppID，也用不了，因为登录时需要用管理员的微信扫描才可以，或者成为该项目的开发者，否则是无法使用别人的 AppID 的。

即使有了 AppID，也不能立即发布小程序，在此之前，还需要设置小程序的基本信息，点击“设置”链接，在右侧点击“基本设置”，会出现一些设置项，如小程序名称、小程序头像等。如果设置完，会有类似下图所示的信息。

当小程序发布后，如果想让别人使用你的小程序，最简单的方式就是提供小程序的二维码，点击页面“二维码”右侧的“下载”按钮，会弹出如下图的页面。

用户可以单击普通二维码和小程序码的相应下载按钮，下载不同尺寸的二维码和小程序码，下图是极客题库小程序码的样式。

第02课：开发第一个小程序：石头剪子布游戏

这一部分将从零开始开发一款微信小程序，该程序的功能很简单，是一个猜拳游戏，单击“开始”按钮后，会快速切换“锤子”、“剪刀”和“布”，直到按“停止”按钮，会显示“锤子”、“剪刀”和“布”中的一个，该游戏可以双方或多方进行猜拳，这里猜拳的规则就不多说了，大家应该很清楚。本节内容的目的是通过该例子，将开发微信小程序的过程完整地跑一遍，从配置开发环境到建立小程序项目，一直到将微信小程序发布到微信平台，并在真机上测试为止。通过该例子，读者可以完全掌握微信小程序的开发流程。

腾讯推出微信小程序的同时，也推出了自己的开发工具，读者可以下载该开发工具的最新版本。

这套开发工具目前支持 Windows32 位、Windows64 位以及 Mac OS X 系统，读者需要根据自己使用的 OS 下载合适的版本。本书主要使用 Mac OS X 版本进行讲解，Windows 版本和 Mac OS X 大同小异，并不影响读者阅读本书的内容。

运行微信小程序 IDE 后，会看到如下图所示的窗口。

单击“小程序项目”按钮，会显示如下图的小程序项目管理页面。

要想新创建小程序项目，需要单击右下角的加号按钮，会弹出如下图所示的页面，选择一个空的项目目录，然后输入 AppID，如果不输入 AppID，无法在真机上发布，最后输入项目名称。

一切都搞定后，单击“确定”按钮创建小程序项目，主界面如下图所示。

单击如下图所示的 index.wxml 文件，输入布局代码，wxml 文件是小程序中的布局文件，用于描述小程序中的 UI。关于 wxml 文件的详细内容，会在后面的内容中详细描述。

下面先看一下猜拳游戏的主界面，如下图所示。

猜拳游戏的布局是纵向显示了三个组件：文本组件（text）、图像组件（image）和按钮组件（button）。在创建小程序工程时，默认建立了两个页面：index 和 logs。我们不需要管 logs，在这个例子中只修改和 index 页面相关的文件，index 是小程序第一个显示的页面，其中 index.wxml 文件是 index 页面的布局文件，现在打开该文件，并按下面的内容修改代码。

完全相同）。在改变组件的属性值时，并不需要直接获取该组件的实例，而只需将该属性与某个同类型的变量绑定，一旦该变量的值改变，属性值也就会随之改变了，绑定变量的格式是“{{变量名}}”。改变了的定义和初始化部分，在后面的部分会详细介绍。

我们发现，就算按前面的布局，仍然不能像上图所示那样摆放组件，这是因为还需要将下面代码调整一下样式（index.wxss 文件）。

前面的布局代码主要调整了 userinfo-avatar 的宽度和高度，让图像显示得更大一些。最后，还需要修改一下 app.wxss 文件的代码，将 padding 属性的值改成 50 rpx 0，代码如下：

当然，现在可能仍然无法显示图像，因为 imagePath 变量还没有设置，而且图像还没有放到工程目录。现在读者可以到网上找三张图片，分别是剪子、石头和布，当然，也可以用本例提供的图像，并在小程序工程根目录建立一个 images 目录，将这三个图像文件放到该目录中。

控制剪子、石头、布的快速切换

猜拳游戏的核心就是快速切换剪子、石头、布三个图像，当单击“停止”按钮后，会停到其中一个图像上，这里涉及到如下两个动作：

• 用定时器快速切换图像。
• 图像下方的按钮，当一开始单击时，文本变成了“停止”，当再次单击该按钮后，按钮文本又变成了“开始”，也就是说，一个按钮同时负责开始和停止图像快速切换两个动作。

控制图像快速切换和按钮文本变化两个动作的代码都要写在 index.js 文件中。首先将这三个图像文件名存储在一个全局的数组中，并使用定时器快速从这个数组中依次循环获取图像文件名，并将该文件名指定的图像显示到 image 组件中，修改按钮的文本只需要修改 title 变量即可。

这里涉及到两个主要变量：imagePath 和 title，这两个都定义在 data 对象中，单击按钮会执行 guess 函数（在 index.wxml 文件中使用 bindtap 属性指定按钮的单击事件函数名），该函数也需要在 index.js 中编写，完整的实现代码如下：

是不是这个猜拳游戏很简单呢，这么点儿代码就搞定了，现在可以通过左侧的模拟器来测试我们的成果了。大家可以单击“开始”按钮，看看图像是否会快速切换，再单击“停止”按钮，看看是否会停止在某个图像上。

现在轮到用真机测试我们的成果了。如果只想在真机上测试，用管理员微信登录小程序 IDE 都可以，单击 IDE 工具栏中的“预览”按钮，会弹出一个带二维码的页面，如下图所示。用管理员的账号登录手机微信，扫描该二维码，猜拳游戏就会在手机上运行。

在真机上的测试效果如下图所示。

如果在模拟器上开发小程序，很容易在 Console 中查看调试信息，但如果在真机上运行呢？其实也有办法查看调试信息。现在按着前面讲解步骤在真机上运行小程序，然后点击右上角的省略号（…）菜单，会弹出如下图所示的菜单。

点击“打开调试”菜单项，这时当前小程序需要关闭，然后重新进入，此时会看到右下角有一个绿色的 vConsole 按钮，如下图所示。

点击 vConsole 按钮，就会显示打开真机上的 Console，并显示调试信息，如下图所示，关闭 Console，用同样的操作即可。

如果觉得在真机上测试没问题，那么可以单击工具条上的“上传”按钮将小程序上传到腾讯的服务器，单击“上传”按钮后，也会显示一个如下图所示的窗口，输入版本号和描述，单击“上传”按钮，即可上传到腾讯服务器。

成功上传小程序后，回到小程序的后台，点击左侧的“开发管理”选项，会看到如下图所示的三个小程序版本的管理页面。我们直接上传的是开发版本，如果管理员认为没问题，可以单击“提交审核”按钮，会将小程序提交给腾讯，这就是审核版本，如果腾讯审核通过，就正式上线了，这就是线上版本。

本课用一个完整的例子从头到尾演示了从开发小程序，到真机测试，再到上传发布的完整过程。尽管本章提供的例子非常简单，但足以清楚地展示了小程序开发的完整过程，不过要想开发牛逼的小程序，还需要继续阅读后续的文章。

布局是任何支持 UI 的技术都涉及到的，小程序的布局采用了和 React Native 相同的 flex（弹性布局）方式，使用方法也类似（只是属性名不同而已），因此，如果读者已经对 React Native 的布局比较了解，那么将非常容易掌握小程序布局，即使对 React Native 的布局不了解，通过对本课的学习，也可以掌握小程序布局的核心技术。

小程序的布局和 React Native 的布局类似，采用了弹性布局的方法，也就是说，分为水平和垂直布局。默认是从左向右水平依次放置组件，从上到下依次放置组件。

wxml 文件用于放置参与布局的组件，为了更好地描述小程序是如何布局的，本课使用了带背景色的 view 组件来演示，view 是小程序中所有可视组件的根。

任何可视组件都需要使用样式来设置自身的属性，并完成相应的布局。在小程序中，可以使用两种方式设置样式，一种是 class 属性，另外一种是 style 属性。前者需要指定在 wxss 文件中定义的样式，后者允许直接在组件中定义样式属性。例如，如果要水平放置三个 view 组件，可以在 wxml 文件中使用下面的代码。

在这段布局代码中使用了一些样式，所以需要在 index.wxss 文件中加入下面的样式代码。

布局的效果如下图所示。

然后修改 index.wxml 文件中的代码如下：

可能很多读者会发现一个问题，本文的例子只有三个 view，如果放置了多个 view 会怎么样呢？从 flex-item 样式可知，每个 view 的尺寸是 100*100，单位是像素（px），如果放置过多，可能会发生如下两种情况。

• 压缩每一个 view 的宽度

那么到底会发生哪种情况呢？我们不妨做一个实验，代码如下：

上面的代码很明显，view 中包含了 9 个子 view，保存 index.wxml 文件后，会显示如下图所示的效果。

很明显，每一个 view 的宽度都被压缩了（因为每一个 view 的默认尺寸是一个正方形），以适应设备的宽度。不过可能这种处理方式并不符合我们的要求，如果要求是让每一个 view 的尺寸保持不变，如果一行放不下，就折到下一行，那应该怎么办呢？答案就在下一部分！

其实要想让 view 折行也很简单，只需要加一个 flex-wrap:wrap 即可，代码如下：

修改后的运行效果如下图所示。

注意：选择不同的手机模拟器（如 iPhone6 Plus、iPhone5），效果可能是不同的，因为每一行能显示的彩色方块数量是不同的。

只需要设置 flex-direction 的值为 column，就可以将水平排列改成垂直排列，代码如下：

在这段代码中，将顶层 view 的高度设为 300 px，而每一个子 view 的高度是 100 px，所以垂直方向三个 view 会紧挨着显示，效果如下图所示。

那么在垂直方向，如果子 view 过多会怎么样呢？如下面代码所示。

如果使用上面的布局，会看到如下图所示的显示效果。

很明显，所有的子 view 都被压缩在垂直高度 300 px 的空间内（宽度未改变），那么能否让垂直排列的子 view 折列呢？请看下一部分的介绍。

折列和折行的方式一样，只需要加上 flex-wrap:wrap 即可，可以使用 style 属性添加，或在样式中添加，然后使用 class 属性引用样式。下面的代码使用 style 属性添加了 flex-wrap:wrap。

使用上面的布局后，会看到如下图所示的效果。

从上图的效果可以看出，折列排列是在第2列、第3列从上到下依次排列的。

在上面看到的水平排列都是从左侧开始排列的，其实这是默认的对齐方式：左对齐，在 style 属性中加入 justify-content: flex-start，代码如下：

除了左对齐，还有右对齐和中心对齐，只需要将 justify-content 的值改成 flex-end 和 center，即可实现右对齐和中心对齐的效果，右对齐的布局代码如下：

右对齐的效果如下图所示。

中心对齐的代码布局代码如下：

中心对齐的效果如下图所示。

对于垂直排列来说，如果改变对齐方式，是否可以采用水平排列的方式呢？例如，下面的布局代码是否有效呢？

保存文件后，会看到如下图所示的效果。

很显然，垂直排列的三个 view 并没有右对齐。其实，对于垂直排列来说，需要使用 align-items 属性（默认是左对齐），而不是 justify-content 属性，这两个属性的取值基本上相同。例如，下面的布局代码让三个垂直排列的 view 右对齐。

垂直排列右对齐的效果如下图所示。

下面的布局代码让垂直排列中心对齐。

垂直排列中心对齐的效果如下图所示。

如果垂直排列是右对齐或中心对齐的方式，那么如果折列，会是怎么的一种效果呢？例如，下面的布局代码垂直方向右对齐，并且折列。

从上图所示的效果来看，即使是右对齐，如果需要折列，显示的第一列仍然是从靠左方向开始的（从 view 的背景色就可以看出，第 4 个 view 的背景色是蓝色），然后向右折列（但最后一列需要紧贴着父视图右边缘，因为是右对齐）。如果是中心对齐，方式相同，也是从左向右像是。

下面是中心对齐并折列的布局代码。

如果想让 view 均匀地水平分别在窗口上，每两个 view 之间的间隔相同，那么就需要将 justify-content 属性的值设为 space-between，布局代码如下：

显示的效果如下图所示。

如果子 view 过多，并且设置为折行显示，那么子 view 会如何排列呢？先看下面的布局代码。

使用上面的布局，会得到如下图所示的效果。

从上图所示的效果来看，不管折多少行，同一行相邻两个 view 之间的间距都是相等的。