鸿蒙原生应用/元服务开发-新手入门练习心得

news/2024/7/21 8:41:19 标签: HarmonyOS

1.先根据案例模仿代码(页面跳转案例)

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区


点击next后跳转页面,点击back返回第一个页面

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

2.模块化层层拆解代码

先创建了row,一行,在这一行里面写代码:

内容都放到Column中

Text内置组件可以直接引用文本

this.message可能是引用

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

fontSize 和fontWeight都是设置文字格式的,后退一格可读性比较好

接下来创建Button按钮,上面的Text是按钮上显示的文字,后面两个也是文字格式。

下面的type暂时不知道什么意思,但是Capsule是压缩的意思,可能相关

margin:CSS的外边距,用来设置周围距离,top20就是离上面一个元素20的距离。

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

Backgroundcolor:背景色

Width:宽度

Height:高度

接下来是一个点击事件用onClick

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

成功就跳转到这个url

如果报错,就进行catch里的代

3.分析之后按照理解的自己简单的写一个页面跳转

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

根据事实动态previewer功能成功写出了跳转的代码

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

回顾代码的时候发现了一个不一样的用法

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

这里跳转回来不用写url,只需要router.back

4.思维拓展

跳转只能创建button吗?我可以像写网页超链接一样作为属性放到文字上吗?立刻试试

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

显示报错‘string’类型的参数不能赋值给‘routeoptions’类型

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

通过论坛搜索等发现不符合情况,开始自己找原因,怀疑是不是因为路径和下面的跳转是一样的所以才报错。

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

鸿蒙原生应用/元服务开发-新手入门练习心得-鸿蒙开发者社区

Router.back可以,但是具体的url还是不行

本文由蛟龙腾飞合作开发者郝映萱练习整理


http://www.niftyadmin.cn/n/5249482.html

相关文章

功能点估算常见问题,AI时代下成本估算探索

CoCode学院:功能点估算常见问题 AI时代下成本估算探索 功能点估算常见问题,AI时代下成本估算探索 功能点估算常见问题 资深软件造价评估专家李培圣 直播内容 1、功能点估算概述 2、功能点估算的常见问题 3、现场答疑 直播时间 12月13日 (周三) 20&a…

数理逻辑在数据库底层原理方面的理论应用

数理逻辑是一门研究逻辑的基本概念、原理和规律的学科,它应用数学方法和技术来对逻辑进行形式化、符号化和系统化的描述。在数据库底层原理方面,数理逻辑可以被应用于优化查询语句、设计索引、优化查询计划等方面。 举一个例子,我们考虑一个…

ReactJs笔记摘录

前言 以前2018年搞过一段时间react antd开发&#xff0c;兜兜转转又回到react世界。 TODO中 Hook函数 JSX语法 根元素与斜杠 注意局部的jsx片段也要加根元素: return (<div>{items.map((item) > (// 此处只能有一个根元素!!!<>...<div className&quo…

嵌入式总线技术学习(文章链接汇总)

嵌入式总线技术学习&#xff08;一&#xff09;&#xff1a;概述 嵌入式总线技术学习&#xff08;二&#xff09;&#xff1a;Modbus 总线技术详解

UE Windows平台下Linux的交叉编译项目打包

UE Windows平台下Linux的交叉编译项目打包 交叉编译&#xff08;Cross-compilation&#xff09; 使得在以Windows为中心的工作流程中工作的游戏开发者能够以Linux为目标对项目进行打包。目前&#xff0c;只有Windows支持交叉编译。 交叉编译支持的平台 Windows | Linux-x86_…

前端学习--React(5)

一、useReducer 管理相对复杂的状态数据 定义一个reducer函数&#xff0c;根据action值的不同返回不同的状态 在组件中调用useReducer并传入reducer函数和状态的初始值 事件发生时&#xff0c;通过dispatch函数分派一个对象&#xff0c;即通知reducer具体返回哪个状态对应的操…

angular状态管理方案(ngrx)

完全基于redux的ngrx方案&#xff0c;我们看看在angular中如何实现。通过一个简单的计数器例子梳理下整个流程 一 安装 &#xff1a;npm i ngrx/store 这里特别要注意一点&#xff1a;安装 ngrx/store的时候会出现和angular版本不一致的问题 所以检查一下angular/core的版本…

UDP实现群聊

代码&#xff1a; import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.net.*; import java.io.IOException; import java.lang.String;public class liaotian extends JFrame{private static final int DEFAULT_PORT8899;private JLabel stateLB…