一、将商品图片上传至云存储
如下图,已准备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、效果图