小程序 | 13-弹窗和Toast

1. showToast

Toast API 文档

Toaset 可以设置的内容如下：

// pages/about/about.js
Page({
   onBtnClick(event){
      wx.showToast({
        title: '正在加载ing。。。',
        duration:2000,
        icon:"loading",
        // 自定义展示的图片——会覆盖 icon
        // image:"/assets/tabbar/faxian.png"
      })
  }
})

2. showModel

showModal API 的文档:

// pages/about/about.js
Page({
  onBtnClick(event) {
    wx.showModal({
      cancelColor: '#999999',
      title:'标题',
      content:'内容',
      success:function(res){
        console.log(res)
        if(res.cancel){
          console.log("用户点击了取消按钮")
        }
        if(res.confirm){
          console.log("用户点击了确定按钮")
        }
      }
    })
  }
})

3. showLoading

showLoading API 文档:

// pages/about/about.js
Page({
  onBtnClick(event) {
    wx.showLoading({
      title: '加载中',
    })

    // 延时 1500ms 后关闭 loading
    setTimeout(() => {
      wx.hideLoading()
    },1500)
  }
})

showLoading 与 Toast 比，不会自动消失。想关闭 loading 时必须主动调用 wx.hideLoading()

4. showActionSheet

showActionSheet API 文档:

// pages/about/about.js
Page({
  onBtnClick(event) {
   wx.showActionSheet({
     itemList: ["相册","拍摄"],
     itemColor:'#ff0000',
     success:function(res){
       console.log(res)
       const clickIndex = res.tapIndex
       console.log("被点击的条目索引是：",clickIndex)
     }
   })
  }
})

5. 分享弹窗

5.1. onShareAppMessage

onShareAppMessage API 文档:

在页面的 js 文件中会有： onShareAppMessage(Object object) 回调，当用户点击页面右上角的默认分享按钮时，会触发该回调。

用于监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

参数 Object object: 中包含如下内容

此事件处理函数需要 return 一个 Object，用于自定义转发内容，返回内容如下：

示例代码:

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

​

5.2. 分享按钮

如果我们需要让用户点击指定的按钮触发分享，则可以使用下面的方式。

<button open-type="share">点击分享</button>

用户点击该按钮之后，效果同前一小节中的效果。

---