需求分析
日常我们在记录会员信息的时候,随着会员信息的增多,有必要定期清理一些已经不来消费的顾客,那么小程序删除的功能是必备的。
本文就讲解一下会员信息如何进行删除,考虑到读者群还有一部分是老板,对于软件开发技术不是特别了解,我们在讲解的过程中尽量保持通俗易懂。
先说一下具体的思路,首先是删除按钮放到哪里比较合适,在PC端的业务中如果是删除一般是放到列表上,这样方便选中记录并且删除。移动端因为空间比较小,所以考虑到在详情页中放删除按钮。
第二个需要考虑是删除的逻辑,删除的逻辑需要先获得记录的主键,获取主键是为了保证只删除该删除的记录。一般删除动作比较危险,为了防止误删,需要给用户一个提示,当他确认之后我们再做删除的动作。
好了,原理介绍了这么多,我们就实操一下如何实现会员信息的删除功能。
修改页面
我们在页面管理里选中我们的详情页面
切换到页面的组件视图,我们在余额字段的下边,添加个容器组件,并且在里边放置删除的按钮
按钮放置进去一般是垂直排列的,为了让按钮水平排列我们需要设置一下容器组件的布局,选中容器组件,然后在右侧的属性面板选中样式页签,进行相应的设置
按钮的话我们先设置一下按钮的基础数据
因为我们的删除操作是有明确的业务逻辑在里边的,所以需要以低代码的形式进行操作,点击顶部的菜单的低代码编辑按钮
找到我们的详情页,在handler旁边点击 号创建低码方法
具体的代码如下:
代码语言:txt复制export default function({event, data}) {
app.showModal({
title: '删除用户信息',
content: '确认删除吗?',
async success(res) {
if (res.confirm) {
let res = await app.cloud.dataSources.member.delete({
_id:data.target,
});
app.navigateBack({
delta: 1
});
} else if (res.cancel) {
}
}
});
}
业务逻辑我们一开始就介绍了,我们使用了三个api分别是showModel
这个api调用之后会填一个提示框,让用户选择是否确认。第二个api是操作数据源
我们调用了数据源的删除用户方法,方法名和参数可以参考数据源的具体方法
第三个api是返回页面的api
低码方法构建好之后,我们就需要给按钮设置点击事件,切换到按钮的事件页签,选择我们刚才定义的低代码方法
添加后还需要给方法传参,我们选择当前的状态变量传递id即可
这样我们就设置好了
页面的效果
进入到会员列表
点击其中的一条信息,点击删除按钮
弹出确认框,点击确认信息就删除了
总结
本篇我们具体介绍了如何实现删除功能,一般涉及到业务逻辑操作的,免不了要编写低代码方法,这就涉及到如果调用官方的API,所以日常经常翻阅API也对我们的业务功能编写提供了很大的便利。