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() 就可以了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/232535.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Docker Volume(存储卷)——7

目录&#xff1a; 什么是存储卷?生活案例为什么需要存储卷?存储卷分类管理卷 Volume 创建卷 方式一&#xff1a; Volume 命令操作方式二&#xff1a; -v 或者--mount 指定方式三&#xff1a; Dockerfile 匿名卷操作案例 Docker 命令创建管理卷Docker -v 创建管理卷Docker mo…

Conda 搭建简单的机器学习 Python 环境

文章目录 Conda 概述Conda 常用命令Conda 自身管理查看 Conda 版本更新 Conda清理索引缓存添加镜像源设置搜索时显示通道地址查看镜像源删除镜像源 环境管理创建虚拟环境删除虚拟环境查看所有虚拟环境复制虚拟环境激活虚拟环境关闭虚拟环境导入、导出环境 包管理虚拟环境下安装…

springboot框架的客制化键盘个性化商城网站

客制化键盘网站是从客制化键盘的各部分统计和分析&#xff0c;在过程中会产生大量的、各种各样的数据。本文以客制化键盘管理为目标&#xff0c;采用B/S模式&#xff0c;以Java为开发语言&#xff0c;Jsp为开发技术、idea Eclipse为开发工具&#xff0c;MySQL为数据管理平台&am…

外网访问内网服务器使用教程

如何在任何地方都能访问自己家里的笔记本上的应用&#xff1f;如何让局域网的服务器可以被任何地方访问到&#xff1f;有很多类似的需求&#xff0c;我们可以统一用一个解决方案&#xff1a;内网穿透。内网穿透的工具及方式有很多&#xff0c;如Ngrok、Ssh、autossh、Natapp、F…

接触huggingface

接触huggingface finetuning llama 按照https://github.com/samlhuillier/code-llama-fine-tune-notebook/tree/main中的教程一步一步了解。 pip install !pip install githttps://github.com/huggingface/transformers.gitmain bitsandbytes # we need latest transforme…

react Hooks(useEffect)实现原理 - 简单理解

useEffect 语法&#xff1a; useEffect(setup, dependencies?) 含义: useEffect 是一个 React Hook&#xff0c;它允许你 将组件与外部系统同步。 useEffect 源码简单理解 一、mountEffect 和 upadateEffect useEffect 与其它 hooks 一样分为 mountEffect 和 upadateEffec…

iOS——定位与地图

平时在写项目的时候可能会遇到需要使用定位服务的地方&#xff0c;比如说获取位置和导航等。因此这里我会使用OC自带的库以及苹果系统的地图来获取定位以及显示在地图上。 开始前的设置 在获取定位前&#xff0c;需要在项目文件的info中添加两个关键字&#xff0c;用于向用户…

SpringBoot AOP切面实现对自定义注解的属性动态修改

文章目录 需求问题解决方案示例代码 需求 项目中共用了一个redis&#xff0c;而项目中部分代码使用了JetCache的Cached注解。所以需要给Cached动态配置area属性值&#xff0c;用来区分dev和test环境。 问题 自定义注解的属性值需要常量值&#xff0c;即static final修饰&…

2013年全国硕士研究生入学统一考试管理类专业学位联考数学试题——解析版

文章目录 2013 级考研管理类联考数学真题一、问题求解&#xff08;本大题共 15 小题&#xff0c;每小题 3 分&#xff0c;共 45 分&#xff09;下列每题给出 5 个选项中&#xff0c;只有一个是符合要求的&#xff0c;请在答题卡上将所选择的字母涂黑。真题&#xff08;2013-01&…

【Amis Low Code 结合FastAPI进行前端框架开发】

官方文档 封装思想 直接复制官网json数据即可开发每个json中的接口由fastapi 转发&#xff08;透传&#xff09;使其开发模式与前端思维一致 基础组件 from amis import Page, Service, App from pydantic import BaseModel, Field from fastapi import FastAPI, Request, …

【计算机网络】TCP|IP协议

目录 前言 什么是TCP/IP协议&#xff1f; TCP/IP协议的层次结构 TCP/IP协议的工作原理 TCP/IP协议的重要性 结语 前言 TCP/IP协议是当今互联网世界中最重要的网络协议之一&#xff0c;它是网络通信的基石&#xff0c;为数据在网络中的传输提供了可靠性和有效性。本文将深…

将RK3399的挖掘机开发板在Android10下设置系统默认为24小时制

将RK3399的挖掘机开发板在Android10下设置系统默认为24小时制 2023/12/9 22:07 应该也可以适用于RK3399的Android12系统 --- a/frameworks/base/packages/SettingsProvider/res/values/defaults.xml b/frameworks/base/packages/SettingsProvider/res/values/defaults.xml -2…

Java王者荣耀火柴人

主要功能 键盘W,A,S,D键&#xff1a;控制玩家上下左右移动。按钮一&#xff1a;控制英雄发射一个矩形攻击红方小兵。按钮控制英雄发射魅惑技能&#xff0c;伤害小兵并让小兵停止移动。技能三&#xff1a;攻击多个敌人并让小兵停止移动。普攻&#xff1a;对小兵造成基础伤害。小…

go自带rpc框架生产环境使用demo

基础使用 序列化使用自带gob协议 server package mainimport ("net""net/rpc" )// 定义一个handler结构体 type HelloService struct { }// 定义handler方法,大小写&#xff0c;参数&#xff0c;返回值都是固定的&#xff0c;否则无法注册 func (receiv…

Axure网页端高交互组件库, 下拉菜单文件上传穿梭框日期城市选择器

作品说明 组件数量&#xff1a;共 11 套 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;web端原型设计、桌面端原型设计 作品特色 本作品为「web端组件库」&#xff0c;高保真高交互 (带仿真功能效果)&#xff1b;运用了动态面板、中继…

【智能家居】八、监控摄像采集、人脸识别比对进行开门功能点

一、使用 fswebcam 测试 USB 摄像头 二、根据demo来实现功能点 三、功能点编写编译运行实现 一、使用 fswebcam 测试 USB 摄像头 a. 安装 fswebcam orangepiorangepi:~$ sudo apt update orangepiorangepi:~$ sudo apt-get install -y fswebcamb. 安装完 fswebcam 后可以使用…

【探索Linux】—— 强大的命令行工具 P.21(多线程 | 线程同步 | 条件变量 | 线程安全)

阅读导航 引言一、线程同步1. 竞态条件的概念2. 线程同步的概念 二、条件变量1. 条件变量函数⭕使用前提&#xff08;1&#xff09;初始化条件变量&#xff08;2&#xff09;等待条件满足&#xff08;3&#xff09;唤醒等待pthread_cond_broadcast()pthread_cond_signal() &…

golang学习笔记——sync.Pool

文章目录 sync.Pool示例sync.Pool数据结构TCP连接池总结参考资料 sync.Pool示例 代码 sync.Pool对外提供的New、Get和Put方法。 var buffers sync.Pool{New: func() interface{} { return new(bytes.Buffer)}, }func GetBuffer() *bytes.Buffer {return buffers.Get().(*byt…

附录C 流水线:基础与中级概念

1. 引言 1.1 什么是流水线&#xff1f; 流水线爱是一种将多条指令重叠执行的实现技术&#xff0c;它利用了一条指令所需的多个操作之间的并行性。&#xff08;指令操作的非原子性和指令类型的多样性&#xff09; 在计算流水线中&#xff0c;每个步骤完成指令的一部分&#x…

UML概扩知识点

UML是一个重要的知识点&#xff0c;考察的频度也很高。我们需要了解的是UML的一系列的图&#xff0c;红框里的是最核心的。 其次是对各种关系有了解&#xff08;红框里的&#xff1a; 依赖关系&#xff0c;关联关系&#xff0c;泛化关系&#xff0c;实现关系&#xff09; UM…