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

猜你喜欢

转载自blog.csdn.net/weixin_45966674/article/details/134914531