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

Posted 2021-09-03 一切因为是码农

实际需求：

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("获取单条数据失败")
    })
  }
})

---

效果：

商品列表页

后发生页面跳转，进入商品详情页