目录
1.能查看商品列表
2.能动态添加商品
3.能进入商品详情页
4.能删除某个商品
5.能修改某个商品的价格
1.创建两个页面——商品列表页和商品详情页
（1）app.json文件创建demo1和demo1-1的文件夹
"pages":[
"pages/demo1/demo1",
"pages/demo1-1/demo1-1",
"pages/index/index"
],（2）修改demo1的json文件，添加页面标题 "navigationBarTitleText": "商品列表页"
{
"usingComponents": {},
"navigationBarTitleText": "商品列表页"
}（3）demo1-1的修改同理
（4）效果实现
2.动态显示商品列表页
（1）修改demo1.js文件，利用get()进行查询操作
Page({
data:{
list:[]
},
onLoad(){
wx.cloud.database().collection('goods')
.get()
.then(res=>{
console.log('商品列表请求成功',res)
this.setData({
list:res.data
})
})
.catch(err=>{
console.error('商品列表请求失败',err)
})
}
})（2）demo1.wxml文件遍历列表显示
<!--遍历列表，拿到list里面的所有数据-->
<view wx:for="{{list}}">
<view>商品名： {{item.name}} , 价格： {{item.price}}</view>
</view>（3）效果显示
3.列表跳详情 data-
在wxml里定义data-要绑定的数据
在js页面里的点击方法里拿到绑定的数据
比如，点击了西瓜和苹果
4.1列表跳转详情页并携带id
4.2列表跳转详情页的具体代码实现
（1）demo1.js
//跳转到商品详情页
goDetail(event){
//获取ID
console.log('点击了商品跳转详情的id',event.currentTarget.dataset.id)
//跳转页面并携带id
wx.navigateTo({
url: '/pages/demo1-1/demo1-1?id=' + event.currentTarget.dataset.id,
//注意，页面前面还有一个斜杠
})
}(2)demo1.wxml
<!--遍历列表，拿到list里面的所有数据-->
<view wx:for="{{list}}">
<!--增加点击事件，跳转详情页-->
<view bindtap="goDetail" data-id="{{item._id}}">商品名： {{item.name}} , 价格： {{item.price}}</view>
</view>(3)demo1-1.js
onLoad(options){
console.log('列表携带的值',options)
var id=options.id
//查询单条数据
wx.cloud.database().collection("goods")
.doc(id)
.get()
.then(res=>{
console.log("商品详情页请求成功",res)
this.setData({
good:res.data
})
})
.catch(err=>{
console.error("商品详情页请求失败",err)
})
}
(4)demo1-1.wxml
<text>商品名: {{good.name}} , 价格{{good.price}}</text>
(5)跳转后
5.获取用户输入的商品名和价格
（1）在demo1.wxml里面添加输入框和事件点击按钮，并在demo1.wxss里面进行润色
输入商品名：
<input bindinput="getName"></input>
输入商品价格：
<input bindinput="getPrice"></input>
<button bindtap="addGood" type="primary">添加商品</button>input{
border: 1px solid gray;
}（2）demo1.js文件里定义全局变量传参
//定义全局变量
let goods_name=''
let goods_price=''//获取用户输入的商品名
getName(e){
goods_name=e.detail.value
console.log(e)
},
//获取用户输入的商品价格
getPrice(e){
goods_price=e.detail.value
console.log(e)
},
//添加商品到数据库
addGood(){
console.log('商品名',goods_name)
console.log('商品价格',goods_price)
}（3）实现效果
6.商品和价格输入为空时给用户提示
//添加商品到数据库
addGood(){
console.log('商品名',goods_name)
console.log('商品价格',goods_price)
if(goods_name==''){
console.log('商品名为空了')
wx.showToast({
icon:'error',
title: '商品名为空啦',
})
}else if(goods_price==''){
console.log('商品价格为空了')
wx.showToast({
icon:'error',
title: '商品价格为空啦',
})
}else{
//添加操作
console.log('可以进行添加操作啦')
}
}7.添加商品数据并刷新商品列表
（1）把else里面的添加代码补齐
else{
//添加操作
console.log('可以进行添加操作啦')
wx.cloud.database().collection('goods')
.add({
data:{
name:goods_name,
price:goods_price
}
})
.then(res=>{
console.log('添加成功',res)
this.getList()
})
.catch(err=>{
console.log('添加失败',err)
})
}
}（2）用函数getList()简化代码
getList(){
wx.cloud.database().collection('goods')
.get()
.then(res=>{
console.log('商品列表请求成功',res)
this.setData({
list:res.data
})
})
.catch(err=>{
console.error('商品列表请求失败',err)
})
}8.更新商品价格
（1）demo1-1.wxml文件添加输入框和点击按钮,更改demo1-1.wxss
<view>商品名: {{good.name}} , 价格{{good.price}}</view>
更新商品价格
<input bindinput="getnewPrice"></input>
<button bindtap="update" type="primary">更新价格</button>input{
border:1px solid gray;
}（2）demo1-1.js文件添加点击事件函数并并传参更新，利用getDetail（）函数简化代码
//获取用户输入的新价格
getnewPrice(e){
newprice=e.detail.value
},
//修改商品价格
update(){
console.log('新的商品价格',newprice)
if(newprice==''){
wx.showToast({
icon:'error',
title: '您没有输入商品价格',
})
}else{
wx.cloud.database().collection('goods')
.doc(id)
.update({
data:{
price:newprice
}
})
.then(res=>{
console.log('更新成功',res)
this.getDetail()
})
.catch(err=>{
console.log('更新失败',res)
})
}
}getDetail(){
//查询单条数据
wx.cloud.database().collection("goods")
.doc(id)
.get()
.then(res=>{
console.log("商品详情页请求成功",res)
this.setData({
good:res.data
})
})
.catch(err=>{
console.error("商品详情页请求失败",err)
})
}（3）具体实现
（4）遇到问题：没用openid的数据改不了怎么办？
PS:只有stats里面的updated是1时，才代表成功地更新了一条数据。如果这个数据不是用户创建的，那么你对这个商品做更新或者删除操作，是无用的，updated为0。
临时解决方法：数据库里面自行添加字段_openid（不建议使用，云函数再解决）
9.详情页里面删除商品
（1）添加删除按钮
<button bindtap="delete">删除当前商品</button>
（2）删除操作，增加弹窗提醒
//删除操作
delete() {
console.log('点击了删除')
//弹窗提示
wx.showModal({
title: '是否确定删除',
content: '您是否真的要删除，删除后就找不回来了',
success(res) {
if (res.confirm == true) {
console.log('用户点击了确定')
//删除操作
wx.cloud.database().collection('goods')
.doc(id)
.remove()
.then(res => {
console.log('删除成功',res)
//回到商品首页
wx.navigateTo({
url: '/pages/demo1/demo1',
})
})
.catch(err => {
console.log('删除失败',err)
})
} else if (res.cancel == true) {
console.log('用户点击了取消')
}
}
})
}（3）效果展示
