我们现在编写了两个页面:首页与post文章页面。来尝试将两个页面连接起来,通过点击首页的“开启小程序之旅”跳转到post文章页面。首先将首页重新调整为启动页面,代码如下:
调整启动页面的方法很简单,将启动页面的路径放在pages数组下的第一个元素即可。
要从首页跳转到post页面,需要使用事件来响应点击“开启小程序之旅”这个动作。什么是事件?严肃一些的定义是:事件是视图层(wxml)到逻辑层(js)的通信方式。简单一些理解,事件可以让我们在js里处理一些用户在界面上的一些操作并对这些操作做出反馈。比如点击首页“开启小程序之旅”按钮后,需要在js里调用MINA框架的API,是页面从首页跳转到post。要实现这样的机制,需要做两件事情:第一,在组件上注册事件。注册事件将告诉小程序,我们要监听那个组件的什么事件。在本例中,需要监听“开启小程序之旅”这个组件的tap事件。第二,在js中编写事件处理函数响应事件。也就是说,监听到事件后,需要编写自己的业务。在本例中,我们将调用MINA框架的导航API,让首页跳转到post页面。更改首页的代码,如下代码所示。
在之前代码上仅仅是在class=“journey-container”的这个view组件上添加了catchtap=“onTapJump”的事件绑定。事件绑定的写法同组件的写法相同。它的意思是,监听点击这个动作,当用户点击这个动作后,将执行一个onTapJump的函数,这个函数必须在页面的js中定义。下面的代码定义了tap事件的处理函数。
代码中为Page方法的Object参数定义了一个函数:onTapJump。函数的名称可以任意指定,但必须和wxml代码中的catchtap=“onTapJump”保持一致。单用户点击或者触碰“开启小程序之旅”这个按钮后,MINA框架将执行onTapJump这个函数,并将一个event对象作为参数传递到函数里。保存运行代码,点击“开启小程序之旅”,页面将从首页跳转到post文章页面。
热门跟贴