小程序云开发入门——云数据库增删改查综合案例（3）

目录

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列