背景

从0开发个微信小程序，使用云开发，做的是同城微圈类似，名字还没想好。

开发目标

wxml代码实现

<view class="body">
  <block wx:for="{{pic1}}">
    <view class="body_item" data-id="{{item.id}}" bindtap="goDetail">
      <image class="body_pic" src="{{item.pic}}"></image>
      <view class="body_name">{{item.name}}</view>
    </view>
  </block>
</view>
<view class="body" style="padding-top:0rpx;padding-bottom:20rpx;">
  <block wx:for="{{pic2}}">
    <view class="body_item" data-id="{{item.id}}" bindtap="goDetail">
      <image class="body_pic" src="{{item.pic}}"></image>
      <view class="body_name">{{item.name}}</view>
    </view>
  </block>
</view>

home.js初始数据

样式 home.wcss

.body{
  margin: 0 auto;
  padding:20rpx 0rpx 0rpx 40rpx;
  display: flex;
  flex-direction: row;
}
.body_item{
  text-align: center;
  margin: 10rpx 36rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 112rpx;
}
.body_pic{
  width: 96rpx;
  height: 96rpx;
}
.body_name{
  font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei";
  font-size: 26rpx;
  color:rgb(53, 53, 53);
}

最后效果就是

开发过程记录的，比较简单纪要。

我将一个个模块开发的情况，步骤，都汇总在这边了哦，如果有感兴趣的 ，可以一起学习交流下。