小程序开发之路一

开发总结

布局

大多数使用 flex 布局，主要参考阮一峰老师的骰子布局博客。

经常性会使用到的是：

align-items: center; //垂直居中
justify-content: center; //水平居中

使用该布局可以解决大多数的问题，除了叠加以及不标准的布局外。

叠加的情况：

image.png

这种头部不动，下层需要滑动的，可以给头部设置 position:fixed; 以及z-index:999; 层级设置高一点。

下面这种布局，

image.png

直接外布局用 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 有对应的库，有热心开发者对此做了适配小程序的版本，不我在使用的过程中发现第一次加载的时候，出来的二维码是乱码，目前的解决方式就是延时显示。

开发

遇到的问题

1. 小程序底部 tabBar 中的图标大小不能通过代码修改，只能是让 UI 切图，需要注意，不是切的图越大，图标就越大，而是留白越少，图越大。正常情况下留白应该是四分之一，也就是 200x200 像素的图片但是实际图片真实部分是165x165 左右。

2. 小程序页面传参数其实和普通网页一样，就是在 url 中拼接参数。但是有一个比较特殊，就是

             wx.switchTab({
               url: '',
             });
   

   当采用以上这种跳转方式的时候，跳转到带 tabBard 的页面时，是不能够在 url 中拼接参数的，即使拼接了在另一个页面 onLoad 的 option 中，什么也拿不到。 对此可以采取曲线救国的方式，在跳转前将需要传递的参数保存到全局变量中，在新打开的页面中通过全局变量来获取。

3. 小程序不能使用本地的图片当做是背景图片。解决方案有三种

   1. 采用网络图片背景
   2. 将图片转成 base64
   3. 通过层级叠加的方式 position:absolute;

4. 在小程序中使用 echart 绘制图标，由于 echart 底层是采用的 canvas 绘制图形的，而在小程序中 canvas 的层级是最最高的，所以如果使用 canvas 控件的页面，而且又想一些控件可以叠加在它的上面，就出现一些问题，微信提供了一个控件解决该问题，但是也有一些控件不能采用这种方式，那么此时，还可以改变一下思路，可以将 echart 绘制出来的图像转化成图片的形式，这样就层级就没那么高了。

5. 在 iphone 真机中，许多时候 1prx 高度的分割线不会显示，需要设置为 2rpx

6. 在前端网页中字体最小能生效的值是 12px，如果设置的比这个小，在前端网页中是不会起作用的，但是在手机端是会变小的，如果想在网页中生效可以使用 transform: scale(0.8);