小程序：弹窗的实现

wx.showToast

引自参考文档[1]

WXML

<button bindtap="btnClick1" type="primary">图标success,有遮盖层无法点击</button>
  <button bindtap="btnClick2" type="primary">图标loading,无遮盖层可点击</button>
  <button bindtap="btnClick3" type="primary">图标none</button>
  <button bindtap="btnClick4" type="primary">自定义图标</button>

WXSS

button{
  margin: 20rpx;
}

JS

/*
  title    提示的内容
  icon     图标
  image    自定义图标的本地路径，image 的优先级高于 icon 
  duration 示的延迟时间
  mask     是否显示透明蒙层，防止触摸穿透
  success  接口调用成功的回调函数
  fail     接口调用失败的回调函数
  complete 接口调用结束的回调函数（调用成功、失败都会执行）
*/
/* object.icon 的合法值
  success   显示成功图标，此时 title 文本最多显示 7 个汉字长度
  loading   显示加载图标，此时 title 文本最多显示 7 个汉字长度
  none  不显示图标，此时 title 文本最多可显示两行 
*/

Page({
  data: {},
  btnClick1() {
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 5000,
      mask: true
    })
  },
  btnClick2() {
    wx.showToast({
      title: '加载',
      icon: 'loading',
      duration: 2000,
      mask: false
    })
  },
  btnClick3() {
    wx.showToast({
      title: '不显示图标',
      icon: 'none',
      duration: 2000
    })
  },
  btnClick4() {
    wx.showToast({
      title: '自定义图标',
      image: '../../images/product3.jpg',
      icon: 'success',
      duration: 2000
    })
  },
})

效果图

wx.showModal(Object object)

WXML

<button bindtap="btnClick1" type="primary">正常模态对话框</button>
<button bindtap="btnClick2" type="primary">无取消键的模态对话框</button>
<button bindtap="btnClick3" type="primary">自定义按键</button>

WXSS

button{
  margin: 20rpx;
}

JS

/*
  title    提示的标题
  content  提示的内容
  showCancel：true 是否显示取消按钮
  cancelText             取消按钮的文字，最多 4 个字符
  cancelColor：#000000    取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
  confirmText   确认按钮的文字，最多 4 个字符
  confirmColor  确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
  success    接口调用成功的回调函数
  fail       接口调用失败的回调函数
  complete   接口调用结束的回调函数（调用成功、失败都会执行）
*/
/* 
  confirm  为 true 时，表示用户点击了确定按钮
  cancel   为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）
*/

Page({
  data: {},
  btnClick1() {
    wx.showModal({
      title: '提示',
      content: '这是一个模态对话框',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  btnClick2() {
    wx.showModal({
      title: '提示',
      content: '这是一个无取消键的模态对话框',
      showCancel:false,
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        }
      }
    })
  },
  btnClick3() {
    wx.showModal({
      title: '提示',
      content: '这是一个自定义按键的模态对话框',
      cancelText: '算了吧',
      cancelColor: 'green',
      confirmText: '嗨！世界',
      confirmColor: 'red',
      success(res) {
        if (res.confirm) {
          console.log('嗨！世界')
        } else if (res.cancel) {
          console.log('算了吧')
        }
      }
    })
  },
  
})

效果图

弹窗中显示图片

参考文档：https://www.jianshu.com/p/a7c4d394f51a

现在想在小程序弹窗中加入图片，

不过发现并没有设置图片的参数，但是这是一个API，但是组件呢？我并没有在官方文档中找到，但是经过尝试发现<modal></modal>是可以显示一个模态弹窗的

于是：

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

可以改写为：

<modal title='提示' hidden="{{modalHidden}}" bindcancel='modalCancel' bindConfirm='modalConfirm'>
    这是一个模态弹窗
</modal>

WXML

下面我们给他加上图片：

//wxml: 代码如下

<view class='container'>

  <button class='button' bindtap='buttonTap' type='primary'>显示弹窗</button>

  <modal title="我是标题" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCandel">
    <view>
      <image class="image" src="../images/image.jpg" mode='aspectFill'></image>
    </view>
    //需要换行的话直接添加view标签
    <view>You say that you love rain,</view>
    <view>but you open your umbrella when it rains...</view>
    You say that you love the sun, 
    but you find a shadow spot when the sun shines... 
    You say that you love the wind, 
    But you close your windows when wind blows... 
    This is why I am afraid; You say that you love me too...
  </modal>

</view>

WXSS

.image {
  width: 250rpx;
  margin: 10rpx 20rpx 0rpx 0rpx;
  /* float: left; */
}

JS

//js: 代码如下
Page({

  /**
   * 页面的初始数据
   */
  data: {
    modalHidden: true
  },

  /**
   * 显示弹窗
   */
  buttonTap: function() {
    this.setData({
      modalHidden: false
    })
  },

  /**
   * 点击取消
   */
  modalCandel: function() {
    // do something
    this.setData({
      modalHidden: true
    })
  },

  /**
   *  点击确认
   */
  modalConfirm: function() {
    // do something
    this.setData({
      modalHidden: true
    })
  }
})

效果

参考文档：

[1] https://blog.csdn.net/JackJia2015/article/details/86541089