校园快递平台demo开发

之前的瑞幸咖啡项目暂时被喊“卡”，又被分配到另一个项目中去了。目前的话仿瑞幸咖啡的项目已完成商品添加，商品详情，商品列表三个页面。博客中暂时只写了商品添加的页面，感兴趣的可以移步

小程序·云开发 - 仿瑞幸咖啡小程序（一） - 从入门到辞职

小程序·云开发 - 仿瑞幸咖啡小程序（二） - 从入门到辞职

该项目还是有后续的，不过暂时要等手头上的校园快递结束之后了。

下面开始我们的校园快递平台demo

首先，我们新建一个项目，因为要跟APP和PHP联动，暂时不使用云开发功能了。

我们先统一一下小程序的整体名字。打开app.json，修改标题的文字。

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "校园快递平台",
    "navigationBarTextStyle":"black"
  },

然后开始搭建首页。

首页只有banner。还有三个按钮

banner只需要放一个图片上去。然后图片处理的时候我选择了mode="aspectFill"，因为这样的话就可以防止图片过小而有空白，又可以在图片过大是能显示完整的一部分。

三个按钮在排列上是属于横向排列，所以在最外围添加一个view。然后设置display:flex;flex-direction:row;justify-content:space-between;这样就可以让三个按钮排列了。

按钮的分析：

按钮分为上下两层，将其包裹在一个view里。然后第一层放图片，第二层放文字。这里的图片跟之前的banner不一样，这里显示的是icon，所以我们需要将图片设置成mode="aspectFit"这样就可以将整个icon显示出来。

至此，快递平台首页结束。