微信小程序学习Course 6 界面交互API函数

在API函数界面中有一个交互API函数区，如下图所示，我们可以利用交互API实现一些简单的人机交互界面

6.1  显示消息框

微信小程序提供了两个显示消息的API函数

wx.showToast(Object object)

此函数参数为一个对象，对象内容可以包含下列：

在以后的每个API函数可能都会包含几个参数，参数可以是对象，也可以是单纯的字符串，也可以是函数对象，这正是JAVAScript奇特之处。那么此处传入一个对象，我们可以通过设置对象的值来设定此API函数的参数。上表中title显示要显示的内容；icon显示的图标，有两种，一种是成功对勾（success），另外一种是loaidng。也可以自定义图标image调用；duration是指显示的时间，提示多少毫秒。此对象中还可以包含两个特殊的内容，success与fail函数，这是当显示成功后会执行的函数和失败后执行的函数，一般我们显示一个消息不会用到此函数，但是以后别的API函数一般都会有success函数，当你完成一个任务成功了提示用户一些信息或者保存本地一些信息，失败了给与用户失败的窗口。

wx.hideToast(Object object)

隐藏窗口，此函数参数也算是一个对象，但此对象比较简单就包含三个函数。他一般用在我们显示一个提示框之后可能会留给用户一个“不再显示”按钮，用户点击之后提前结束显示。

6.2 等待消息框

wx.showLoading(Object object)

此函数用在程序执行一段时间较长的操作时显示一段“加载中”的字样。此函数不能设置时间，需要程序调用结束显示函数才能中止。

其参数也是对象：

此参数中多了一个mask，设置是否出现一层透明蒙层，选择false时，用户仍然可以点击消息层下方的界面上的东西。当选择true时，则不能点击界面，只得等待loading消失。

wx.hideLoading(Object object)

loading消息隐藏函数。

6.3 显示对话框

wx.showModal(Object object)

此API函数可以显示一个交互的对话框

 参数也是对象，具体如下

 此时表中的title和上文不一样，此时它是真的代表标题，然后content代表内容。当完成操作后会进入success函数。

在success函数中，会调入一个参数res，也是一个对象。

此对象携带两个值也就是确定和取消，我们可以通过判断两个值的结果来判断用户做出什么操作。

举例如下：

wx.showModal({
    title:"消息提示",
    content:"打卡成功",
    success:function(res){
        if(res.confirm){
        //执行一些操作
        }

    }

});

　　其中用{}大括号包含一个对象，每个参数用冒号解释，用逗号分隔开。

6.4 底部菜单

wx.showActionSheet(Object object)

 此函数调用底部菜单显示控件，比如美团外卖会有选择某个食品是否放香菜，放盐，几双筷子等菜单。下图为一个选择城市的例子，如图所示：

其参数也是对象，如下表

 其中主要需要设置的是itemList，也就是菜单里面的内容，这里要求是一个字符串数组。另外一个是success函数，在success中我们可以通过res参数所引导用户点击的菜单序列号。

res.tapIndex//菜单序列号

代码：

 wx.showActionSheet({
       itemList:[\'北京\',\'上海\',\'广东\'],
       success:function(res){
       }
});

【小任务】

完成一个早起打卡小程序，在规定时间可以打卡，超时后提示打卡失败。每天只能打卡一次。

答案：在案例3中