（一）小程序集成Bmob作为数据存储
（二）小程序中Flex布局
（三）小程序使用高德地图获取地理位置
（四）小程序列表条目点击
（五）小程序下拉刷新、上拉加载
（六）小程序总结
Flex布局相对float布局简单、方便。可以减少wxss的代码，同时符合小程序开发文档要求。Flex是Flexible Box的缩写，意为“弹性布局“，使用Flex布局的元素，称为Flex容器(Flex container),简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
一、容器的属性
| 容器属性 | 属性值 |
|---|---|
| flex-direction 决定主轴方向 | row：主轴为水平方向，起点在左端(默认) row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿 |
| flex-wrap 如何换行 | nowrap：不换行(默认) wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方 |
| flex-flow flex-direction和flex-wrap的简写形式 | row nowrap(默认) |
| justify-content 主轴的对齐方式 | flex-start：左对齐(默认) flex-end：右对齐 center：居中 space-between：两端对齐，项目间隔相等 space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍 space-evenly：项目在主轴上均匀分布，间距一样 |
| align-items 项目在交叉轴上如何对齐 | stretch：项目未设置高度或设未auto，占满整个容器的高度 flex-start：交叉轴起点对齐 flex-end：交叉轴终点对齐 center：交叉轴中点对齐 baseline：项目的第一行文字的基线对齐 |
| align-content 多根轴线的对齐方式 | stretch：轴线占满整个交叉轴 flex-start：与交叉轴的起点对齐 flex-end：与交叉轴的终点对齐 center：与交叉轴的中点对齐 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布 space-around：每根轴线两侧的间隔豆相等，轴线之间的间隔比轴线与边框的间隔大一倍 |
二、项目的属性
| 项目属性 | 属性值 |
|---|---|
| order 项目的排列顺序 | 默认0 数值越小，排列越考前 |
| flex-grow 项目的放大比例 | 默认0（如果存在剩余空间，也不放大） |
| flex-shrink 项目的缩小比例 | 默认1（空间不足，项目缩小） |
| flex-basis 分配多余空间之前，项目占据的主轴空间 | 默认auto(项目本来大小) |
| flex flex-grow, flex-shrink 和 flex-basis的简写 | auto(默认) 等价于0 1 auto none：等价于0 0 auto 非负数值 0：相当于0 1 0% |
| align-self 单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性 | 默认auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 该属性有6个值，除了auto，其他都与align-items属性一样 |
3、使用Flex
这是我all页面的布局
我们来看这个布局
1、左右分成两个部分（红线）
2、右边部分垂直向下分成五部分（绿线）
3、（黄线）部分显示九张图片
先来实现第一条 左右分成两部分
view style='display:flex;'view style='width:20%;height:200rpx;background:#1afa29;' /viewview style='width:80%;height:200rpx;background:#1296db;'/view/view右边部分垂直向下分成五部分
!--index.wxml--view style='display:flex;' view style='width:20%;height:200rpx;background:#1afa29;' /view view style='width:80%;height:200rpx;background:#1296db;' view style='display:flex;flex-direction: column;' textevery/text text测试/text view style='background:#f4ea2a;width:100%; height:200rpx'/view textaddress/text textdate/text /view /view/view黄色部分显示九张图片
!--index.wxml--view style='display:flex;'!--左边部分-- view style='width:20%;height:200rpx;background:#1afa29;' image src='{{avater}}' style='width:80%;height:130rpx; margin-left:10%'/image /view !--右边部分-- view style='width:80%;background:#1296db;' view style='display:flex;flex-direction: column;' textevery/text text测试/text !--九张图片-- view style='background:#f4ea2a;width:100%; display:flex;flex-wrap:wrap;' image style='width:30%;height:200rpx;padding:1.5%' src="{{avater}}" wx:for="{{[1,2,3,4,5,6,7,8,9]}}"/image /view textaddress/text textdate/text /view /view/view源码下载
