实现Ability内页面的跳转和数据传递。
首先需要导入router模块
![](https://img-blog.csdnimg.cn/img_convert/88a4d225443a1a1ccc9af7d73a7234e0.png)
跳转方式
方式一
router.push(),跳转到指定页面。
每调用一次router.push()方法,均会新建一个页面。默认情况下,页面栈数量会加1,页面栈支持的最大页面数量为32。
示例
![](https://img-blog.csdnimg.cn/img_convert/429d8463a25ec42f930cab9848ab601e.png)
方式二
router.push(),分单实例模式和标准模式。
![](https://img-blog.csdnimg.cn/img_convert/7c542f64fd92855e8cdd6bbd59c61abf.png)
方式三
router.replace(),即使用新的页面替换当前页面,并销毁被替换的当前页面,页面栈数量不变。
![](https://img-blog.csdnimg.cn/img_convert/a9a1c77cf677dd9181f3ae49f27c52c7.png)
方式四
router.replace(),分单实例模式和标准模式。
![](https://img-blog.csdnimg.cn/img_convert/43e83c79d5639c154e414f13d2f492e8.png)
跳转返回
router.back()
与router.push()搭配使用,当使用router.push之后才可以用router.back()进行返回。这种方法不会新建页面,返回的是原来的页面
![](https://img-blog.csdnimg.cn/img_convert/8432f84530b634574bb69062d96a16ba.png)
信息传递
跳转页面通过router.getParams()方法获取Index页面传递过来的自定义参数。
![](https://img-blog.csdnimg.cn/img_convert/0ffa6c7f14f08a17161f04b7c2782fa3.png)
原页面通过router.getParams()方法获取Second页面传递过来的自定义参数。
![](https://img-blog.csdnimg.cn/img_convert/848bd6786da183f49b22a694aab04fa1.png)
注意事项
使用跳转模块时,页面栈支持的最大页面数量为32。当超过32时,便不会再跳转了,所以推荐使用router.push()模块的单实例模式,即跳转方式中的方式二。
router.push()的单实例模式仅在API9下可以使用。
在使用router.back方法时,必须要再次之前使用一次router.push()方法。
当页面栈内的页面数超过数量时,可以使用router.getLength()方法获取当前页面内的页面数量,然后再,然后在使用router.clear()方法清除页面栈。
数据请求模块
首先需要导入http 模块
![](https://img-blog.csdnimg.cn/img_convert/d04953633f8cd4e4c594f3839524262a.png)
配置权限
在config.json的module模块里配置,示例如下。
配置网络权限
![](https://img-blog.csdnimg.cn/img_convert/8bc5b9d6bdf7d5d170463e3fd66a0a09.png)
官方示例
![](https://img-blog.csdnimg.cn/img_convert/98b924f87212d116364201adf1b992b3.png)
弹窗模块
首先需要导入prompt模块
![](https://img-blog.csdnimg.cn/img_convert/1212f06e6332723c8abd48a07aab6c54.png)
主要使用的是prompt.showToast()方法,作用是可以在屏幕上弹出提示信息。message是弹出的消息,而duration是弹出的时间,单位是毫秒。1000是1秒,则2000是2秒。
![](https://img-blog.csdnimg.cn/img_convert/34cbc2b5c6ca8d4fcd17d4e4814d3a03.png)
绑定事件
用on加事件名称,不同的组件有不同的事件类型。通用事件如下:
点击事件
![](https://img-blog.csdnimg.cn/img_convert/6c0493f965b65591b89d564e8ecac5a5.png)
触摸事件
![](https://img-blog.csdnimg.cn/img_convert/de0b68a9e32539e0bc9a3439f43891ea.png)
挂载卸载事件
![](https://img-blog.csdnimg.cn/img_convert/1980355426f6f00b64d376807e18afc7.png)
拖拽事件
![](https://img-blog.csdnimg.cn/img_convert/81b86086c3dc25502cd9c011196b8796.png)