【小程序开发实战】内容修改和删除

Wilson王艺谋
1,113 阅读5分钟

「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」

前言

之前我们实现了个人内容的管理，但仅仅是能够展示。那么如果想要修改或者删除自己发布过的内容要怎么做呢？这一篇我们就来一起这些这些功能。

编辑入口

对于可编辑的内容，我们可以为其右上角增加一个...作为编辑入口，而可编辑的内容就是我们在个人页展示的内容。

由于我们在首页和个人页都使用了内容列表组件，但首页的内容不应该展示编辑入口，所以我们要为内容列表组件增加一个属性用于标识是否展示编辑入口。

image.png

然后将列表内容组件改造为以下结构

image.png

这里我们使用了vant的icon组件，所以要记得在json文件中声明引入。

由于我们的showEdit默认值为false，所以在使用内容列表组件时当不传入showEdit属性时是不会展示可编辑入口的。

然后让我们在个人页使用列表内容组件的地方增加如下属性

image.png

这样即可在右上角看到可编辑入口了

image.png

注意，这里因为showEdit的类型为Boolean，所以在属性传入时showEdit就相当于showEdit={{true}}

编辑选项

有了编辑入口后，我们需要为其添加相应的点击响应，即弹出一个编辑选项框，这里我们使用vant的 action sheet 组件

image.png

我们通过data-bean属性将当前正在编辑的内容对象记录下来，以确保后续修改或删除时针对正确的内容进行操作。

具体实现逻辑如下

image.png

编辑处理

在确定要做的操作以后，我们需要将要进行的操作以及要操作的内容反馈到组件的引用方，因为我们目前的操作都是在内容列表组件内部实现的，但处理数据并不是该组件所需要实现的部分，所以我们使用小程序组件自带的triggerEvent方法，将要操作的数据派发到组件的引用方。

handleEdit() {
  const { current } = this.data
  this.triggerEvent('edit', current)
},
handleDel() {
  const { current } = this.data
  this.triggerEvent('delete', current)
}

接着，我们在组件的引用方，个人页增加对于组件内部派发出的事件响应

image.png

内容删除

我们先来实现删除，因为删除相较于修改更简单，只需要找到目标内容从数据库中删除即可。而修改则需要先展示出原本的内容，经过用户修改后进行内容更新，类似于新增内容的过程。

那么既然要删除内容，则涉及到了数据层面的操作，而且是不同于查询和新增的新操作类型——删除，所以我们需要新增一个云函数来完成这项工作。

我们的云函数使用如下

async onDelete(e) {
  const { detail } = e
  try {
    await wx.cloud.callFunction({
      name: 'delContent',
      data: {
        id: detail._id
      }
    })
    this.refresh(true)
    wx.showToast({
      title: '删除成功',
      icon: 'none'
    })
  } catch (error) {
    wx.showToast({
      title: '删除失败,' + error,
      icon: 'none'
    })
  }
},

云函数实现如下

image.png

删除功能实现效果

image.png

内容修改

我们刚刚分析过，修改内容有点像新增内容，所以我们需要在点击修改时跳转到内容发布页，并且将之前发布过的内容展示出来，以供用户修改。

所以我们首先点击修改时跳转至内容发布页，并向其传递要修改的内容ID

onEdit(e) {
  const { detail } = e
  wx.navigateTo({
    url: `/pages/add/index?id=${detail._id}`,
  })
},

然后在内部发布页对其进行解析并查询相关内容

image.png

相应地，我们的内容查询云函数需要能够接收id参数作为过滤条件。

image.png

这样我们便可以在点击修改内容后跳转至内容发布页，并查询出要修改的内容并加以修改，并进行内容更新。

图片上传优化

这里也借此我们完善一下之前的图片上传功能，我们为图片上传增加如下功能

  • 支持图片删除
  • 图片上传过程增加提示

图片删除功能需要我们在原有的upload组件上绑定删除响应事件

image.png

然后在js中实现删除图片的逻辑如下

handleDelete(e) {
  const { detail: { index } } = e
  const { fileList, inputValue } = this.data
  const { cloudUrl: deleteUrl } = fileList.find((_, i) => index === i)
  fileList.splice(index, 1)
  const newData = {
    fileList
  }
  if (!fileList.length && !inputValue) {
    Object.assign(newData, {
      btnDisable: true
    })
  }
  this.setData(newData)
  try {
    console.log('deleteUrl', deleteUrl)
    wx.cloud.deleteFile({
      fileList: [deleteUrl]
    })
  } catch (error) {
    console.log('delete file fail', error)
  }
},

首先我们根据删除图片所在的位置找到目标图片，然后将该位置的图片数据进行删除，并同时将云存储中的图片进行查找删除，这样就实现了图片的删除功能。

关于图片上传状态的展示，我们需要在上传发生后将图片的显示状态修改为loading，并在图片上传完成后将其修改为done。

image.png

图片预览

在内容发布页，由于我们使用了vant的上传组件，所有其自带图片预览功能，但是我们的内容展示页之前是使用的小程序原生image组件，所以不具备图片预览功能。

这里我们一方面将图片组件改为使用vant的图片组件，方便后续对图片相关的展示优化，同时实现一下图片预览功能。

image.png

这里我们同样通过data-bean将要预览的图片列表以及当前图片传入预览方法，然后通过以下具体方式实现图片预览功能。

onTapImage(e) {
  const { currentTarget: { dataset: { bean: { current, list } } } } = e
  wx.previewImage({
    urls: list,
    current
  })
}

image.png

总结

经过本篇，我们实现了对于现有内容的修改和删除功能，同时完善了图片上传以及图片预览的交互体验。一个具备内容发布、更新、删除和查询的小程序雏形已初步形成，后面的篇幅我们将从用户体验、内在实现细节优化以及使用性能等多维度开始对它进行升级和优化。

avatar
文章
阅读
粉丝