微信小程式雲開發-雲存儲-擷取帶圖檔的商品清單

一、将商品圖檔上傳至雲存儲

如下圖，已準備5張商品圖檔，并且已經将商品圖檔上傳至雲存儲

 二、資料庫表添加圖檔字段

在資料庫表goods添加字段image，該字段用來存儲圖檔的url資訊

 image在資料庫中的值，從雲存儲中複制對應圖檔的url位址。

 三、頁面擷取商品資訊（商品圖檔、商品名稱和商品價格）

1、wxml檔案

<view wx:for="{{list}}" class="list">
<image src="{{item.image}}" class="image"></image>
<text>商品名稱：{{item.name}}</text>
<text>商品價格：{{item.price}}</text>
</view>      

 2、wxss檔案

.image{
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}
.list{
  border-bottom: 1rpx solid gainsboro;
  padding: 10rpx 20rpx;
}      

 3、js檔案

Page({
  onLoad(){
    wx.cloud.database().collection("goods")
    .get()
    .then(res=>{
      console.log("請求成功",res);
      this.setData({
        list:res.data
      })
    })
    .catch(err=>{
      console.log("請求失敗",err);
    })
  }
})      

4、效果圖