小程序中的交互操作

先在xml文件中定义一个按钮，并添加点击事件

<button type="primary" bindtap="jiaohu">交互操作</button>

在js文件中实现交互操作

示例1：

 jiaohu:function(){
   console.log('aa')
   wx.showActionSheet({
     itemList: ['林彦俊','YOU','遇到你'],
     success:function(res){
       console.log(res)
       // res.cancel 是否点击了取消
       if(!res.cancel){
         // res.tapIndex 点击的下标索引
         console.log(res.tapIndex)
       }
     }
   })
 },

示例2：

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

示例3：

image.png

 wx.showToast({
      title: '成功',
      // 只支持success和loading
      icon: 'success',
      duration: 2000
    })

参考：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

组件小总结

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

组件的分类

• 功能性型组件
  完成具体功能的

• 布局型组件
  用来完成页面结构的（类似div）

• API类型（使用角度）
  wx.showModal
  通过调用一个方法来使用的