1、效果图

在小程序中完成上述布局，需要设置四个按钮位置，控制每个按钮大小、设置按钮背景颜色，设置标题和图标的位置。

2、代码说明

2.1 index.wxml

<view class="block">
  <!--呈现标题-->
  <view class="title-bar">
    <text>助手功能模块</text>
    <text>FUNCTION</text>
  </view>
  <!--呈现按钮，用的是循环控制，也可单独写四个一样的代码，更换里面的背景颜色、文字内容和图标-->
  <view class="content-bar">
    <button wx:for="{
         
  {list}}" wx:key="*this" class="list" style="background-image:url({
         
  {item.imageurl}});">
      <text class="title">{
         
  {item.title}}</text>
      <view class="icon iconfont {
         
  {item.icon}}"></view>
    </button>
  </view>
</view>

2.2 index.wxss

/*按钮中的icon使用的是iconfont，因此引入了iconfont中的样式*/
@import "icon.wxss";
.block{
  display: flex;
  flex-direction: column;
  font-size: 35rpx;
  font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
}

.title-bar {
  opacity: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.content-bar {
  background-color: white;
  height: 400rpx;
  width: 100%;
  display: flex;
  /* flex-direction是用来控制里面的内容时水平呈现还是垂直呈现*/
  flex-direction: row;
  /* flex-wrap是用来控制能否换行，必须设置为能换行 */
  flex-wrap: wrap;
  padding-top: 20rpx;
  padding-right: 10rpx;
}
.list {
  padding: 20rpx 20rpx;
  display: flex;
  flex-direction: row;
  /* 背景图片能够完全呈现，此处是关键，否则图片只显示局部 */
  background-size: 100% 100%;
}

.list:not([size="default"]) {
 /* 因为是按钮，有两个size，它的大小无法改变，此样式用来改变按钮的大小 */
  height: 150rpx;
  width: 45%;
}

.title {
  font-size: 30rpx;
  color: white;
  padding-top: 30rpx;
  padding-left: 20rpx;
}

.icon {
  color: white;
  padding-left: 30rpx;
}

2.3 icon.wxss

该文件放置在与index.wxss同一目录下。

备注：若读者想根据需要产生iconfont进行引用，可通过如下几步进行操作。

（1）登录 阿里巴巴矢量图标库，github或微博登录；

（2）选择喜欢的图标加入购物车；

（3）然后点击右侧购物车，选择添加至项目，选择项目名称，选择font class，下载至本地；

（4）选择iconfont.css，用记事本打开，将内容粘贴到icon.wxss即可。

2.4 index.js

2.5 引用的json.js

将json.js放置在于index.js同一文件夹下。

备注：此处图片转base64，我用的是

将图片转为base64是因为在真机上background-image无法识别图片路径，而可以识别base64。

3 结束语

里面的部分效果，我是亲踩了坑才得以实现的，如果你想做出想要的效果，希望我的这篇博客能对你有所帮助。