微信小程序实现商品列表

要实现商品列表，需要以下步骤：

1. 创建一个包含商品信息的数组

在小程序的js文件中，创建一个包含商品信息的数组，每个商品信息包含名称、图片、价格等属性。

var goodsList = [
  {
    name: '商品1',
    image: 'http://xxx.com/1.jpg',
    price: 100
  },
  {
    name: '商品2',
    image: 'http://xxx.com/2.jpg',
    price: 200
  },
  ...
];

2. 在wxml文件中创建商品列表

在小程序的wxml文件中，使用wx:for指令遍历商品列表，并将每个商品信息渲染到页面上。

<view wx:for="{{goodsList}}">
  <image src="{{item.image}}" />
  <view>{{item.name}}</view>
  <view>{{item.price}}</view>
</view>

3. 完善商品列表样式

根据需求，对商品列表样式进行调整，例如设置图片大小、字体样式等。

<view wx:for="{{goodsList}}" class="goods-item">
  <image src="{{item.image}}" class="goods-image" />
  <view class="goods-name">{{item.name}}</view>
  <view class="goods-price">{{item.price}}</view>
</view>

4. 在样式文件中设置商品列表样式

在小程序的样式文件中，对商品列表样式进行设置，例如设置每个商品之间的间距等。

.goods-item {
  margin-bottom: 20rpx;
}
.goods-image {
  width: 150rpx;
  height: 150rpx;
}
.goods-name {
  font-size: 30rpx;
  color: #333;
}
.goods-price {
  font-size: 28rpx;
  color: #f00;
}

以上就是实现商品列表的基本步骤。如果需要实现更复杂的功能，例如商品筛选、商品详情等，需要进行进一步开发。