微信小程序云开发(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
    评论
Java SpringBoot是一种流行的后端框架,可以用来构建微信小程序的后端服务。通过Java SpringBoot,我们可以实现微信小程序增删改查功能。 首先,我们可以利用SpringBoot提供的RESTful API来实现数据的增删改查操作。通过编写对应的Controller来处理微信小程序发送的请求,比如增加数据的请求可以由POST方法处理,删除数据的请求可以由DELETE方法处理,更新数据的请求可以由PUT方法处理,查询数据的请求可以由GET方法处理。 其次,我们需要结合微信小程序的开放能力,利用微信提供的API来实现用户登录和数据交互。通过微信小程序的API,我们可以实现用户登录获取用户的唯一标识openid,然后在后端实现对用户数据的操作。 另外,我们可以使用Spring Data JPA来简化对数据库的操作。Spring Data JPA提供了很多便利的方法来实现对数据库的增删改查操作,可以大大简化我们的代码开发。 最后,我们需要部署这个SpringBoot应用到服务器上,并且配置好数据库等相关环境。可以选择使用云服务商提供的PaaS服务,比如阿里云、腾讯云等,来快速部署我们的应用。 通过以上步骤,我们就可以实现一个使用Java SpringBoot的后端服务,用于支持微信小程序增删改查功能。这样用户就可以通过微信小程序与我们的后端服务进行数据交互,实现各种功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值