harmonyOS创建低的代码开发模式项目 带你基本不写代码完成一个界面跳转的小案例

本文主要是介绍harmonyOS创建低的代码开发模式项目 带你基本不写代码完成一个界面跳转的小案例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

之前 我们讲了 JavaScript类Web开发模式和ArkTS开发模式
但是 有人就会说 我一点代码基础都没有 难道就不能开发鸿蒙了吗?
其实也是可以的 本文来讲述一下低代码开发模式

我们先打开编辑器 先创建一个项目
在这里插入图片描述
默认模板 直接下一步
在这里插入图片描述
这里配置中 我们输入名称 然后选择路径 Enable Super Visual 一定要打开 它就是低代码的开发模式
然后点击 Finish 创建项目
在这里插入图片描述
项目窗口弹出后 就会发现一个美好的世界
在这里插入图片描述 比如 我们想将中间的文本改变 点击下图指向出 切换成文本模式
在这里插入图片描述
在下面的文本框中输入自己想要的文本内容即可
在这里插入图片描述
比如我们想要一个 button按钮 我们直接从左侧工具栏中拖一个 button进界面
在这里插入图片描述
我们的按钮就出来了
在这里插入图片描述
然后 我们如下图 设置按钮中的文本
在这里插入图片描述
然后如下图 我们还可以调整它的字体大小 宽高度等等
在这里插入图片描述
各个样式没时间一一介绍了 大家可以自己取查一下

除了右侧属性栏 我们还可以通过拖拽它四周这些箭头 将它拉大 这和ps有点像了 很有趣
在这里插入图片描述
然后 我们在左侧 pages 目录右键 new一个page出来
在这里插入图片描述
这里 我们直接叫 Twox
在这里插入图片描述
创建好 他就出来了
在这里插入图片描述
那么 我们这里 就需要执行一个逻辑 进行页面跳转 但是事件显然拖拽不了
我们 需要在左侧 ets下的 pages下的 对应page js中 编写逻辑
在这里插入图片描述
我们可以进入如下图目录 找到路由配置文件 查看所有的路由 并复制自己最想要的一个
在这里插入图片描述
然后 我们在index 第一个界面的js中 编写代码如下

import router from '@ohos.router'
@Entry
@Component
struct Index {@State message: string = '你好世界'/*** In low-code mode, do not add anything to the build function, as it will be* overwritten by the content generated by the .visual file in the build phase.*/build() {}twoXe() {router.pushUrl({url:"pages/Twox"})}
}

在这里插入图片描述
我们还是先引入了 router 然后调用它下面的 pushUrl 跳转向Twox page
就是我们定义的第二个路由组件

然后 我们如下图 选择事件模块 然后 我们要的肯定是 click 点击后 他会自动提示你有哪些函数
在这里插入图片描述
然后 我们选择这个自己写的twoXe
在这里插入图片描述
然后 我们打开预览界面
在这里插入图片描述
点击按钮 即可完成跳转
在这里插入图片描述

这篇关于harmonyOS创建低的代码开发模式项目 带你基本不写代码完成一个界面跳转的小案例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/479462

相关文章

Window Server创建2台服务器的故障转移群集的图文教程

《WindowServer创建2台服务器的故障转移群集的图文教程》本文主要介绍了在WindowsServer系统上创建一个包含两台成员服务器的故障转移群集,文中通过图文示例介绍的非常详细,对大家的... 目录一、 准备条件二、在ServerB安装故障转移群集三、在ServerC安装故障转移群集,操作与Ser

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck

Window Server2016 AD域的创建的方法步骤

《WindowServer2016AD域的创建的方法步骤》本文主要介绍了WindowServer2016AD域的创建的方法步骤,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、准备条件二、在ServerA服务器中常见AD域管理器:三、创建AD域,域地址为“test.ly”

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”,帮你按时关掉电脑,而且全程不需要你多做

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1,PDF转Word2,PDF转Excel三、前端页面效果展示总结一

在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中,<trim>元素用于动态地添加SQL语句的一部分,例如SET或W

使用Python进行文件读写操作的基本方法

《使用Python进行文件读写操作的基本方法》今天的内容来介绍Python中进行文件读写操作的方法,这在学习Python时是必不可少的技术点,希望可以帮助到正在学习python的小伙伴,以下是Pyth... 目录一、文件读取:二、文件写入:三、文件追加:四、文件读写的二进制模式:五、使用 json 模块读写

使用C#代码计算数学表达式实例

《使用C#代码计算数学表达式实例》这段文字主要讲述了如何使用C#语言来计算数学表达式,该程序通过使用Dictionary保存变量,定义了运算符优先级,并实现了EvaluateExpression方法来... 目录C#代码计算数学表达式该方法很长,因此我将分段描述下面的代码片段显示了下一步以下代码显示该方法如

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j

Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

《Python中requests与aiohttp在实际项目中的选择策略详解》本文主要介绍了Python爬虫开发中常用的两个库requests和aiohttp的使用方法及其区别,通过实际项目案... 目录一、requests 库二、aiohttp 库三、requests 和 aiohttp 的比较四、requ