微信小程序 确认框的实现（附代码）

微信小程序中的确认框实现详解（附代码示例）

在开发微信小程序时，我们经常需要展示一个确认框来询问用户是否确认某个操作。下面将介绍微信小程序中的确认框如何实现，并通过示例代码进行详细讲解。这不仅对学习小程序开发有所帮助，也能为工作中遇到的相关问题提供解决方案。

一、效果展示：

二、核心代码实现：

假设我们有一个删除支出类型的操作，以下是对应的实现代码：

```javascript

delType: function(e) {

var typeId = e.currentTarget.dataset['id']; // 获取点击元素的id属性值

console.log("delete:" + typeId); // 打印日志，方便调试

wx.showModal({ // 显示模态对话框（确认框）

title: '提示', // 标题

content: '确认要删除该支出类型?', // 提示内容

success: function (res) { // 成功回调函数

if (res.confirm) { // 用户点击了确定按钮

console.log('用户点击确定');

wx.request({ // 发起网络请求，删除支出类型

url: getApp().globalData.urlPath + "spendingType/delete", // 请求URL

method: "POST", // 请求方法

data: { // 请求参数

typeId: typeId

},

header: { // 请求头信息

"Content-Type": "application/x--form-urlencoded"

},

success: function (res) { // 请求成功后的回调函数

console.log(res.data.code); // 打印返回的数据码

if (res.statusCode == 200) { // 如果请求状态码为200，表示请求成功

if (res.data.code == "000000") { // 如果返回的数据码表示操作成功

wx.showToast({ // 显示提示信息

title: "删除成功，返回支出类型列表", // 提示内容

icon: 'success', // 图标样式，这里使用成功图标样式

duration: 3000, // 提示信息显示的时长，单位为毫秒

success: function () { // 提示信息显示后的回调函数

wx.navigateTo({ // 跳转到其他页面

url: '../type/type' // 跳转到的页面路径，这里假设是支出类型列表页面

})

}

})

} else { / 其他情况的处理逻辑 / } // 根据实际情况进行其他处理，例如显示错误信息等。 省略了这部分代码。 省略内容：根据返回的数据码进行错误处理或提示用户错误信息等。 可以使用wx.showLoading等方法来展示加载或等待状态。 若请求失败则可能需要使用其他方法重新尝试请求或者进行错误提示等处理。 注意这里的处理逻辑需要根据实际的业务需求进行编写和调整。例如可能需要根据不同的错误码进行不同的处理。请根据实际情况编写代码以处理异常情况。这部分内容没有具体的代码示例。具体实现细节可以根据实际情况进行调整和优化以适应实际的业务需求和用户体验要求。本示例仅供参考和学习目的。具体实现细节可能需要根据实际情况进行调整和优化。请根据实际情况编写代码并进行测试以确保其正确性和稳定性。另外需要注意的是在使用wx.方法时请确保方法的参数和调用方式符合微信小程序的官方文档要求以免出现错误和异常行为影响用户体验。 } } } } } } } }); } else if (res.cancel) { console.log('用户点击取消'); } } }); } }); ``` 三、WXML代码实现： ```xml 删除 ``` 说明： `data-id` 用于绑定对应的值，比如根据id来删除对应的数据。 `bindtap` 是绑定点击事件的方式，当用户点击该元素时触发 `delType` 函数。四、总结： 本文介绍了微信小程序中的确认框实现方法，通过示例代码详细讲解了如何在小程序中显示确认框、获取用户的选择并据此执行相应的操作。希望本文内容能对大家的学习和工作有所帮助，也希望大家多多支持狼蚁SEO。 （此处可以添加一些对于小程序开发的建议和心得体会等，以增加文章的丰富性和可读性。） 注意：在实际开发过程中，请根据具体的业务需求和微信小程序的官方文档来编写代码并进行测试，以确保代码的正确性和稳定性。同时请注意保护用户隐私和数据安全，避免不必要的纠纷和风险。