云开发（微信-小程序）笔记（七）----云存储，你来了（上）
1.上传并显示图片
1.准备图片上传到云存储中
2.在Goods表中添加img字段，并把下载地址（只有问号之前的部分）或fileID 作该字段的值
3.创建一个页面goods
（1）在app.json中的pages字段中添加如下
"pages/goods/goods",
4.编写goods.js字段
// pages/goods/goods.js Page({ onLoad(){ wx.cloud.database().collection('Goods').get() .then(res => { console.log('请求成功！',res) this.setData({ list: res.data }) }) .catch(res => { console.log('请求失败！',res) }) } })
5.编写goods.wxml,显示商品
<!--pages/goods/goods.wxml--> <view wx:for="{{list}}"> <view class="it"> <image src="{{item.img}}" class="img"></image> <text>商品名：{{item.name}},价格：{{item.price}}</text> </view> </view>
6.编写goods.wxss,美化界面
/* pages/goods/goods.wxss */ .img{ /*照片的大小*/ width: 300rpx; height: 200rpx; } .it{ /*距离下滑线上下间隔距离及下滑线*/ padding-top: 10rpx; padding-bottom: 10rpx; border-bottom: 1px solid gainsboro; } 7.编写goods.json,修改标题 { "usingComponents": {}, "navigationBarTitleText": "商品列表" }
2.商品列表页跳转到商品详情
1.准备图片上传到云存储中
2.在Goods表中添加img字段，并把下载地址（只有问号之前的部分）或fileID 作该字段的值
3.创建一个页面goods（商品列表），goods-1(商品详情页)
在app.json中的pages字段中添加如下
"pages/goods/goods", "pages/goods-1/goods-1",
4.编写goods.js代码
// pages/goods/goods.js Page({ onLoad(){ wx.cloud.database().collection('Goods').get() .then(res => { console.log('请求成功！',res) this.setData({ list: res.data }) }) .catch(res => { console.log('请求失败！',res) }) }, go(e){ console.log(e.currentTarget.dataset.id) wx.navigateTo({ url: '/pages/goods-1/goods-1?id=' + e.currentTarget.dataset.id, }) } })
5.编写goods.json代码
{ "usingComponents": {}, "navigationBarTitleText": "商品列表" }
6.编写goods.wxml代码
<!--pages/goods/goods.wxml--> <view wx:for="{{list}}"> <view class="it" bindtap="go" data-id="{{item._id}}"> <image src="{{item.img}}" class="img"></image> <text>商品名：{{item.name}},价格：{{item.price}}</text> </view> </view>
7.编写goods.wxss代码
/* pages/goods/goods.wxss */ .img{ /*照片的大小*/ width: 300rpx; height: 200rpx; } .it{ /*距离下滑线上下间隔距离及下滑线*/ padding-top: 10rpx; padding-bottom: 10rpx; border-bottom: 1px solid gainsboro; }
8.编写goods-1.js代码
// pages/goods-1/goods-1.js Page({ onLoad(options) { console.log(options.id) wx.cloud.database().collection("Goods").doc(options.id).get() .then( res =>{ console.log('请求成功',res) this.setData({ list: res.data }) }) .catch( res => { console.log('请求失败',res) }) }, })
9.编写goods-1.json代码
{ "usingComponents": {}, "navigationBarTitleText": "商品详情" }
10.编写goods-1.wxml代码
<!--pages/goods-1/goods-1.wxml--> <image src="{{list.img}}" ></image> <text>商品名：{{list.name}},商品价格：{{list.price}},商品生产地：{{list.shengchandi}}</text>
11.编写goods-1.wxss代码
/* pages/goods-1/goods-1.wxss */ image{ /* 照片放大100% */ width: 100%; }
效果如图
云开发（微信-小程序）笔记（九）----云存储，你来了（下）
感谢大家，点赞，收藏，关注，评论！
