同学们大家好,我是小伊同学,上一节我们学习了API的类型和语法结构,那么今天我们一起来看一下常用的API都有哪些。
首先,我们来看界面交互的api。
第一种,我们先来看消息提示框,调用成功后的样子如图所示。实现的代码是左侧这段语句,其中title显示在图标底部,icon决定了显示对勾,duration字段表示延迟时间。这些字段都是可以配置的,我们只需要修改成我们需要的即可,例如这里的icon可以赋值为loading,那么显示出来的样子就是转圈加载的图标。对于安卓和ios系统,图标的具体样子可能存在一些差别,但表达的意思是一样的,都能向用户提示正在加载。
上面这种为单向的,用户只能看,但是不能操作,如果想要和用户交互我们可以使用对话框,我们称之为模态弹框。他的样子如图所示。具体代码如下,title可以设置标题,content设置内容。在success中,我们可以分别写当用户点击确定或者取消后分别执行的代码。
下面,我们再来介绍一个加载提示框,他的样子如图所示,对应的代码如下。其实他和刚才我讲到的将消息提示框api中icon改为loading的样式是一样的。不同点在于,这里的api需主动调用 wx.hideLoading这个api才能关闭提示框。也就是实际上是两个api,一个控制开启,一个控制关闭,更加灵活。
如果我们想要定时关闭,那么可以设置计时器,计时器的代码如下,其中function花括号中的函数内容为计时结束后执行的内容。我们将关闭提示框的代码放进去,2000表示时长,可以修改成需要的值,同样计时器也是异步的,计时从开始执行这段代码开始,进行倒计时,此时主线任务依然在顺序执行这段代码之后的内容。
接着,我们来学习新的一类api,页面路由api。那么什么是页面路由呢?简单来说就是页面之间的跳转。请大家回忆一下我之前讲到的浏览器打开网页的例子,小程序与之类似,由于用户不能再单独控制每个标签页,因此页面之间的跳转必须由开发者完成,当用户点击页面上的按钮后,我们在事件响应函数中安排页面的切换。
在小程序中,主要有以下几种跳转方式。
第一种,relaunch方法,他的作用是关闭所有页面,打开到应用内的某个页面。这里的关闭所有页面是指之前打开过,但是没有关闭的页面,类似于在一个浏览器中当你打开了很多标签页时,使用这个方法能够把所有网页关闭,然后打开一个新的页面。这个新的页面也可以是刚才关闭的页面,区别在于重新打开要先执行页面的卸载函数,然后又重新按照第一次加载的方法,执行onload函数、onshow函数和onready函数。
第二种是redirectTo方法,作用是关闭当前页面,跳转到应用内的某个页面,这里的跳转可以跳转到原来打开但未关闭的页面,也可以打开新的页面。
第三种是navigateTo方法,它保留了当前页面,跳转到应用内的某个页面。
最后是navigateBack方法,它能够关闭当前页面,返回上一页面或多级页面。
下面我们给出这四种方法具体的示例代码,前三个方法,只需要传入一个参数url即可,这个url就是将要跳转到的页面的路径,可以是绝对路径例如方法一和方法三,也可以是相对路径,例如方法二。对于第四种方法,由于这个页面之前已经打开过了,因此这里只需要告诉程序你要返回第几级的页面即可,也就是这里的delta属性,他的值是number类型的。如果delta大于现有页面数,则返回到首页。顺便一提的是,打开页面的顺序实际上是由程序记录的,打开的页面会保存在页面栈中。在js中,程序只要执行到这些语句就会直接进行页面的跳转,因此我们只需要直接拷贝代码并使用即可。
同学们可以看到,这些api实际上都很简单,其功能并不复杂,不需要很多参数,所以我们之前说的success、fail和complete都没有必要写。一般来说,这些功能也是不会执行失败的。
好了,本节课的内容就到这里,我们明天继续。如果大家有什么问题,欢迎在文末留言。