开发总结
布局
大多数使用 flex 布局，主要参考阮一峰老师的骰子布局博客。
经常性会使用到的是：
align-items: center; //垂直居中
justify-content: center; //水平居中
使用该布局可以解决大多数的问题，除了叠加以及不标准的布局外。
叠加的情况：
这种头部不动，下层需要滑动的，可以给头部设置 position:fixed; 以及z-index:999; 层级设置高一点。
下面这种布局，
直接外布局用 position:relative 里面的小布局使用 position:absolute; ，然后自己调制位置即可。
外部工具
地图组件：
在小程序自带的地图组件不能满足需求的情况下，可以使用例如百度地图。
图表组件：
可以使用非常出名的 ECharts 小程序版本。
关于 echarts 图表的开发心得其实就是。。 比较快速的找到对应样式的 api 。找到 api 然后在线上修改样式，调整到满意的样式之后，复制 option 到本地配置中即可。
有个比较坑的地方是，部分 ECharts 功能在小程序上并没有兼容，例如热力图功能。 因而只能采用 H5 页面来完成这部分功能。
还有一些配置项在不同机型上表现不太一样，例如折线图的 areaStyle 属性中，如果颜色采用渐变色，在安卓手机上并没有渐变的效果。
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0, [{
offset: 1,
color: '#2468F6',
},
{
offset: 0,
color: '#151b2c',
}
]
)
字符串生成二维码
js 有对应的库，有热心开发者对此做了适配小程序的版本，不我在使用的过程中发现第一次加载的时候，出来的二维码是乱码，目前的解决方式就是延时显示。
开发
遇到的问题
小程序底部
tabBar中的图标大小不能通过代码修改，只能是让 UI 切图，需要注意，不是切的图越大，图标就越大，而是留白越少，图越大。正常情况下留白应该是四分之一，也就是 200x200 像素的图片但是实际图片真实部分是165x165 左右。-
小程序页面传参数其实和普通网页一样，就是在 url 中拼接参数。但是有一个比较特殊，就是
wx.switchTab({ url: '', });当采用以上这种跳转方式的时候，跳转到带
tabBard的页面时，是不能够在 url 中拼接参数的，即使拼接了在另一个页面onLoad的option中，什么也拿不到。 对此可以采取曲线救国的方式，在跳转前将需要传递的参数保存到全局变量中，在新打开的页面中通过全局变量来获取。 -
小程序不能使用本地的图片当做是背景图片。解决方案有三种
- 采用网络图片背景
- 将图片转成 base64
- 通过层级叠加的方式
position:absolute;
在小程序中使用 echart 绘制图标，由于 echart 底层是采用的 canvas 绘制图形的，而在小程序中 canvas 的层级是最最高的，所以如果使用 canvas 控件的页面，而且又想一些控件可以叠加在它的上面，就出现一些问题，微信提供了一个控件解决该问题，但是也有一些控件不能采用这种方式，那么此时，还可以改变一下思路，可以将 echart 绘制出来的图像转化成图片的形式，这样就层级就没那么高了。
在 iphone 真机中，许多时候 1prx 高度的分割线不会显示，需要设置为 2rpx
在前端网页中字体最小能生效的值是 12px，如果设置的比这个小，在前端网页中是不会起作用的，但是在手机端是会变小的，如果想在网页中生效可以使用
transform: scale(0.8);
