HarmonyOS创建一个page并实现界面跳转(JavaScript)

news/2024/7/7 18:33:16

上文 HarmonyOS创建JavaScript(类 Web开发模式)项目中 我们接触了这咋类Web开发模式
并创建了一个项目
之前 我们 ArkTS 开发模式的项目 resources目录 下的 base目录下的 profile目录下的 main_pages.json中存放了 我们page目录的配置
但是 我们javaScript模式 下 好像没有哦
在这里插入图片描述
我们项目 main目录下有一个 config.json
里面就有page的相关配置
在这里插入图片描述
这里 我们的操作依旧是 在pages目录下 右键 选择 new一个page
在这里插入图片描述
我们输入一下page名称 然后 点击 Finish 创建
在这里插入图片描述
这样 我们就创建完成了
在这里插入图片描述
这里 我们将 pages目录下的 index下的 index.hml 代码改写如下

<div class="container">
    <text class="title">
        首界面 index
    </text>
    <button class = "button">去第二个界面</button>
</div>

这里 我们将原本的响应式数据 换成了文字 首界面 index 看着方便
然后下面放了一个 button 按钮 class名改为button
然后 css中这样写
在这里插入图片描述
这里 我们给 class名为button 添加了 高宽 字体大小的样式 这些 学过css的人自然都很容易看懂

这样我们预览界面效果就是这样的
在这里插入图片描述
然后 我们将index的js更改如下

import router from '@ohos.router';
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    goTowPage() {
        router.pushUrl({
            url: "pages/two/two"
        })
    }
}

这里 我们导入了 router模块 然后 定义了一个叫goTowPage的函数 跳转向 "pages/two/two"路由
这里 可以看到 router跳转的方式和ArkTS模式的项目还是一样的

然后 我们click绑定给 button一个点击事件 点击触发goTowPage函数
在这里插入图片描述
但是点击后 你会发现跳转不了

我们将 js中 router.pushUrl 改成 router.push 就OK了
但是 官方编辑器 明确提示 push 函数是将被淘汰的 不推荐使用语法
但是 你推荐的不能跳转 不推荐的可以跳转 真的就很离谱

也希望鸿蒙官方工程师能够早日注意到这个问题

总归换了之后点击就可以正常跳转了
在这里插入图片描述
调回上一个界面 就 router.back() 就可以了


http://lihuaxi.xjx100.cn/news/1886451.html

相关文章

【Spring进阶系列丨第五篇】详解Spring中的依赖注入

文章目录 一、说明二、构造函数注入2.1、方式一【index索引方式】2.1.1、定义Bean2.1.2、主配置文件中配置Bean2.1.3、测试 2.2、方式二【indextype组合方式】2.2.1、定义Bean2.2.2、主配置文件配置Bean2.2.3、测试2.2.4、解决方案 2.3、方式三【name方式】2.3.1、定义Bean2.3.…

jmeter不精通?来看这套很全的jmeter教程,ant批量执行Jmeter脚本

JDK&#xff0c;Jmeter默认已经装了ANT下载&#xff1a;Apache Ant - Binary Distributions ant环境变量需要配置 ant_home&#xff0c;你解压之后的地址 然后PATH环境变量里加上bin目录&#xff0c;D:\work\apache_ant\bin 最后打开命令行窗口&#xff0c;输入 ant -v&…

深入理解StringBuilder为什么线程不安全?

引言 当我们深入探讨StringBuilder为何是线程不安全的时候&#xff0c;需要理解其内部实现和多线程环境下的挑战。在这篇文章中&#xff0c;我们将深入分析StringBuilder的设计原理&#xff0c;为什么它不适用于多线程环境&#xff0c;并探讨在多线程环境中可能面临的问题。 …

StackOverFlowError常见原因及解决方法

StackOverFlowError常见原因及解决方法 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在Java开发中&#xff0c;我们经常会遇到StackOverflowError&#xff0c;这是…

听GPT 讲Rust源代码--src/tools(12)

File: rust/src/tools/rust-analyzer/crates/rust-analyzer/src/config.rs 在Rust源代码中&#xff0c;rust/src/tools/rust-analyzer/crates/rust-analyzer/src/config.rs文件的作用是定义和解析rust-analyzer的配置文件。该文件包含了各种配置项的数据结构和枚举类型&#xf…

划时代!Eclipse AI编码新方式——Copilot4Eclipse即将发布

在本月早些时候&#xff0c;MyEclipse官方宣布了将于本月晚些时候发布全新插件Copilot4Eclipse&#xff0c;它是同类型插件中的第一个&#xff0c;能帮助开发者直接在Eclipse IDE中无缝地使用GitHub Copilot AI编码辅助。 MyEclipse一次性提供了巨量的Eclipse插件库&#xff0c…

[Linux] nginx编译安装及系统服务添加

一、nginx 介绍 nginx和apache一样都是提供web网页服务的。 Nginx&#xff1a; Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器&#xff0c;而且支持热部署&#xff0c;几乎可以做到 7 * 24 小时不间断运行&#xff0c;即使运行几个月也不需要重新启动&#xff0c;还…

系统架构设计师教程(四)信息系统基础知识

信息系统基础知识 4.1 信息安全基础知识4.1.1 信息安全的概念4.1.2 信息存储安全4.1.3 网络安全 4.2 信息系统安全的作用与意义4.3 信息安全系统的组成框架4.3.1 技术体系4.3.2 组织机构体系4.3.3 管理体系 4.4 信息加解密技术4.4.1 数据加密4.4.2 对称密钥加密算法4.4.3 非对称…