云开发(微信-小程序)笔记(七)----云存储,你来了(上)
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%;
}
效果如图
云开发(微信-小程序)笔记(九)----云存储,你来了(下)
感谢大家,点赞,收藏,关注,评论!