商品的引入

这里我没有使用云开发中的云数据库来存储数据，而是直接在js文件中添加了数据，现在home.js文件中的data页面初始数据中创建一个goodsdata，来存储商品数据，数据里面的内容可以自己选择性的添加，这里我添加了一些必须使用到的，比如说价格，名称之类的。这些详情数据后续会通过vant weapp组件库中的tag标签组件漂亮的展示在wxml主页面中。

goodsData: [
     {
       id:1,
       cateId: 3,
      "Title": "肉蛋青菜炒粉",
      "SaleAmount":9.88, 
     },
     {
       id: 2,
       cateId: 2,
      "Title": "xx区新疆腊肉炒饭",
      "SaleAmount":11.88,
     },

这里的商品图片是我从百度上面找的，可以自行更换，自己添加一个GoodsImages,类似于这样多创建几个数据，这样我们就有基本的商品了。

wxml的商品展示

接下来我们需要使用for循环来将上述商品全部展示出来，以及商品的信息。

<view class="goods-list">
    <view class="item" wx:for="{{goodsList}}" wx:key="id" >
        <image src="{{item.GoodsImage}}"></image>

上述代码可以让我们之前定义的每一个商品数据都通过wx-for以及插值表达式{{}}渲染到了wxml的页面中，还有一些wxss样式都在wxml文件中，这里样式代码我没有另外写在wxss文件中，介意的可以自行修改。

通过上述的代码，这样我们每件商品的图片就获取到了并且展示到了wxml页面上，还有一些css样式以及商品的一些描述标签还没加入，后续会持续更新。成品如下图：

小程序云开发初体验——外卖商品的排布①（day18）

商品的引入

wxml的商品展示