梅科尔工作室-张宇-鸿蒙笔记四

一、官方API使用

首先需要找到想要使用的API文档。在基础文档里位置如下。找到之后，查看文档中关于此接口的说明，查看使用方法和使用案例后即可使用。

页面跳转和参数接收

在使用页面路由之前，需要先导入router模块，如下代码所示。

 import router from '@ohos.router';

页面跳转的几种方式，根据需要选择一种方式跳转即可。

方式一：通过调用router.push()方法，跳转到Ability内的指定页面。

说明：每调用一次router.push()方法，均会新建一个页面。默认情况下，页面栈数量会加1，页面栈支持的最大页面数量为32。

当页面栈数量较大或者超过32时，可以通过调用router.clear()方法清除页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
router.push({
  url: 'pages/Second',
  params: {
    src: 'Index页面传来的数据',
  }
})

方式二：API9及以上，router.push()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。

在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近的同url页面会被移动到栈顶，移动后的页面为新建页，原来的页面仍然存在栈中，页面栈数量不变；如果目标页面的url在页面栈中不存在同url页面，按标准模式跳转，页面栈数量会加1。
router.push({
  url: 'pages/Second',
  params: {
    src: 'Index页面传来的数据',
  }
}, router.RouterMode.Single)

方式三：通过调用router.replace()方法，跳转到Ability内的指定页面。即使用新的页面替换当前页面，并销毁被替换的当前页面，页面栈数量不变。

router.replace({
  url: 'pages/Second',
  params: {
    src: 'Index页面传来的数据',
  }
})

方式四：API9及以上，router.replace()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。

在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近的同url页面会被移动到栈顶，替换当前页面，并销毁被替换的当前页面，移动后的页面为新建页，页面栈数量会减1；如果目标页面的url在页面栈中不存在同url页面，按标准模式跳转，页面栈数量不变。

router.replace({
  url: 'pages/Second',
  params: {
    src: 'Index页面传来的数据',
  }
}, router.RouterMode.Single)

已经实现了页面的跳转，接下来，在Second页面中如何进行自定义参数的接收呢？

通过调用router.getParams()方法获取Index页面传递过来的自定义参数。

import router from '@ohos.router';
 
@Entry
@Component
struct Second {
  @State src: string = router.getParams()?.['src'];
  // 页面刷新展示
  ...
}

效果示意图如图2-1所示。在Index页面中，点击“Next”后，即可从Index页面跳转到Second页面，并在Second页面中接收参数和进行页面刷新展示。

图2-1 Index页面跳转到Second页面

页面返回和参数接收
经常还会遇到一个场景，在Second页面中，完成了一些功能操作之后，希望能返回到Index页面，那我们要如何实现呢？

在Second页面中，可以通过调用router.back()方法实现返回到上一个页面，或者在调用router.back()方法的时增加可选的options参数（增加url参数）返回到指定页面。

说明：

调用router.back()返回的目标页面需要在页面栈中存在才能正常跳转。

例如调用router.push()方法跳转到Second页面，在Second页面可以通过调用router.back()方法返回到上一个页面。

例如调用router.clear()方法清空了页面栈中所有历史页面，仅保留当前页面，此时则无法通过调用router.back()方法返回到上一个页面。

返回上一个页面。
router.back()

返回到指定页面。

router.back({ url: 'pages/index' })

数据请求模块

• 首先需要导入http 模块

• 

   

• 配置权限

• 在config.json的module模块里配置，示例如下。

• 配置网络权限

• 

   

  弹窗模块

• 首先需要导入prompt模块

   

• 主要使用的是prompt.showToast（）方法，作用是可以在屏幕上弹出提示信息。message是弹出的消息，而duration是弹出的时间，单位是毫秒。1000是1秒，则2000是2秒。

   

• 绑定事件

• 用on加事件名称，不同的组件有不同的事件类型。通用事件如下：

• 点击事件