小程序API之界面交互

(1)wx.showToast 消息提示框

这里要注意一下代码的注释,icon目前只支持 "success" 和 "loading",如果想要去除图标的话,设置 icon:'none';
另外微信小程序官方还给出了一个属性 mask ,默认为 false,没有实际显示效果,透明蒙层,防止触摸穿透

wx.showToast({
  title: '成功',
  icon: 'success' ,//只支持"success"、"loading" ,默认success,去除图标用 none
  image:'', //自定义图标的本地路径,优先级高于 icon
  duration: 1000,
  success: function() {}
})

(2)wx.showModal消息模态框

wx.showModal({
  title: '标题',
  content: '选择确定或者取消?',
  success (res) {
    if (res.confirm) {
      console.log('点击了确定')
    } else if (res.cancel) {
      console.log('点击了取消')
    }
  }
})

success 回调函数:

success 回调函数

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

(3)wx.showLoading - wx.hideLoading

loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框;
同样也包含属性 mask;
wx.showLoading 和 wx.showToast 同时只能显示一个;

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

(4)wx.showActionSheet 操作菜单

wx.showActionSheet({
  itemList: ['选项一', '选项二', '选项三'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})
  • itemList 为数组,最大长度为6;
  • tapIndex 为用户点击的序号,顺序从上到下,从0开始;
  • 与 wx.showModal 模态框一样,需要注意回调fail,详情查看 第二点 内引用的微信官方的部分;

(5)wx.hideToast 隐藏消息提示框

参数仅包含 success、fail、complete;
目前这段测试代码是放在wx.showToast后面进行测试的,可以正常执行。

   setTimeout(function(){
      wx.hideToast({
        success () {
          console.log("hideToast")
        },
        fail () {
          console.log("hideToast.fail")
        }
      })
    },2000)
总结

推荐阅读更多精彩内容