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

上文 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://www.mzph.cn/news/217098.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DataFunSummit:2023年数据治理在线峰会-核心PPT资料下载

一、峰会简介 数据治理&#xff08;Data Governance&#xff09;是组织中涉及数据使用的一整套管理行为。由企业数据治理部门发起并推行&#xff0c;关于如何制定和实施针对整个企业内部数据的商业应用和技术管理的一系列政策和流程。 数据治理是一个通过一系列信息相关的过程…

披荆斩棘的「矿区无人驾驶」,能否真正打开千亿级市场?

随着2022年备受瞩目的台泥句容矿无人驾驶运输项目硬核落地&#xff0c;以及相关科技公司开放该矿24小时无人矿卡生产运营直播以证明其项目并非在演示&#xff0c;2023年全国开启了大规模矿区无人驾驶商业化落地&#xff0c;堪称矿区无人驾驶元年。虽然我国矿区无人驾驶市场渗透…

zookeeper集群介绍

一个leader&#xff0c;多个follower&#xff0c;组成的集群 集群中只要有半数以上得节点存活&#xff0c;zookeeper集群就能正常服务 顺序一致性&#xff1a; 来自同一个client的更新请求按其发送顺序依次执行 原子性&#xff1a; 更新操作要么成功要么失败&#xff0c; 没有…

通过POI获取公式列的值但不刷新仍是上一次值的解决方案

在做Excel导出是遇到一个问题,通过POI修改Excel的公式列后再次读取时数据不是最新修改值,奇怪的是在WPS保存后再次读取就可以读取到最新修改值了 使用的读取方法为 cell.getNumericCellValue()这样读取到的数据为上一次的缓存值 经过改进使用重新计算公式的方法在读取时重新计…

LINQ简述

语言集成查询 (LINQ) 是一系列直接将查询功能集成到 C# 语言的技术统称。 为什么需要LINQ&#xff1f; 查询是一种从数据源检索数据的表达式。 查询通常用专门的查询语言来表示。 随着时间的推移&#xff0c;人们已经为各种数据源开发了不同的语言&#xff1b;例如&#xff0…

flink-1.17.2的单节点部署

flink 简介 Apache Flink 是一个开源的流处理和批处理框架&#xff0c;用于大数据处理和分析。它旨在以实时和批处理模式高效处理大量数据。Flink 支持事件时间处理、精确一次语义、有状态计算等关键功能。 以下是与Apache Flink相关的一些主要特性和概念&#xff1a; 流处理…

养牛场北斗综合管理系统解决方案

1.系统架构 随着我国北斗卫星导航定位系统的快速发展和定位精度的持续不断提高&#xff0c;在牛身上穿戴定位终端后可以实现对牛的位置和温度的测量&#xff0c;在蜂窝网络正常的情况下&#xff0c;定位和温度数据通过蜂窝网络通信方式回传到监控云平台&#xff0c;在蜂窝网络缺…

uniapp实现拨打电话跳转手机拨号界面 (ios和安卓通用)

效果展示&#xff1a;左边为安卓系统展示&#xff0c;右边为ios系统展示 代码&#xff1a; toPhone(){uni.makePhoneCall({phoneNumber: "10086", //要拨打的手机号success: (res) > {// console.log("调用成功")},fail: (res) > {// console.log(调…

【嵌入式——C语言】关键字

【嵌入式——C语言】关键字 数字类型相关基本数据类型其他类型 存储相关registerstaticautoexternconst 控制语句相关其他 数字类型相关 基本数据类型 类型说明占用字节(32位)char声明字符型变量或函数返回值类型1字节short声明短整型变量或函数2字节int声明整型变量或函数4字…

784. 字母大小写全排列 dfs + 回溯算法 + 图解 + 笔记

784. 字母大小写全排列 - 力扣&#xff08;LeetCode&#xff09; 给定一个字符串 s &#xff0c;通过将字符串 s 中的每个字母转变大小写&#xff0c;我们可以获得一个新的字符串。 返回 所有可能得到的字符串集合 。以 任意顺序 返回输出 示例 1&#xff1a; 输入&#xf…

leetcode24. 两两交换链表中的节点

题目描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4] 输出&#…

小程序面试总结

简单描述下微信小程序的相关文件类型 微信小程序主要涉及以下几种文件类型&#xff1a; JSON 文件&#xff08;.json&#xff09;&#xff1a; 用于描述小程序的配置信息&#xff0c;比如全局配置、页面路径、窗口样式等。WXML 文件&#xff08;.wxml&#xff09;&#xff1a…

MySQL的事务以及springboot中如何使用事务

事务的四大特性&#xff1a; 概念&#xff1a; 事务 是一组操作的集合&#xff0c;它是不可分割的工作单元。事务会把所有操作作为一个整体&#xff0c;一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 注意&#xff1a; 默认MySQ…

sylar高性能服务器-配置(P10-p11)代码解析+调试分析

文章目录 p9&#xff1a;配置模块搭建一、ConfigvarBase二、ConfigVar三、Config四、小结 p10&#xff1a;YAML的使用一、安装yaml-cpp二、使用yaml-cpp三、代码解析 P11&#xff1a;YAML与日志的整合一、方法函数二、代码调试三、test_config结果四、小结 p9&#xff1a;配置模…

18、责任链模式(Chain of Responsibility Pattern)

责任链模式&#xff0c;是用于避免请求发送者与多个请求处理者耦合在一起&#xff0c;让所有请求的处理者持有下一个对象的引用&#xff0c;从而将请求串联成一条链&#xff0c;在有请求发生时&#xff0c;可将请求沿着这条链传递&#xff0c;直到遇到该对象的处理器。用户只需…

华为或荣耀手机禁止强制升级鸿蒙系统的终极方法

需要有数据传输的usb线.打开usb调试模式. 进这个链接下载华为ADB一键卸载VS重装软件 按里面的视频说明,输入88 然后回车即可 https://download.csdn.net/download/viqecel/12161462

throw 用作异常规范

throw 用作异常规范 throw 关键字除了可以用在函数体中抛出异常&#xff0c;还可以用在函数头和函数体之间&#xff0c;指明当前函数能够抛出的异常类型&#xff0c;这称为异常规范&#xff08;Exception specification&#xff09;&#xff0c;有些教程也称为异常指示符或异常…

SVN版本回退

文章目录 SVN版本回退 SVN版本回退 一、revert to this version和revert to this version的区别&#xff1a; 基于4674版本执行"revert to this version"操作效果&#xff1a; 基于4674版本执行"revert changes from this version"操作效果&#xff1…

梯形速度规划算法原理及代码

梯形速度规划的原理&#xff1a;梯形速度规划算法 对应的代码如下&#xff1a; #pragma once #include <cmath> #include <iostream> #include <vector> struct SpeedPoint {SpeedPoint() {s 0;speed 0;t 0;}double s; // mdouble speed; // m/sdo…

推荐开源项目-网络应用协议框架Socket.D

基于事件和语义消息流的网络应用协议 Socket.D 0 代码仓库地址1 该开源项目特点2 项目结构3 核心理念-协议帧Frame4 结束语 0 代码仓库地址 https://gitee.com/noear/socketd 1 该开源项目特点 代码风格优雅文档说明齐全测试用例非常人性化上手快&#xff0c;代码用例很多代…