微信小程序云开发(5)— “增删改查综合案例(跳转页面)”

实际需求:

1.能查看商品列表
2.点击 "商品列表"中的商品跳转到 “商品详情页”

大体步骤:

1.商品列表页对应: /Pages/demo1/demo1
2.商品详情页对应: /Pages/demo1-1/demo1-1


一、商品列表页(Pages/demo1/demo1)

demo1.wxml

<view wx:for="{{list}}">
  <view bindtap="click" data-id1="{{item._id}}">商品名:{{item.name}},价格:{{item.value}}</view>
</view>
  • click为处理点击事件的方法名,稍后在demo1.js中实现
  • 此处使用了data-进行数据绑定,把list中的商品id绑定到变量id1中,点击跳转时,携带该数据

demo.js

Page({
  data:{
    list:[]
  },
  onLoad(){
    //获取数据get()
    wx.cloud.database().collection('goods')
    .get()
    .then(res=>{
      console.log('获取数据成功!',res.data)
      this.setData({
        list:res.data
      })
      
    })
    .catch(err=>{
      console.log('获取数据失败!')
    })
  },
  //实现点击(click)事件
  click(e){
    console.log('点击跳转商品详情',e.currentTarget.dataset.id1)
    //实现页面跳转并传递参数id到新页面
    wx.navigateTo({
      url: '/pages/demo1-1/demo1-1?id=' +e.currentTarget.dataset.id1,
    })
  }

})
  • 注意click()方法要有参数e

  • wx.navigateTo({
    url: ‘/pages/demo1-1/demo1-1?id=+e.currentTarget.dataset.id1
    })

    (此处为跳转页面固定写法,标红处要注意写法!且 +e.currentTarget.dataset.id1为之前绑定数据的变量id1
    在这里插入图片描述

二、商品详情页(Pages/demo1-1/demo1-1)

详情页通过得到"列表页点击获取到的数据id",在js文件中通过doc()方法实现单条查询,最终显示在页面上。

demo1-1.wxml

<text>商品名:{{good.name}},价格:{{good.value}}</text>

demo1-1.js

Page({
  data:{
	good:{}
  },
  //实现单条数据查询
  onLoad(options){
    console.log(options.id)
    //将获取到的id封装到局部变量id中
    var id = options.id
    
    wx.cloud.database().collection('goods')
    //doc()中直接放入局部变量id
    .doc(id)
    .get()
    .then(res=>{
      console.log('获取单条数据成功',res.data)
      this.setData({
        good:res.data
      })
    })
    .catch(err=>{
      console.log("获取单条数据失败")
    })
  }
})

效果:

商品列表页
在这里插入图片描述
后发生页面跳转,进入商品详情页
在这里插入图片描述

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序云开发中,用户可以通过数据库API进行增删改查操作。首先,需要获取数据库的引用\[2\],可以使用以下代码进行初始化: ```javascript const db = wx.cloud.database(); ``` 接下来,需要获取云端数据的集合,可以使用以下代码: ```javascript const products = db.collection("products"); ``` 这里的"products"是数据库的名称,你需要根据自己的数据库名称进行修改\[2\]。 然后,可以使用云开发的数据库添加方法向云数据新增数据。例如,可以在提交表单的事件处理函数中使用以下代码: ```javascript onSubmit: function (res) { products.add({ data: { name: res.detail.value.name, price: res.detail.value.Price, dec: res.detail.value.dec } }).then(res => { console.log(res) }) } ``` 在上述代码中,我们使用了`products.add()`方法向数据库中添加数据。`res.detail.value`表示表单中的值,你可以根据自己的需求修改字段名\[2\]。 除了添加数据,云开发还支持其他的操作,如删除数据、修改数据和查询数据。你可以根据具体需求使用相应的API进行操作。 #### 引用[.reference_title] - *1* *2* *3* [微信小程序云开发增删改查](https://blog.csdn.net/m0_74020066/article/details/129733648)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值