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"})}
}