开启鸿蒙HarmonyOS之旅(三:渲染控制、路由)

前言

在之前我们已经完成了ArcTS的基础语法的学习,也学习了组件通信

这节我们介绍剩余的较为常用的基础知识,然后下一节直接上项目

需要说的是,我本身用vue很多,也很喜欢它,所以很多知识点我会向vue那里去靠,方便理解

所以希望大家不要介意

好的,我们开始吧~

渲染控制

条件渲染

简单来说,就是动态控制组件的显示与隐藏,类似于vue中的v-if

但是这里写法就是用if、else、else if看起来更像是原生的感觉

效果

循环渲染

我们实际开发中,数据一般是后端返回来的对象格式,对此我们需要进行遍历,或者我们写大量死数据的时候,也不会在组件中去写大量数据,而是通过在外面定义数据,组件內直接遍历即可

这里我们没有写后端,就模拟一下常规的数据

ts 复制代码
@Entry
@Component
struct Father {
  @State data: string[] = ['A','B','C','D']

  build() {
    Row() {
      Column() {
        ForEach(this.data,(i)=>{
          Row(){
            Text(i).fontSize(30)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

我定义了一个数据data,然后通过ForEach这个函数进行遍历

效果就是这样的

我们简单介绍一下ForEach中需要的参数

这是官方的解释,我们翻译一下

第一个参数:是你想要遍历的数据,是必填的

第二个参数:是你遍历后的内容

第三个参数:类似于vue中v-for的key,是一个唯一的值,这样是不是懂了,同时这个参数是选填的

这是官方的概念,就是我说的意思。如果你懂虚拟DOM的话,那么可能更好理解一些

我们改变一下数据,使其更贴近项目中的数据

数据的id主键是后端自动生成的,是唯一的,所以这个类似key值的值一般就是id,当然,具体的名字要看你的项目

效果和上面当然是一样的

关于 LazyForEach:数据懒加载,其实就是在数据量过大的时候,所有数据全部加载出来可能会造成页面卡顿,所以我们只加载一定范围內的(对于手机话,就是当前屏幕大小下的内容数据),这样可以避免不好的用户体验

用法和ForEach差不多,具体用到了咱们可以提一下

路由

到上面为止,基础的语法内容就结束了,然后我会说一下在开发中另外需要用到的基础知识

其中最常见的就是路由了,也可以说是页面之间的跳转

我们基本上就需要知道具体的函数,以及参数传递就可以了

官网提供了很多种跳转方式

  • 网站跳转:Web()
  • 组件跳转(页面):router.pushUrl()
  • 跨应用跳转:call.makeCall(),这是跳转到拨号

这里我们只讨论router.pushUrl()

那么携带参数呢

我们需要params来进行参数传递

然后在demo2页面中用getParams来进行参数接收

现在我们demo中通过params向demo2中传递了一个name为shaka的参数,然后demo2中用getParams接受了这个参数,并且将这个值赋值给了Text

结尾

基础部分到这里结束了,如果我想起来有那部分没说的,我会补充到这三篇基础的文章里

接下来我们将会进入到项目中,不会是一个复杂的项目,更像是一个带着大家练手的项目,可以应用一些知识

目前打算用官方的一个小项目给大家讲

因为这个例子不会涉及什么权限,比较简单,适合练手

当然,也不一定就会完全按照这个例子,但是大差不差吧

至于更复杂的app我打算写完后再与大家分享

需要说的是,如果你之前用过微信的云开发,或者是uni的全栈,那么你入手鸿蒙的云开发也很容易,基本上无缝衔接,看看有机会的话可以分享一下~

咱们项目中见吧~

相关推荐
美狐美颜sdk18 分钟前
直播APP开发中的视频帧处理:美颜SDK接入需要注意哪些细节?
大数据·前端·人工智能·音视频·美颜sdk
随风一样自由27 分钟前
【React+TS71007】Next.js “use client” 误用导致 TS71007:客户端/服务端引入问题的完整排查与修复
前端·javascript·react.js
计算机魔术师1 小时前
1.4万亿没人接,OpenAI自己把价砍了1500亿
前端
非凡ghost1 小时前
Photo Supreme:专业高效的照片收藏管理专家
服务器·前端·人工智能·电脑·软件需求
zhangminghuan1 小时前
前端动态路由实现方案(Vue3 + VueRouter4)|后台权限路由实战
前端
一切皆是因缘际会1 小时前
大模型应用
前端·人工智能
贾伟康1 小时前
【健康菜谱助手|03】HarmonyOS ArkTS 冰箱食材推荐实战:从本地食材选择生成可解释的候选菜谱
软件测试·移动开发·harmonyos·arkts·arkui·1024程序员节
SCandL1521 小时前
【无标题】
前端
你挚爱的强哥2 小时前
如何设置 Chrome 打开默认页面不要是360的主页https://hao.360.com/?src=lm&ls=n6205869099
前端·chrome·360首页劫持
总要学点什么2 小时前
第75篇:右键菜单控件——把一张会做事的菜单钉在鼠标落下的那点
前端·信息可视化·echarts·cesium·空间分析