AI 助理
备案控制台
开发者社区 数据库 文章 正文

【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除（含微信云数据库的新增、修改、删除，表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用）

2024-07-04 126
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除（含微信云数据库的新增、修改、删除，表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用）

开始前，请先完成首页的动态列表和动态详情的开发，详见

【微信小程序-原生开发】实用教程 09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）

https://blog.csdn.net/weixin_41192489/article/details/128811723

技术要点：操作微信云数据库

新增

      wx.cloud.database().collection('message').add({
        data: this.data.formData
      }).then

修改

      let id = this.data.currentID
      let newData = this.data.formData
      // 删除多余的表单字段
      delete newData._openid
      delete newData._id
      wx.cloud.database().collection('message').doc(id).update({
        data: newData
      }).then

删除

    let id = this.data.currentID
    wx.cloud.database().collection('message').doc(id).remove().
    then

动态的新增

悬浮按钮 t-fab

pages\index\index.json

"t-fab": "tdesign-miniprogram/fab/fab",

pages\index\index.wxml

<!-- 悬浮按钮--新增 -->
<t-fab style="right: 40rpx;bottom: 140rpx" icon="add" capture-bind:tap="add" />
  • 用 style 调整定位

pages\index\index.js

  // 新增
  add: function () {
    this.setData({
      formData: {}, // 清空表单数据
      formDialogVisible: true, // 显示表单弹窗
      formTitle: '新增' + this.data.currentLabel, // 更新表单弹窗的标题
      action: 'add' // 标记当前执行的操作是 新增 add
    })
  },

表单弹窗 t-dialog

pages\index\index.json

    "t-button": "tdesign-miniprogram/button/button",
    "t-input": "tdesign-miniprogram/input/input",
    "t-dialog": "tdesign-miniprogram/dialog/dialog",
    "t-textarea": "tdesign-miniprogram/textarea/textarea",
    "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker",

pages\index\index.wxml

<!-- 弹窗--表单 -->
<t-dialog visible="{{formDialogVisible}}" title="{{formTitle}}" confirm-btn="保存" cancel-btn="取消" bind:confirm="save" bind:cancel="closeFormDialog">

  <t-input bind:clear='inputChange' bindchange="inputChange" data-prop='title' value="{{formData.title}}" style="{{style}}" clearable slot="content" placeholder="标题" />

  <t-textarea adjust-position bindchange="inputChange" data-prop='content' value="{{formData.content}}" bordered maxcharacter="200" disableDefaultPadding="{{true}}" indicator t-class="external-class" slot="content" placeholder="内容" />

  <t-input bind:clear='inputChange' bindchange="inputChange" data-prop='publisher' value="{{formData.publisher}}" style="{{style}}" clearable slot="content" placeholder="发布人" />

  <t-input disabled capture-bind:tap="showDatePicker" data-prop='date' value="{{formData.date}}" style="{{style}}" slot="content" placeholder="日期" />
</t-dialog>

<!-- 日期选择器 -->
<t-date-time-picker data-prop='date' title="选择日期" visible="{{dateVisible}}" mode="date" defaultValue="{{today}}" value="{{formData.date}}" format="YYYY-MM-DD" bindchange="chooseDate" bindcancel="hideDatePicker" />

pages\index\index.wxss

/* 表单弹窗--多行输入框 */
.external-class {
  height: 256rpx;
  margin-top: 40rpx;
}

/* 表单弹窗--被禁用的日期输入框,强制黑色 */
.t-input__control--disabled {
  color: black !important
}

pages\index\index.js

新增 data

    // 执行的操作
    action: '',
    // 表单弹窗的标题
    formTitle: '',
    // 表单弹窗的显隐
    formDialogVisible: false,
    // 日期选择器的显隐
    dateVisible: false,
    // 日期选择器的默认值
    today: new Date().getTime(),
    // 表单数据
    formData: {},
    // 表单字段--用于表单校验
    formConfig: {
      title: "标题",
      content: "内容",
      publisher: "发布人",
      date: "日期",
    },
    // 表单输入框的样式
    style: 'border: 2rpx solid rgba(220,220,220,1);border-radius: 12rpx;margin-top:40rpx',

新增方法

  // 输入内容改变时，触发数据同步改变--实现表单数据的双向绑定
  inputChange: function (e) {
    let prop = e.currentTarget.dataset.prop
    let value = e.detail.value
    this.data.formData[prop] = value
    this.setData({
      formData: this.data.formData
    })
  },
  // 显示日期选择器
  showDatePicker() {
    this.setData({
      dateVisible: true,
    });
  },
  // 隐藏日期选择器
  hideDatePicker() {
    this.setData({
      dateVisible: false,
    });
  },
  // 选择日期
  chooseDate(e) {
    let prop = e.currentTarget.dataset.prop
    let value = e.detail.value
    this.data.formData[prop] = value
    this.setData({
      formData: this.data.formData
    })
    this.hideDatePicker();
  },
  // 表单校验
  formValid: function () {
    let result = true
    let obj = this.data.formConfig
    obj[Symbol.iterator] = function* () {
      let keys = Object.keys(obj);
      for (let k of keys) {
        yield [k, obj[k]];
      }
    };

    for (let [k, v] of obj) {
      if (!this.data.formData[k]) {
        this.warning(v)
        result = false
        break
      }
    }
    return result
  },
  // 提示--不能为空
  warning: function (label) {
    wx.showToast({
      icon: 'none',
      title: `${label}不能为空`,
    })
  },
  // 保存 （新增+修改）
  save: function () {
    if (!this.formValid()) {
      return
    }
    let action = this.data.action
    if (action === 'add') {
      wx.cloud.database().collection('message').add({
        data: this.data.formData
      }).then(
        res => {
          wx.showToast({
            title: '新增成功',
          })
          this.getinfoList()
          this.closeFormDialog()
        }
      )
    }

    if (action === 'edit') {
      let id = this.data.currentID
      let newData = this.data.formData
      // 删除多余的表单字段
      delete newData._openid
      delete newData._id
      wx.cloud.database().collection('message').doc(id).update({
        data: newData
      }).then(
        res => {
          this.actionOK()
        }
      )
    }
  },
  // 操作成功(新增/修改)
  actionOK: function () {
    let actionDic = {
      add: "新增",
      edit: "修改",
      del: "删除"
    }
    let actionLabel = actionDic[this.data.action]
    wx.showToast({
      title: `${actionLabel}成功`,
    })
    this.getinfoList()
    this.closeFormDialog()
  },
  // 隐藏表单弹窗
  closeFormDialog: function () {
    this.setData({
      formDialogVisible: false
    })
  },

动态的修改

添加修改和删除的权限

在微信云数据库中，将对应数据库的权限按下图修改

滑动组件 t-swipe-cell

pages\index\index.json

"t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell"

pages\index\index.wxml

    <t-step-item wx:for="{{infoList}}" wx:key="index" title="{{item.date}}">
      <!-- 插槽 extra -- 自定义每个步骤中的内容 -->
      <t-swipe-cell slot="extra">
        <!-- 通过自定义属性 data-id 实现事件传参 -->
        <view class="contentBox" bindtap="gotoDetail" data-id="{{item._id}}">
          <view>
            {{item.title}}
          </view>
          <view>
            {{item.publisher}}
          </view>
        </view>
        <view slot="right" class="btn-wrapper">
          <view class="btn edit-btn" bind:tap="edit" data-detail="{{item}}">修改</view>
          <view class="btn delete-btn" bind:tap="del" data-id="{{item._id}}">删除</view>
        </view>
      </t-swipe-cell>
    </t-step-item>
  • 在步骤条组件的插槽中，内嵌滑动组件

pages\index\index.wxss

/* 修改、删除按钮 */
.btn-wrapper {
  height: 100%;
  padding-left: 30rpx;
}

/* 按钮通用样式 */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 120rpx;
  height: 100%;
  color: white;
}

/* 删除按钮 */
.delete-btn {
  background-color: #e34d59;
}

/* 修改按钮 */
.edit-btn {
  background-color: #ed7b2f;
}

pages\index\index.js

新增 data

    // 当前操作数据的 id
    currentID: '',

新增方法

  // 修改
  edit: function (e) {
    this.setData({
      formDialogVisible: true, // 显示表单弹窗
      currentID: e.currentTarget.dataset.detail._id, // 获取操作数据的id
      formData: e.currentTarget.dataset.detail, // 将操作的数据赋值给表单
      formTitle: '修改' + this.data.currentLabel, // 更新表单弹窗标题
      action: 'edit' // 标记执行的操作为修改 edit
    })
  },

动态的删除

pages\index\index.wxml

<!-- 弹窗--删除确认 -->
<t-dialog visible="{{showDelConfirm}}" content="确定删除吗？" confirm-btn="确定" cancel-btn="取消" bind:confirm="delConfirm" bind:cancel="delCancel" />

pages\index\index.js

新增 data

    // 删除确认弹窗的显隐
    showDelConfirm: false,

新增方法

  // 删除
  del: function (e) {
    this.setData({
      currentID: e.currentTarget.dataset.id, // 获取操作数据的id
      showDelConfirm: true,  // 显示删除确认弹窗
      action: 'del' // 标记执行的操作为删除 del
    })
  },
  // 确定删除
  delConfirm: function () {
    let id = this.data.currentID
    wx.cloud.database().collection('message').doc(id).remove().
    then(
      res => {
        this.actionOK()
        this.setData({
          showDelConfirm: false
        })
      }
    )
  },
  // 取消删除
  delCancel: function () {
    this.setData({
      showDelConfirm: false
    })
  },

文章标签：
数据库
小程序
关键词：
微信小程序组件
微信组件
微信小程序开发
小程序微信
微信小程序原生
朝阳39
目录
相关文章
chnjames
|
24天前
|
小程序 数据可视化 JavaScript
微信小程序：轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点，帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能，并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法，以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
chnjames
52 1
微信小程序：轻松实现时间轴组件
邹荣乐
|
23天前
|
小程序
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
邹荣乐
303 1
chnjames
|
24天前
|
小程序 搜索推荐 API
微信小程序：自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改，但产品经理的需求却需要个性化的定制。在这种情况下，我们需要寻找解决方案，以满足这些特殊需求，尽管这可能有点棘手。
chnjames
51 0
微信小程序：自定义关注公众号组件样式
邹荣乐
|
27天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器：ECharts组件的使用与技巧
微信小程序图表制作利器：ECharts组件的使用与技巧
邹荣乐
48 1
邹荣乐
|
27天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
邹荣乐
149 1
邹荣乐
|
23天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
354 7
邹荣乐
|
23天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
429 1
yuanzhengme
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么？
微信小程序的开发完整流程是什么？
yuanzhengme
97 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序，PHP 还可以用于开发哪些类型的小程序？
除了微信小程序，PHP 还可用于开发多种类型的小程序，包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域，PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时，在企业内部，PHP 可提升工作效率，实现审批流程、文件共享、生产计划等功能；在医疗和教育等行业，PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
75 6
众所周知
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展，微信小程序凭借便捷的用户体验和强大的社交传播能力，成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制，包括手机号码验证、微信登录、第三方登录及角色权限控制等方法，并强调了安全性、用户体验和合规性的重要性，帮助开发者更好地理解和应用这一关键技术。
众所周知
51 5

热门文章

最新文章

  • 1
    阿里20亿小程序繁星计划你最需要知道的几个问题（0325更新）
  • 2
    小程序审核常见驳回类型
  • 3
    【小程序开发】uniapp引入iconfont图标及使用方式
  • 4
    java springboot集成微信小程序【详细教程】
  • 5
    小程序云公测
  • 6
    细说小程序底部标签---【浅入深出系列006】
  • 7
    【小程序】宿主环境之通信模型和运行机制
  • 8
    利用 Python 实现一个购物车小程序
  • 9
    【社区每周】新版O站上线，小程序新增无需审核的普通模板（2022年7月第三期）
  • 10
    小程序地图插入图标后 怎么实现点击图标弹出窗口
  • 1
    社招｜成为“云”住民，「阿里云瑶池数据库」多岗位持续热招中！
    166
  • 2
    JAVA数据库的基础知识
    69
  • 3
    启动多个jar包来监听同一个数据库的binlog
    72
  • 4
    OceanBase数据库的主备库参照的配置文件
    158
  • 5
    参与TiDB社区，共筑开源数据库的未来
    115
  • 6
    TiDB与MySQL、PostgreSQL等数据库的比较分析
    1050
  • 7
    sql数据库查询语句大全
    100
  • 8
    面对多种国产数据库，如何选择合适的技术栈和发展方向
    179
  • 9
    宝塔数据库崩溃解决方案详解
    262
  • 10
    视觉智能平台常见问题之创建人脸数据库失败如何解决
    70

    • 相关课程

    更多
  • IoT小程序框架课程
  • 数据库仓库升级交付实践指引
  • 从0到1数据库内核实战教程
  • 云数据库MySQL版快速上手教程
  • 应用视角出发的数据库流量治理
  • 数据库常见问题排查

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 微信高效运维之路

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • PolarDB for AI：在数据库中通过SQL实现AI能力
  • 云数据库MongoDB快速入门
  • 云原生HTAP数据库，让你的交易和分析一库搞定
  • 快速体验PolarDB开源数据库
  • SQLServer数据库的创建
    • 下一篇
    DataWorks售前咨询