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

news2024/11/28 2:53:32

之前 我们讲了 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
在这里插入图片描述
然后 我们打开预览界面
在这里插入图片描述
点击按钮 即可完成跳转
在这里插入图片描述

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

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

相关文章

【Vulnhub 靶场】【hacksudo: ProximaCentauri】【简单 - 中等】【20210608】

1、环境介绍 靶场介绍:https://www.vulnhub.com/entry/hacksudo-proximacentauri,709/ 靶场下载:https://download.vulnhub.com/hacksudo/hacksudo-ProximaCentauri.zip 靶场难度:简单 - 中等 发布日期:2021年06月08日 文件大小&…

龙迅LT9721 MIPIDSI/CSI/HDMI桥接到TYPE-C/DP 支持高达4K30HZ的分辨率

Lontium LT9721 LT9721描述: Lontium LT9721是MIPI/HDMI到DP转换器,内部有C型替代模式开关和PD控制器。 对于MIPI DSI输入,LT9721具有一个单端口MIPI DSI接收器,具有1个时钟通道和4个数据通道,每个数据通道的最大运行频…

Linux基础指令详解(1)

操作系统的概念 百度百科 操作系统(英语:Operating System,缩写:OS)是一组主管并控制计算机操作、运用和运行硬件、软件资源和提供公共服务来组织用户交互的相互关联的系统软件程序。根据运行的环境,操作系…

【git】关于git二三事

文章目录 前言一、创建版本库1.通过命令 git init 把这个目录变成git可以管理的仓库2.将修改的内容添加到版本库2.1 git add .2.2 git commit -m "Xxxx"2.3 git status 2.4 git diff readme.txt3.版本回退3.1 git log3.2 git reset --hard HEAD^ 二、理解工作区与暂存…

西南科技大学C++程序设计实验十(函数模板与类模板)

一、实验目的 1. 掌握函数模板与类模板; 2. 掌握数组类、链表类等线性群体数据类型定义与使用; 二、实验任务 1. 分析完善以下程序,理解模板类的使用: (1)补充类模板声明语句。 (2)创建不同类型的类对象,使用时明确其数据类型? _template<typename T>__…

使用linux CentOS本地部署SQL Server数据库

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 安装sql server二. 局域网测试连接三. 安装cpolar内网穿透四. 将sqlserver映射…

Grafana系列-Loki-基于日志实现告警

系列文章 Loki 系列文章 前言 实际应用中除了基于 Metrics 告警, 往往还有基于日志的告警需求, 可以作为基于 Metrics 告警之外的一个补充. 典型如基于 NGINX 日志的错误率告警.本文将介绍如何基于 Loki 实现基于日志的告警. 本文我们基于以下 2 类实际场景进行实战演练: …

零基础一看就会?Python实现性能自动化测试竟然如此简单

一、思考❓❔ 1.什么是性能自动化测试? 性能 系统负载能力超负荷运行下的稳定性系统瓶颈自动化测试 使用程序代替手工提升测试效率性能自动化 使用代码模拟大批量用户让用户并发请求多页面多用户并发请求采集参数&#xff0c;统计系统负载能力生成报告 2.Python中的性能自动化…

汽车网络安全--关于UN R155认证的思考

1.UN R155概述 2020年6月25日,联合国颁布了全球首个汽车网络安全强制性法规 -- UN 155,详细规定了关于评估网络安全措施的审核条款、制造商和供应商降低网络安全风险的方法以及实施风险评估的义务等。 法规适用于与信息安全相关的M类(4轮及以上载客汽车)、N类(四轮载货汽车)…

上班必备——项目部署环境

大家都知道&#xff0c;互联网行业有很多的岗位&#xff0c;前端&#xff0c;后端&#xff0c;产品&#xff0c;测试&#xff0c;ui等。 ui&#xff0c;产品和测试的同事在前端开发的过程中&#xff0c;都会时刻关注着进度&#xff0c;是要看页面效果的&#xff0c;这个时候怎…

16ASM 分段和机器码

8086CPU存储分段管理 问题1&#xff1a;8086是16位cpu&#xff0c;最多可访问&#xff08;寻址&#xff09;多大内存&#xff1f; 运算器一次最多处理16位的数据。地址寄存器的最大宽度为16位。访问的最大内存为&#xff1a;216 64K 即 0000 - FFFF。 问题2&#xff1a;808…

【Python】手把手教你用tkinter设计图书管理登录UI界面(三)

上一篇&#xff1a;【Python】手把手教你用tkinter设计图书管理登录UI界面&#xff08;二&#xff09;-CSDN博客 下一篇&#xff1a; 紧接上一篇文章&#xff0c;继续完善项目功能&#xff1a;用户登录。由于老王的注册部分有亿点点复杂&#xff0c;还没完成&#xff0c;但是…

泽攸科技桌面型扫描电子显微镜(SEM)技术解析

台式扫描电子显微镜是一种利用电子束扫描样品表面并检测样品反射或发射的电子信号&#xff0c;从而获得样品表面形貌、结构和成分信息的仪器。它的工作原理是由电子枪发出的电子束经过栅极静电聚焦后成为直径50微米的点光源&#xff0c;然后在加速电压作用下&#xff0c;经两三…

JAVA实操经验

零&#xff1a; 按照需要&#xff0c;可以使用需要某个类下&#xff08;主要是java提供的&#xff09;的方法来实现某个功能。&#xff08;主要是用在不同类下的方法会进行重写功能不同&#xff09; 方法和构造方法不同&#xff1a;方法是方法&#xff0c;构造方法是构造器&a…

[算法每日一练]-双指针 (保姆级教程篇 1) #A-B数对 #求和 #元音字母 #最短连续子数组 #无重复字符的最长子串 #最小子串覆盖 #方块桶

目录 A-B数对 解法一&#xff1a;双指针 解法二&#xff1a;STL二分查找 解法三&#xff1a;map 求和 元音字母 最短连续子数组 无重复字符的最长子串 最小子串覆盖 方块桶 双指针特点&#xff1a;双指针绝不回头 A-B数对 解法一&#xff1a;双指针 先把数列排列成…

GDPU 数据结构 课后作业(持续更新……)

文章目录 第 1 章第 2 章&#x1f437; 作业1&#x1f437; 作业2 第 3 章&#x1f437; 作业1&#x1f437; 作业2 第 4 章第 5、6 章二叉树&#x1f437; 作业1 第 7 章 哈夫曼树第 8 章 图&#x1f437; 图 1&#x1f437; 图 2&#x1f437; 图 3 第9 章 排序 第 1 章 第 2…

STM32F103

提示&#xff1a;来源正点原子&#xff0c;参考STM32F103 战舰开发指南V1.3PDF资料 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 开发环境硬件普中科技&#xff0c;接…

javaSwing酒店管理系统

一、 使用方法&#xff1a; 在使用前&#xff0c;需要到druid.properties 配置文件中&#xff0c;修改自己对应于自己数据库的属性&#xff1b;如用户名&#xff0c;密码等 driverClassNamecom.mysql.cj.jdbc.Driver urljdbc:mysql:///hotel?useUnicodetrue&characterEn…

【C++】:AVL树

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关多态的知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数据结…

C语言 内联函数 + 递归函数

函数分类 内联函数 1&#xff09;内联函数在编译时将函数的代码直接插入到调用它的地方&#xff0c;而不是通过函数调用的方式执行&#xff0c;从而减少了函数调用的开销&#xff0c;提高了代码的执行速度 2&#xff09;使用 inline 关键字来声明 3&#xff09;将函数声明为内联…