ArkUI框架,更懂程序员的UI信息语法

ArkUI框架,更懂程序员的信息语法

原文:ArkUI框架,更懂程序员的UI信息语法,点击链接查看更多技术内容。

ArkUI框架简化代码的“秘密”

在传统的开发过程中,总有个问题在困扰我:如何实现前端view与后端数据的同步更改?例如:在某个视频类app的页面,如果我想要实现视频的点击播放功能,需要怎么样进行呢?

如果我使用传统的命令式开发框架去实现,容易造成的麻烦在于,每次后端的数据发生更改,我都需要手动更新前端view。

为了解决这个问题,我便在ArkUI上实现了同样的功能,神奇的事情发生了,瞬间代码干净了很多,只用几行代码就实现了相同的功能。

于是我搜索了一下ArkUI有什么优势。发现很重要的一个原因:ArkUI使用了声明式UI开发框架,同时在UI描述上运用了可以和语言运行时深度结合的自研语言ArkTS。

声明式框架的“庐山真面目”

这里肯定会有小伙伴提出疑问:什么是声明式开发框架?在介绍之前,我们先了解一下传统的命令式开发框架思路,作为一个程序员,一旦我想要更改View,就需要先更改View对应的Data,然后再更改View的显示内容。

而声明式开发框架则不同,ArkUI的声明式框架框架更为高效,可以让data与前端view同步更新数据。

那ArkUI框架是如何实现同步更新的呢?这个原理非常简单,想象一下我现在要盖一栋大楼,我需要把项目先交给包工头,包工头再把具体的工作分配给工人工人依据图纸建造大楼,当图纸变动的时候,工人也需要按照图纸更改建造动作。

与此相对的,在ArkUI命令式框架内部,有两个重要的角色,代理和拦截器。

代理可以将目标数据进行代理,并为目标数据绑定到拦截器上。而拦截器监听目标数据的变化当数据更新时,拦截器就会重写数据的set方法,同时自动更新数据对应的前端页面,整个过程不需要程序员进行手动命令更新。

原子布局能力实现页面布局一致性

声明式开发框架成功解决了传统开发过程中,代码冗长的问题。但是在了解声明式开发框架的过程中,我不经想到一个问题:有没有方法,让我开发一次代码,就可以在多个设备上适配呢?

ArkUI就提供了这一功能,于是我动手试了一下。当设备尺寸变宽时,我可以通过原子布局的均分能力去实现页面布局的一致性,也可以通过栅格布局,去解决多尺寸多设备的动态布局问题。

刚刚提到的原子布局能力包含均分能力,折行能力,拉伸能力,缩放能力,延伸能力,占比能力和隐藏能力。可以帮助我们在不同设备上保持体验的一致性。这样自适应的问题解决了。

针对设备独有的特性,比如平板适配左侧导航栏,这个有什么方法实现呢?这里我找到了媒体查询,它可以判断设备类型,设计出相匹配的布局样式,同时还可以监听屏幕尺寸动态变化,比如横竖屏切换可以通过orientation属性判断屏幕横竖状态来动态适配,另外还支持判断分屏状态、折叠屏展开状态等,这样就解决了我一次开发多端部署的难题。

同时ArkUI框架为开发者提供了多态组件,同一控件在不同的设备上会呈现出不同的形态,所以开发者在使用多态组件时,无需考虑设备差异,只需关注功能实现即可。

常用组件

在这里我们总结了一下常用组件

常见的容器类组件有列表,弹出框。

展示类组件有文本,进度条,事件标记和气泡指示。

导航类组件有Tab页签

操作类组件有按钮,下拉选项,选择器,评分条,搜索框和菜单。

这样一来,我只需要选择合适的组件进行开发,就可以一次开发,多端部署。大大节省我的开发时间

总结

根据前文不难看出,ArkUI是一套用于构建HarmonyOS应用界面的UI开发框架。

我们总结一下它主要有以下三个特性:

  1. 极简的UI信息语法
  2. 支持多设备开发,一次开发多端部署
  3. 开箱即用的多态UI组件
     

从而帮助开发者提升HarmonyOS应用界面的开发效率。

关于ArkUI的介绍今天就到这里了,需想了解更多?

感兴趣的伙伴们可以点击链接ArkUI框架,更懂程序员的信息语法_哔哩哔哩_bilibili进行学习。

如果你喜欢这期的视频,欢迎在下方留言点赞分享,你的支持就是我们更新的最大动力,我们下期再见~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要使用Vue框架模仿黑马程序员官网,你可以按照以下步骤进行操作: 1. 创建Vue实例:首先,在HTML文件中引入Vue.js库,并创建一个Vue实例。在实例中,你可以定义数据、方法和计算属性等。 2. 绑定数据和视图:使用Vue的数据绑定语法,将数据和视图进行绑定。你可以在HTML中使用双花括号{{}}来显示数据,也可以使用v-bind指令来绑定属性。 3. 创建组件:根据官网的结构,将页面拆分为多个组件。每个组件都有自己的模板、数据和方法。你可以使用Vue的组件系统来创建和注册组件。 4. 路由配置:使用Vue Router来配置页面的路由。你可以定义不同的路由路径和对应的组件,以实现页面之间的切换。 5. 状态管理:使用Vuex来管理应用的状态。你可以在Vuex中定义状态、mutations和actions等,以实现数据的共享和管理。 6. 样式设计:根据官网的样式,使用CSS来设计页面的样式。你可以使用Vue的样式绑定语法,将样式与数据进行绑定。 7. 响应式交互:根据官网的交互效果,使用Vue的指令和事件处理机制,实现页面的响应式交互。你可以使用v-on指令来监听事件,也可以使用v-if和v-for等指令来控制元素的显示和循环。 8. 发布部署:最后,将你的代码打包并发布到服务器上,以实现在浏览器中访问你的模仿官网。 下面是一个简单的示例代码,演示了如何使用Vue框架模仿黑马程序员官网: ```html <!DOCTYPE html> <html> <head> <title>模仿黑马程序员官网</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <header> <h1>{{ title }}</h1> </header> <nav> <ul> <li v-for="item in menu" :key="item.id">{{ item.name }}</li> </ul> </nav> <main> <router-view></router-view> </main> <footer> <p>{{ copyright }}</p> </footer> </div> <script> // 创建Vue实例 const app = new Vue({ el: '#app', data: { title: '模仿黑马程序员官网', menu: [ { id: 1, name: '首页' }, { id: 2, name: '课程' }, { id: 3, name: '讲师' }, { id: 4, name: '社区' }, { id: 5, name: '关于我们' } ], copyright: '版权所有 © 2021 黑马程序员' } }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HarmonyOS开发者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值