微信小程序开发，实现商品Grid(网格)列表

1. 微信小程序开发文档指南

小程序开发指南： https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a

2. Flex布局语法教程

https://www.runoob.com/w3cnote/flex-grammar.html?spm=a2c6h.13046898.publish-article.4.fcb46ffarw0mns

3. 代码实现过程

1.布局文件： index.wxml

<view class="grid-container">
      <view class="grid-item ">
      <image src="https://img1.baidu.com/it/u=4029400567,3042480412&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" mode="aspectFill" />
      <text>优花33枝红玫瑰</text>
      <text>99</text>
    </view>

    <view class="grid-item ">
      <image src="https://img1.baidu.com/it/u=3829932003,630069526&fm=253&fmt=auto&app=138&f=JPEG?w=394&h=371" mode="aspectFill" />
      <text>优花33枝红玫瑰</text>
      <text>99</text>

    </view>
    <view class="grid-item ">
      <image src="https://img2.baidu.com/it/u=3779657532,3917549561&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill" />
      <text>优花33枝红玫瑰</text>
      <text>99</text>

    </view>
    <view class="grid-item ">
      <image src="https://img1.baidu.com/it/u=1759993325,2084070182&fm=253&fmt=auto&app=138&f=PNG?w=498&h=500" mode="aspectFill" />
      <text>优花33枝红玫瑰</text>
      <text>99</text>

    </view>
    <view class="grid-item ">
      <image src="https://img0.baidu.com/it/u=1675037441,1533461424&fm=253&fmt=auto&app=120&f=JPEG?w=300&h=300" mode="aspectFill" />
      <text>优花33枝红玫瑰</text>
      <text>99</text>

    </view>
    <view class="grid-item ">
      <image src="https://img0.baidu.com/it/u=1281911112,1084861743&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill" />
      <text>优花33枝红玫瑰</text>
      <text>99</text>

    </view>

  </view>

2. 样式文件：index.wsxx

/* 底部精选好品区域 */
.grid-container {
    
    
  display: flex;
  flex-wrap: wrap; /* flex-wrap: wrap 一行显示不下，自动换行 */
  margin: 16rpx;
  justify-content: space-between;  /* space-between 元素两端对齐，剩余空间元素间隔都相等 */
}

.grid-item {
    
    
  display: flex;
  width: 32%;
  flex-direction: column;
  box-sizing: border-box;
  margin-top: 16rpx;
}

.grid-item > image {
    
    
  width: 100%;
  height: 320rpx;
  border-radius:  10rpx 10rpx 0 0;
}

温馨提示
grid-item的宽度设置为百分比，一行平分3等分，也就是33.33%，我这里设置32%，就是为了留一部分空白区域来巧妙设置间隔（配合justify-content: space-between，就可以实现间隔等分效果）

4. 运行效果

5. 动态列表渲染

在上面.wxml布局中，商品列表是通过view堆积起来的，在实际开发中，肯定也不能这样写死，列表数据应该是一个动态的

使用列表渲染来实现数据动态显示

1. 官方文档

数据绑定：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
列表渲染： https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

2. 语法
   wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

示例：

<view wx:for="{
    
    {array}}">
  {
    
    {
    
    index}}: {
    
    {
    
    item.message}}
</view>

Page({
    
    
  data: {
    
    
    array: [{
    
    
      message: 'foo',
    },
     {
    
    
      message: 'bar'
    }]
  }
})

3. 代码改造

index.wxml

  <view class="grid-container">
    <view class="grid-item " wx:for="{
    
    {excellentProduct}}" wx:key="*this">
      <image src="{
    
    {item.posterUrl}}" mode="aspectFill" />
      <text>{
    
    {
    
    item.title}}</text>
      <text>{
    
    {
    
    item.price}}</text>
    </view>
  </view>

在index.js中模拟动态列表数据

// index.js
Page({
    
    

  data: {
    
    
  
   // 精选好评数据
    excellentProduct: [
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=4029400567,3042480412&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300", price: "199" },
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=3829932003,630069526&fm=253&fmt=auto&app=138&f=JPEG?w=394&h=371", price: "69" },
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img2.baidu.com/it/u=3779657532,3917549561&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", price: "99" },
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=1759993325,2084070182&fm=253&fmt=auto&app=138&f=PNG?w=498&h=500", price: "89" },
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img0.baidu.com/it/u=1675037441,1533461424&fm=253&fmt=auto&app=120&f=JPEG?w=300&h=300", price: "49" },
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img0.baidu.com/it/u=1281911112,1084861743&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", price: "109" },

      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=4029400567,3042480412&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300", price: "199" },
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=3829932003,630069526&fm=253&fmt=auto&app=138&f=JPEG?w=394&h=371", price: "69" },
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img2.baidu.com/it/u=3779657532,3917549561&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", price: "99" },
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=1759993325,2084070182&fm=253&fmt=auto&app=138&f=PNG?w=498&h=500", price: "89" },
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img0.baidu.com/it/u=1675037441,1533461424&fm=253&fmt=auto&app=120&f=JPEG?w=300&h=300", price: "49" },
      {
    
     title: "优花33枝红玫瑰", posterUrl: "https://img0.baidu.com/it/u=1281911112,1084861743&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", price: "109" },
    ]
  }

})