小程序云开发实现删除更新功能

简介: 小程序云开发实现删除更新功能

1:在页面上写上更新和删除的按钮

现在json里面引入vant组件

{
  "usingComponents": {
    "van-button": "../../vant/button/index"
  }
}

在wxml里面填写删除更新按钮代码

<van-button type="warning" >更新</van-button>
<van-button type="danger" >删除</van-button>

2:打开js

id:options.id把id先直接赋值过来,在页面加载的时候,页面里面就有了id,后续操作更加方便简单.

 onLoad: function (options) {
    //  console.log(options)
    db.collection('books').doc(options.id).get({
      success: res => {
        console.log(res.data)
        this.setData({
          book: res.data,
          id:options.id
        })
      }
    })
  },

3:给按钮绑定具体点击事件

<van-button type="warning" bind:click="update">更新</van-button>
<van-button type="danger"  bind:click="delete">删除</van-button>

4:在js里面编写对应的点击事件,传入event是为了拿到我们要删除事件的id

一般点击事件里面我们通过event信息来拿到具体的id。

<van-button type="warning" data-id="{{id}}" bind:click="update">更新</van-button>
<van-button type="danger"  data-id="{{id}}"  bind:click="delete">删除</van-button>

5:关于更新数据

代开小程序云开发文档:

复制小程序云开发的更新数据库的方法,修改对应代码,coolection改成我的对应的books数据库,doc中的id改成相对于的this.data.id。

update: function (event) {
    //console.log(event)
    db.collection('books').doc(this.data.id).update({
      // data 传入需要局部更新的数据
      data: {
        // 表示将 done 字段置为 true
        title:"局部更新"
      },
      success: function (res) {
      }
    })
  },

刷新页面,可以看到,我们已经把书的标题改掉了。实现小程序更新功能。

6:删除数据

再说一说实现删除数据的功能,先写一个fail来监听,如果是正常取数据,就会把结构打印出来 console.log(res.data)如果不是正常取数据,就会 console.error(err)

7:删除数据的方法,还是打开小程序云开发的开发文档,里面可以直接复制黏贴到删除数据库方法。

从文档里面复制删除的方法粘贴在代码里面,完善删除方法即可

  delete: function (event) {
    console.log(event)
    db.collection('books').doc(this.data.id).remove({
      success: function (res) {
        console.log(res)
      }
    })
  }

好的,其实很简单,就实现了小程序云开发实现删除更新功能了。

相关文章
|
5月前
|
小程序
微信小程序如何实现进入小程序自动连WiFi功能
微信小程序如何实现进入小程序自动连WiFi功能
194 0
|
5月前
|
小程序 API
点餐小程序实战教程09-订单功能开发
点餐小程序实战教程09-订单功能开发
|
5天前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
29 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
18天前
|
小程序 Linux Python
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
14 1
|
5月前
|
存储 小程序 开发工具
零基础开发小程序第四课-查看功能开发
零基础开发小程序第四课-查看功能开发
|
2月前
|
Web App开发 缓存 小程序
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
|
2月前
|
小程序 前端开发 开发者
|
2月前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
|
3月前
|
小程序 安全 数据挖掘
陪玩语聊APP小程序定制开发模块功能
随着电竞行业的规范化,游戏陪玩软件兴起,提供专业陪玩服务。核心功能包括:多样化注册登录、用户资料展示、智能匹配筛选陪玩、语音互动(多人/私聊)、订单交易管理、陪玩入驻审核、数据分析、客服系统及社交功能。旨在融合游戏、语音聊天与社交,构建综合娱乐平台。
|
3月前
|
小程序 BI 定位技术
广州跑腿小程序功能开发让生活更方便
跑腿小程序整合生活服务,提供快捷的跑腿任务解决方案。用户通过手机号或微信注册登录,发布如取快递、买饭等需求;跑腿员接单并利用导航高效完成。支持订单管理、多种支付方式及评价反馈系统,确保服务质量。小程序还发送订单状态通知,进行数据统计分析以促进平台发展。

热门文章

最新文章