开发流程

在开发前，首先要有原型图和UI视觉图。
原型图通常是由产品经理使用Axure 绘制，原型图会用简单的图形和文字展示页面功能，比如页面元素的布局和交互逻辑。
UI视觉图就是基于原型图的页面布局出的最终视觉效果图。
当然，若页面不复杂，原型图和UI 视觉图也可能都画在一起。

我们开发者要做的，就是基于UI的视觉效果和原型图的交互逻辑开发小程序。
我们可以按照以下三步走：

    WXML+WXSS还原设计稿。
    按照页面交互，梳理出每个页面的data部分，填充WXML的模板语法。
    完成JS逻辑部分。

注意：高效的开发流程有很多种方式，具体还得看团队的工作节奏，我们刚才说的只是最常规的。
比如，若产品交互体验还不明确，我们可以先完成一些局部功能，比如与后端数据的对接，并且做好测试。
flex 布局

微信小程序里的flex 布局和网页开发中的flex 布局是一样的。
flex 布局可以实现一些灵活的比较高的效果，比如：信息列表中，要求文字在内容高度不确定下保持垂直居中。
在这里插入图片描述
flex 的概念

container：容器，采用flex布局的元素
item：项目，容器内的元素
在这里插入图片描述
容器的属性

    display：flex;
    flex-direction 主轴的方向 ： row（默认值） | row-reverse | column |column-reverse
    flex-wrap 换行方式： nowrap（默认值） | wrap | wrap-reverse
    justify-content 主轴上的对齐方式 ： flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
    align-items 交叉轴上的对齐方式 ： stretch（默认值） | center | flex-end | baseline | flex-start
    align-content 多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多余的空间：stretch（默认值） | flex-- start | center |flex-end | space-between | space-around | space-evenly