微信小程序开发学习笔记——4.2showModal和showLoading界面交互操作

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接：https://www.bilibili.com/video/BV19G4y1K74d?p=27&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、showModal 显示模态对话框

1、属性

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

2、代码

  clickBtn(){
    wx.showModal({
      title:"请输入验证码",//提示的标题
      // content:"删除之后不可恢复，请谨慎",//提示的内容。
      editable:true,
      placeholderText:"请输入...",//输入框底层不可编辑的文字。若用content，还得在输入框中把预设的内容删了。
      showCancel:true,//是否显示“取消”按钮
      // cancelColor:"#c00",
      success:res=>{
        console.log(res)
      }
    })
  },

success：当 wx.showModal 方法成功执行（例如，用户输入了内容并点击了“确定”按钮），微信小程序的框架会调用这个 success 回调，并传递一个包含交互结果的对象 res。这个对象通常包含以下属性：

• confirm: 布尔值，表示用户是否点击了“确定”按钮。
• value: 如果对话框包含输入框，这个属性将包含用户输入的值。
• cancel: 布尔值，表示用户是否点击了“取消”按钮。

res => { ... }： 这是一个箭头函数的语法。箭头函数是ES6中引入的一种更简洁的函数写法。在这个例子中，res 是传递给这个函数的参数。

console.log(res): 这是箭头函数的主体部分，它调用 console.log 方法来打印 res 对象的内容到控制台。这通常用于调试，以查看 res 对象包含了哪些属性和值。在实际应用中，这样的代码结构通常用于处理异步操作的结果，例如网络请求或数据库查询。

例如：输入aaaaaa，点击确定，控制台会返回一个结果，其中的confirm是true，cancel是false，content为输入框输入的内容，如果点击了取消，则cancel是true。然后我们可以通过获取content来获取用户输入的验证码。

二、showLoading 显示 loading 提示框

！需主动调用 wx.hideLoading 才能关闭提示框！

1、属性

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html

2、代码

api.js中添加以下代码

clickBtn(){
    wx.showLoading({
      title: "加载中...",
      mask:true,//遮罩
    })
    setTimeout(()=>{
      wx.hideLoading()
    },2000)//设置定时器，两秒后加载中会结束
  },

• setTimeout( , )： 这是JavaScript中的一个内置函数，用于在指定的毫秒数后执行一个函数或代码段。
• () => { wx.hideLoading() }：这是一个箭头函数。当定时器触发时，这个函数会被执行。函数的内容是调用wx.hideLoading()。
• wx.hideLoading()： hideLoading是微信小程序其中一个API，用于隐藏页面上的加载提示。
• 2000：这是setTimeout的第二个参数，表示延迟的毫秒数。在这里，它设置为2000毫秒，也就是2秒。

 

三、wx.showActionSheet 显示操作菜单

1、属性

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html

2、代码

 api.js的Page中添加以下代码

data: {
    listArr:['A', 'B', 'C']
  },

clickBtn(){
    wx.showActionSheet({
      itemList: this.data.listArr,
      success: (res)=> {
        console.log(this.data.listArr[res.tapIndex])
      },
      fail: (res)=> {
        console.log(res.errMsg)
      }
    })
}，

itemList：这是一个数组，包含了要在操作菜单中显示的选项。在以上代码中，itemList 的值被设置为 this.data.listArr，这意味着操作菜单中的选项将来自 listArr 数组。

success：这是一个回调函数，当操作菜单成功显示并且用户点击了某个选项后，这个回调函数会被调用。它接收一个参数 res，这个对象包含了用户的选择信息。 在以上代码中，success 回调打印了用户选择的选项。

res.tapIndex 是一个数字，表示用户点击的选项在 itemList 中的索引。因此，this.data.listArr[res.tapIndex] 会得到用户点击的那个选项的值，并将其打印到控制台。

fail：这是一个回调函数，当操作菜单显示失败时，这个回调函数会被调用。它同样接收一个参数 res，这个对象包含了错误信息。 在你的代码中，fail 回调打印了错误信息 res.errMsg 到控制台。