HarmonyOS鸿蒙Next上手做一个华为鸿蒙手表应用 3 - 两页面互相跳转

HarmonyOS鸿蒙Next上手做一个华为鸿蒙手表应用 3 - 两页面互相跳转 接上一篇：

本节内容： 添加训练页面并实现其与主页面的互相跳转

源码仓库地址： https://gitee.com/zhaoquan/harmonyoswatchdemo

创建训练页面

知识点：

  • 创建页面
  • 页面跳转：router.replace
  • config.json 中 Pages 页面的管理

修改训练页面的代码

<!--xunlian.hml-->
<div class="container">
    <text class="title">
        训练页面
    </text>
    <input type="button" class="btn" value="返回" onclick="clickAction">
</div>

在 xunlian.hml 创建页面时生成的默认代码中将：

Hello {{title}}

改为：

训练页面

将点我改为返回：

<input type="button" class="btn" value="返回" onclick="clickAction">

训练页面 xunlian.css 跟主页面 index.css 样式一样，复制过来不用修改

xunlian.js

import router from '@system.router'

export default {
    data: {
        // title: 'World'
    },
    clickAction(){
        // console.log("我被点击了")
        router.replace({
            uri:'pages/index/index',
        })
    }
}

在 xunlian.js 创建页面时生成的默认代码中将：

  • Hello {{title}} 注释掉，训练页面不用这个。
  • 从 system 的 router 中导入 router：
    import router from '@system.router'
  • 使用 router.replace 实现页面跳转：
    router.replace({uri:'pages/index/index',});

主页面的 index.js 文件对应修改：

// 在 js 默认代码中将：
Hello {{title}}
注释掉，训练页面不用这个。

// 从 system 的 router 中导入 router：
import router from '@system.router'

// 使用 router.replace 实现页面跳转：
router.replace({uri:'pages/xunlian/xunlian',});

启动模拟器

之前编辑好像保存就刷新这次好像没有，我的操作是，重新点 debug，操作入口：Run -> Debug ‘entry’


更多关于HarmonyOS鸿蒙Next上手做一个华为鸿蒙手表应用 3 - 两页面互相跳转的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

哥，现在router.replace不起效了是怎么回事啊。 router.replace 上面有一根横线，而且console.log也不起效不知道为什么

更多关于HarmonyOS鸿蒙Next上手做一个华为鸿蒙手表应用 3 - 两页面互相跳转的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你好，请问下，
hello world 和input按键，在同一行，如何换行

一起顶，让更多的人看到

升级HarmonyOS后，发现手机的游戏性能也有了显著提升。

眼睛看了，但脑袋不会，嘻嘻

老师问一下，如果我有一个input，我怎么获取input内的值

来早了 前排出售瓜子~

在HarmonyOS鸿蒙Next中，实现两页面互相跳转可以通过Ability和Page Ability来完成。首先，创建两个Page Ability，分别对应两个页面。在config.json中配置这两个Page Ability的路由信息。

在第一个页面的onClick事件中，使用startAbility方法跳转到第二个页面。示例代码如下：

import featureAbility from '@ohos.ability.featureAbility';

let want = {
    deviceId: '', // 设备ID
    bundleName: 'com.example.myapplication', // 包名
    abilityName: 'com.example.myapplication.SecondAbility' // 第二个Ability的名称
};

featureAbility.startAbility(want)
    .then((data) => {
        console.info('跳转成功');
    })
    .catch((error) => {
        console.error('跳转失败', error);
    });

在第二个页面中，可以通过terminateSelf方法返回到第一个页面。示例代码如下：

import featureAbility from '@ohos.ability.featureAbility';

featureAbility.terminateSelf()
    .then((data) => {
        console.info('返回成功');
    })
    .catch((error) => {
        console.error('返回失败', error);
    });

通过这种方式，可以实现两页面的互相跳转。

在HarmonyOS鸿蒙Next中，实现两个页面之间的互相跳转可以通过使用Ability和Intent来完成。首先，创建两个页面MainAbility和SecondAbility，并分别定义它们的布局和逻辑。在MainAbility中，使用Intent启动SecondAbility，代码如下：

Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder()
    .withDeviceId("")
    .withBundleName("com.example.myapp")
    .withAbilityName("com.example.myapp.SecondAbility")
    .build();
intent.setOperation(operation);
startAbility(intent);

在SecondAbility中，同样可以使用Intent返回到MainAbility。确保在config.json中正确注册了这两个Ability。这样，用户就可以在两个页面之间自由跳转了。

回到顶部