文章适合小白，零基础，或者没学过小程序的在职人员。
平常我们在支付宝上看到这样的效果，一排四个，每一排，上面是icon图片，下面是文字描述，今天我们就在小程序中实现这个效果。
只用到两个文件：.wxss文件和wxml文件
在wxml文件中：
<view class="menu">
<navigator url="" class="menu-item">
<image src="../../images/img-icon/tubiao-.png" mode="widthFix" class="menu-img"></image>
<text class="menu-name">商品大全</text>
</navigator>
</view>
<navigator>标签是页面链接，功能相当于js中的<a>标签，
<image>图片标签，属性src后面表示的是图片路径，mode也是图片属性，详情可以参考官网image | 微信开放文档
具体的代码布局就是这样的：
想加icon（图片）依次复制就可以了
.wxss文件代码：
.menu{
display: flex; /*弹性布局*/
flex-wrap: wrap; /*允许换行*/
}
.menu-item{
width: 25%; /*一行排四个icon，每个icon占比25%*/
padding: 5px; /*icon与icon的距离*/
}
.menu-img{
width:100%; /*25%的100%*/
}
还有一个重点就是如果不加box-sizing: border-box;，效果就是这样的，不在一行，所以要在.menu-item加上这个，具体原因还要看原生js了，在这里就不做赘述了。
.menu-item{
width: 25%;
padding: 5px;
box-sizing: border-box;
}
加上之后就变成一排了
考虑到页面更好看，还可以在加上以下代码：
