m0_75069789 2024-04-23 16:45 采纳率: 50%
浏览 5

Harmony 页面之间的跳转

（1）完成登录信息页面
（2）完成用户信息收集页面
（3）在登录信息页面输入正确的用户名与密码后，跳转到用户信息收集页面。该页面的姓名信息即为登录时的用户名。
（4）用户收集页面可以通过点击按钮，返回用户登录页面。退出时使用Dialog对话框对用户操作进行确认。
将代码与运行截图放在文档中，请注意，代码需要体现HML、CSS和JS文件部分，可以截图展示

  • 写回答

6条回答 默认 最新

  • 阿里嘎多学长 2024-04-23 16:46
    关注

    以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

    问题概括

    这个问题的目的是实现一个基于HarmonyOS操作系统的页面跳转功能。具体来说，需要完成两个页面：登录信息页面和用户信息收集页面。当用户在登录信息页面输入正确的用户名和密码后，应用应该跳转到用户信息收集页面，并且该页面的姓名信息应自动填充为登录时的用户名。此外，用户信息收集页面应提供一个按钮，允许用户返回登录页面，并且在退出应用时通过Dialog对话框进行用户操作确认。

    问题出现原因

    这个问题可能出现的原因包括但不限于：

    1. 用户需要在不同页面间进行导航，这是大多数应用程序的基本需求。
    2. 为了提高用户体验，需要在用户登录后自动填充一些信息，减少用户输入。
    3. 为了确保用户在退出应用时不会意外丢失数据，需要进行操作确认。

    问题解决方案

    最优解决方案是使用HarmonyOS支持的前端技术栈来实现页面跳转和数据传递。以下是实现该功能的一般步骤：

    1. 创建两个页面：一个用于登录，一个用于用户信息收集。
    2. 实现登录验证：在用户输入用户名和密码后，进行验证，如果正确，则跳转到信息收集页面。
    3. 数据传递：在跳转过程中，将用户名作为参数传递给信息收集页面。
    4. 实现返回和退出功能：在信息收集页面提供返回按钮，并在退出时弹出Dialog对话框。

    提供代码

    由于HarmonyOS支持使用JavaScript、HTML和CSS进行开发，以下是使用这些技术的示例代码：

    HTML (login.html)

    <!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
</head>
<body>
    <form id="loginForm">
        <input type="text" id="username" placeholder="Username" required>
        <input type="password" id="password" placeholder="Password" required>
        <button type="submit">Login</button>
    </form>
    <script src="login.js"></script>
</body>
</html>

    CSS (styles.css)

    body {
    font-family: Arial, sans-serif;
}

form {
    margin: 50px;
}

input {
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
}

    JavaScript (login.js)

    document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    
    // 这里应该有一个验证用户名和密码的函数
    if (validateCredentials(username, password)) {
        window.location.href = 'userinfo.html?username=' + encodeURIComponent(username);
    } else {
        alert('Invalid credentials');
    }
});

function validateCredentials(username, password) {
    // 模拟验证逻辑
    return username === 'admin' && password === 'password';
}

    HTML (userinfo.html)

    <!DOCTYPE html>
<html>
<head>
    <title>User Info Page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome, <span id="userName"></span>!</h1>
    <button onclick="goBack()">Back to Login</button>
    <script src="userinfo.js"></script>
</body>
</html>

    JavaScript (userinfo.js)

    function goBack() {
    var r = confirm("Are you sure you want to exit?");
    if (r == true) {
        window.location.href = 'login.html';
    }
}

// 从URL参数中获取用户名
var urlParams = new URLSearchParams(window.location.search);
var username = urlParams.get('username');
document.getElementById('userName').textContent = username;

goBack(); // 初始调用以设置监听器

    示例代码运行方式

    1. 将上述HTML、CSS和JavaScript代码保存为相应的文件。
    2. 在支持HarmonyOS的设备上运行HTML文件。

    示例代码预期运行结果

    • 用户打开login.html，输入用户名和密码，点击登录。
    • 如果输入正确，自动跳转到userinfo.html页面，显示欢迎信息并自动填充用户名。
    • 用户可以点击“Back to Login”按钮返回登录页面，或者在退出时进行确认。

    请注意，上述代码是一个简化的示例，实际应用中需要更复杂的验证逻辑和安全措施。

    评论 编辑记录

报告相同问题？

  • 一步一步教你进行鸿蒙应用开发：四、在应用内基于Router实现页面基本跳转
    2025-03-05 11:12
    jackiendsc的博客 一步一步教你进行鸿蒙应用开发：四、在应用内基于Router实现页面基本跳转
  • 鸿蒙开发入门 开发第一个鸿蒙应用+页面跳转
    2024-04-29 06:18
    2401_84182337的博客 ■ 图10 工程运行成功页面 2、实战演练——页面跳转 鸿蒙操作系统提供了两种FA(Feature Ability)的UI开发框架: Java UI框架和JS UI框架，如表1所示。 Java UI框架提供了细粒度的UI编程接口，UI元素更丰富，使应用...
  • HarmonyOS笔记-应用跳转技术与最佳实践
    2025-06-12 14:42
    gelivation的博客 应用间跳转场景应用间跳转的实现方案App Linking的配置调用方如何向目标方传递参数，目标方如何进行参数的接收，如何向调用方返回执行结果使用App Linking时应用未安装场景下需要对链接地址对应的前段内容进行适配...
  • Harmony学习之页面路由与导航
    2025-12-09 23:31
    xyphehe的博客 // 接收参数路由模块导入跳转方式pushUrl（压栈）、replaceUrl（替换）参数传递：通过params传递，在目标页面接收页面返回返回上一页，可传递返回结果生命周期onPageShowonPageHide等生命周期方法页面栈管理：最大32...
  • 【HarmonyOS 5】App Linking 应用间跳转详解
    2025-05-08 17:32
    深海的鲸同学 luvi的博客 若未安装，且已配置跳转应用市场，则跳转应用市场进行下载，待安装完成后用户首次打开应用，仍将跳转至该页面。如果未配置跳转应用市场，则自动打开浏览器加载对应的网页内容。链接分享扫码直达。
  • HarmonyOS_Application技术栈1
    2022-08-08 19:10
    - **Router**：路由系统是 HarmonyOS 应用中页面跳转和数据传递的核心机制。通过定义和注册路由规则，开发者可以实现页面间的导航，并在不同页面之间传递参数。 以上是 HarmonyOS 应用开发技术栈中的主要知识点，...
  • HarmonyOS应用间跳转开发指南
    2025-09-03 16:43
    hongxiaomeng的博客 系统提供的“应用间跳转能力”通过统一的链接协议和系统级路由，实现“一键直达”的流畅体验，显著提升用户效率和满意度，从而提升应用转化率与用户留存率。·同一个网站域名可以关联多个应用，只需要在"apps"列表里...
  • 技能提升必备：鸿蒙HarmonyOS应用开发者认证
    2025-08-12 12:49
    xcLeigh的博客 技能提升必备：鸿蒙HarmonyOS应用开发者认证，HarmonyOS 认证是华为为开发者打造的能力衡量体系。随着 HarmonyOS 系统影响力不断扩大，市场对相关开发人才需求激增。该认证分为基础与高级等不同级别，覆盖应用开发、...
  • HarmonyOS开发实战：“应用权限通知跳转指南”
    2024-07-14 21:51
    「已注销」的博客 如果应用首次拒绝了消息通知，应用希望能够引导用户拉起设置应用设置允许通知，用来接收应用内的推送消息；并且在设置完后返回页面可以监听到修改后的状态。
  • HarmonyOS+Django登录页面
    2022-07-18 21:57
    爱在西元前l的博客 在DevEco中config.json文件中添加如下代码,作用是为了让priviewer可以连接本地Django服务器。然后在启用manage.py任务编写下面两行代码，依次运行。可以使用可视化工具Navicat写一下数据库中的数据。这里我在创建app...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 4月23日