微信小程序用户交互

当用户单击微信小程序中的按钮时，即用户进行了单击操作，微信小程序会给出一个反馈的状态，这一过程称为用户交互。有时发出网络请求后，希望用户知道网络请求已经发出了，不希望用户再进行下一步的操作，而是等待服务器的响应数据，这时也会使用一个加载动作来告知用户正在进行操作，这样可以减少用户用服务器的交互，降低服务器的访问压力。

消息提示框

消息提示框可以弹出一个下面带有文字上面带有图片的提示框，文字和图片可以告知用户一些信息。内部的文字和图片等都可以自定义，如图所示。

消息提示框显示的代码如下：

        // 消息提示框显示
        wx.showToast({
          title: 'title',     // 提示的内容
          icon: 'iconType',   // 显示的图标
          image: 'imageUrl',  // 优先级高于icon，填写图片路径，用于自定义提示图片
          duration: 1500,     // 提示的延迟时间
          mask: false,         // 是否显示透明蒙层，防止触摸穿透
          success: funcation(){
            // 消息提示框显示成功
          },
          fail: funcation(){
            // 消息提示框显示失败
          },
          complete: funcation(){
            // 不管成功失败都会执行
          }
        })

消息提示框隐藏的代码如下：

        // 消息提示框隐藏
        wx.hideToast({
          success: funcation(){
            // 消息提示框隐藏成功
          },
          fail: funcation(){
            // 消息提示框隐藏失败
          },
          complete: funcation(){
            // 不管成功失败都会执行
          }
        })

加载提示框

加载提示框也可以自定义文字内容，但是不能自定义图片，上部的图片由微信团队来定义，不可修改。加载提示框一般用于发送网路请求等待服务器响应的过程中，如图所示。

加载提示框显示的代码如下：

        // 加载提示框显示
        wx.showLoading({
          title: 'title',   // 提示的内容
          duration: 1500,   // 提示的延迟时间
          mask: false,      // 是否显示透明蒙层，防止触摸穿透
          success: funcation(){
            // 加载提示框显示成功
          },
          fail: funcation(){
            // 加载提示框显示失败
          },
          complete: funcation(){
            // 不管成功失败都会执行
          }
        })

加载提示框隐藏的代码如下：

        // 加载提示框隐藏
        wx.hideLoading({
          success: funcation(){
            // 加载提示框隐藏成功
          },
          fail: funcation(){
            // 加载提示框隐藏失败
          },
          complete: funcation(){
            // 不管成功失败都会执行
          }
        })

模态弹窗

模态弹窗，在底部可以设置按钮与用户进行交互。底部的按钮只能设置2个，且文字长度最多为4个字。如图所示。

加载模态弹窗的代码如下：

        // 加载模态弹窗
        wx.showModal ({
          title: 'title',                // 提示的标题
          content: 'content',            // 提示的内容
          showCancel: true,              // 是否显示取消按钮
          cancelText: '取消',             // 取消按钮的文字，最多4个字符
          cancelColor: '#000000',        // 取消按钮的文字颜色
          confirmText: '确定',            // 确定按钮的文字，最多4个字符
          confirmColor: '#3cc51f',       // 确定按钮的文字颜色
          success: funcation(res){
            // 加载模态弹窗成功
            res.confirm                   //booolean类型，true表示用户单击了确定按钮
            res.camcel                    //booolean类型，true表示用户单击了取消按钮
          },
          fail: funcation(){
            // 加载模态弹窗失败
          },
          complete: funcation(){
            // 不管成功失败都会执行
          }
        })

下弹操作菜单

下弹操作菜单是从微信小程序的底部弹出一个垂直排列的列表，可以单击列表来进行操作，如图所示。

下弹操作菜单的代码如下：

        // 下弹操作菜单
        wx.showActionSheet({
          itemList: [],   // 按钮的文字数组，最多可以存放6个
          itemColor: '#000000',按钮的文字颜色，控制的是所有的文字
          success: funcation(res){
            // 下弹操作菜单弹出成功
            res.tapIndex  // 用户单击的按钮序号，从上到下的顺序，从0开始
          },
          fail: funcation(){
            // 下弹操作菜单弹出失败
          },
          complete: funcation(){
            // 不管成功失败都会执行
          }
        })

酷客网相关文章：

• 微信小程序图片的操作
• 微信小程序文件的操作
• 微信小程序网络请求
• 微信小程序页面导航