微信小程序之界面交互API07

微信小程序之界面交互API07

 关于界面交互,在官方文档上提供了API来

wx.showToast(Object object) 土司(只有提示,会在延迟时间过后消失)!

显示消息提示框

参数

Object object

属性	类型	默认值	必填	说明	最低版本
title	string		是	提示的内容
icon	string	'success'	否	图标
image	string		否	自定义图标的本地路径，image 的优先级高于 icon	1.1.0
duration	number	1500	否	提示的延迟时间
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.icon 的合法值

值	说明	最低版本
success	显示成功图标，此时 title 文本最多显示 7 个汉字长度
loading	显示加载图标，此时 title 文本最多显示 7 个汉字长度
none	不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持

示例代码

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

注意

• wx.showLoading 和 wx.showToast 同时只能显示一个
• wx.showToast 应与 wx.hideToast 配对使用

给我们开发者进行调用,唯一不足的是官方文档没有把界面交互的效果展示出来,只是为我们提供了代码,和参数的属性.

wx.showModal(Object object) 一个包含确认和取消的提示消息框

显示模态对话框

参数

Object object

属性	类型	默认值	必填	说明
title	string		否	提示的标题
content	string		否	提示的内容
showCancel	boolean	true	否	是否显示取消按钮
cancelText	string	'取消'	否	取消按钮的文字，最多 4 个字符
cancelColor	string	#000000	否	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText	string	'确定'	否	确认按钮的文字，最多 4 个字符
confirmColor	string	#576B95	否	确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明	最低版本
confirm	boolean	为 true 时，表示用户点击了确定按钮
cancel	boolean	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）	1.1.0

示例代码

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

注意

• Android 6.7.2 以下版本，点击取消或蒙层时，回调 fail, errMsg 为 "fail cancel"；
• Android 6.7.2 及以上版本 和 iOS 点击蒙层不会关闭模态弹窗，所以尽量避免使用「取消」分支中实现业务逻辑

• wx.showLoading(Object object)会进入到一个加载的状态,在定时器的规定事件内出现一个加载中的提示

  基础库 1.1.0 开始支持，低版本需做兼容处理。

  显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

  参数

  Object object

  属性	类型	默认值	必填	说明
  title	string		是	提示的内容
  mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
  success	function		否	接口调用成功的回调函数
  fail	function		否	接口调用失败的回调函数
  complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

  示例代码

  wx.showLoading({
    title: '加载中',
  })
  
  setTimeout(function () {
    wx.hideLoading()
  }, 2000)
  

  注意

• wx.showLoading 和 wx.showToast 同时只能显示一个
• wx.showLoading 应与 wx.hideLoading 配对使用

更多内容请参考官方文档API:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

 

微信小程序基本组件总结

组件的基本用法

语法问题

组件的使用是类似于HTML的方式（有不同），组件使用的严格的XML标准（开闭标签问题）

 

组件的分类

• 功能性的组件

  • 完成具体功能的

• 布局类型的组件

  • 用来完成页面结构的（DIV）

• API 类型（使用的角度）

  • wx.showModal

  • 通过调用一个方法来使用的