转鸿蒙开发看这篇文章就够了【需要有web前端基础】

于 2024-09-11 16:04:41 发布
阅读量450 收藏 6
点赞数 4
分类专栏： #鸿蒙 #鸿蒙应用开发 harmonyOS开发 文章标签： 前端 学习鸿蒙 鸿蒙开发基础知识 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43617604/article/details/142141580
版权

文章目录

鸿蒙开发文档

鸿蒙应用开发导读快速入门

鸿蒙开发应用配置文档

一、css及资源引入

1. image 如何加载图片资源

**支持 资源 和 资源**
在这里插入图片描述

2. 文本溢出省略号…

注意需要配合 .maxlines（X）使用
在这里插入图片描述

3.input输入框与button

在这里插入图片描述
代码效果

如何调整组件之间的距离? 给外层容器组件加{ space:数字}
在这里插入图片描述

**加粗样式**

4.Column自带居中能力只需要添加宽度100%即可实现居中

在这里插入图片描述

5.svg图标资源介绍

在这里插入图片描述
在这里插入图片描述
通过fillColor（颜色）修改图标颜色代码示例如下，
在这里插入图片描述

6.border 边框设置

在这里插入图片描述

7.设置组件圆角

在这里插入图片描述

8.特殊形状的圆角设置

在这里插入图片描述

9.背景属性

在这里插入图片描述
在这里插入图片描述
示例：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

二、页面布局

1.row组件两端对齐

在这里插入图片描述
demo在这里插入图片描述

2.交叉轴对齐方式

在这里插入图片描述
demo
在这里插入图片描述

3.列表项布局 左右布局

在这里插入图片描述
demo
在这里插入图片描述

4.自适应伸缩布局

在这里插入图片描述
demo
在这里插入图片描述

5. flex弹性布局

在这里插入图片描述
换行布局
在这里插入图片描述
demo
在这里插入图片描述
案例
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

三、层叠布局（弹窗等。。。）

1.层叠布局 Stack容器

1.层叠布局 Stack 容器内的子元素的顺序为Item1->Item2->Item3 越往后层级越高，当然zIndex（）也是可以修改层级的
在这里插入图片描述
demo
在这里插入图片描述

在这里插入图片描述
code
在这里插入图片描述

上难度 支付宝demo
在这里插入图片描述
案例底部布局解析
在这里插入图片描述

上代码

底部布局 ：利用layoutWeight（1） 等份  将来需要增加或者删除模块 也不会影响布局 
利用`alignContent:Alignment.Bottom`底部对齐
@Entry
@Component
struct Index {
  build() {
        Stack({alignContent:Alignment.Bottom}){

          Stack({alignContent:Alignment.Top}){
            // 头部菜单
            Row() {
              // 左边
              Column() {
                Text('北京').fontSize(18).fontColor('#fff')
                Text('晴 2°C').fontSize(12).fontColor('#fff')
              }
              //中间
              Row(){
                TextInput({placeholder:'支付宝搜索'}).layoutWeight(1).backgroundColor('#fff')

                Text('搜索')
                  .width(60)
                  .fontColor('blue')
                  .fontSize(14)
                  .textAlign(TextAlign.Center)
                  .border({
                   width:{left:1}
                  })

              }
              .backgroundColor('#fff')
              .layoutWeight(1)
              .height('auto')
              .borderRadius(20)

              // 右边
              Column() {
                Text('+')
                  .width(30)
                  .height(30)
                  .fontSize(18)
                  .fontColor('#fff')
                  .border({width:1})
                  .borderColor('#fff')
                  .borderRadius('50')
                  .textAlign(TextAlign.Center)
              }

            }
            .height(60)
            .width('100%')
            .zIndex(2)
            .padding(10)
            .backgroundColor('#5b73de')

            //主体内容
            Scroll(){
              Column(){
                //Top快捷键盘
                Row(){
                  Column(){
                    Image($r('app.media.sys_icon')).width(35)
                    Text('扫一扫').fontColor('#fff')
                  }.layoutWeight(1)

                  Column(){
                    Image($r('app.media.sfk_icon')).width(35)
                    Text('收付款').fontColor('#fff')
                  }.layoutWeight(1)
                  Column(){
                    Image($r('app.media.cx_icon')).width(35)
                    Text('出行').fontColor('#fff')
                  }.layoutWeight(1)
                  Column(){
                    Image($r('app.media.kb_icon')).width(35)
                    Text('卡包').fontColor('#fff')
                  }.layoutWeight(1)

                }
                .width('100%')
                .height(80)
                .backgroundColor('#5b73de')




                Text('6666').height(300)
                Text('6666').height(300)
                Text('6666').height(300)
                Text('6666').height(300)
                Text('6666').height(300)
                Text('6666').height(300)
                Text('6666').height(300)
                Text('6666').height(300)
                Text('6666').height(300)
                Text('6666').height(300)
                Text('6666').height(300)

              }
            }.width('100%')
            .padding({top:60})


          }
          .width('100%')
          .height('100%')


          //底部菜单
          Row(){
            Column(){
              Image($r('app.media.zfb_icon')).width(35)
            }.layoutWeight(1)
            Column(){
              Image($r('app.media.lc_icon')).width(35)
              Text('理财')
            }.layoutWeight(1)

            Column(){
              Image($r('app.media.life_icon')).width(35)
              Text('生活')
            }.layoutWeight(1)
            Column(){
              Image($r('app.media.msg_icon')).width(35)
              Text('消息')
            }.layoutWeight(1)
            Column(){
              Image($r('app.media.my_icon')).width(35)
              Text('我的')
            }.layoutWeight(1)

          }
          .width('100%')
          .height(60)
          .backgroundColor('#fbfcfe')
        }
        .width('100%')
        .height('100%')
        .backgroundColor('#ccc')
  }
}

四、其他

1.类型转换

在这里插入图片描述

2.交互点击事件

在这里插入图片描述

3.状态管理在这里插入图片描述

4.forEch渲染和右上角图标

在这里插入图片描述
在这里插入图片描述
测试案例 Stack 层叠布局一个生肖卡
在这里插入图片描述

5. 动画展示图片

在这里插入图片描述

6. Swiper 轮播组件的基本使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7. 图片等比显示 aspectRatio（）

在这里插入图片描述

8. Scroll 组件配置及使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
测试案例：
在这里插入图片描述

9. tabBar的使用 （默认自带左右切换效果）

在这里插入图片描述
在这里插入图片描述

barMode属性，可以实现滚动导航栏

在这里插入图片描述
在这里插入图片描述
Tabs高级写法 组件结构复用
在这里插入图片描述

五、路由

1. 鸿蒙路由配置

在页面中导入路由这两种都可以
在这里插入图片描述

2.路由-页面跳转与后退

在这里插入图片描述
首先支持路由跳转的页面创建方式
第一种手动创建页面的需要手动添加 路径 如下图
在这里插入图片描述
第二种方式自动创建页面
在这里插入图片描述

3. 获取页面的栈层router.getLength()

比如 A跳转到B 再跳转到C ，在C页面调用router.getLength()值为3

在这里插入图片描述### 4.路由的两种模式 Standard Single
在这里插入图片描述
在这里插入图片描述

5. 路由传参

在这里插入图片描述
在接收页数据demo
在这里插入图片描述

七、应用配置信息（桌面图标等）

1. 鸿蒙开发配置文件–目录概览

在这里插入图片描述

2. 应用管理–应用信息设置

在这里插入图片描述

3. 手机桌面–应用信息

在这里插入图片描述

八、Stage模型UIAbility组件【单任务列表/多任务列表】

1. 什么是多线程

比如你在微信中聊天 突然打开一个小程序 然后查看手机进程 如果一个软件有多个那就是多进程 （目前小编看下来 只有安卓有 苹果看不出来）
进程之间是可以相互跳转的在这里插入图片描述

2. UIAbility组件可以是单个任务列表或多个任务列表

在这里插入图片描述
在这里插入图片描述

3. 启动页想用哪个就设置哪个，但启动时只能有一个主页面

在这里插入图片描述

在这里插入图片描述

4.鸿蒙开发日志管理–hislog.info()


在这里插入图片描述

5. 如何启用多线程呢

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

更多鸿蒙技能知识与案例 我已经整理到下面了 ↓↓↓ 需要的可以去看看…

在这里插入图片描述

前端成长营
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
鸿蒙HarmonyOS兼容JS的类Web开发-开发指导
特创数字
01-11 958
设置scale样式属性实现涟漪动画，先使用定位确定元素的位置，确定坐标后创建多个组件实现重合效果，再设置opacity属性改变组件不透明度实现组件隐藏与显示，同时设置scale值使组件可以一边放大一边隐藏，最后设置两个组件不同的动画执行时间，实现扩散的效果。通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。
OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解
一键难忘的博客
10-02 1694
JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言，页面业务逻辑则支持ECMAScript规范的JavaScript语言。5.写一些公共样式，我们到MainAbilty里新建一个common文件夹，然后在下面新建一个css文件夹，作用于存放我们的公共样式。主要运用了web三件套：Html，Css，JavaScript。因为我们需要美化的属于组件，我们直接可以到myinput.css对其进行样式美化。然后在我们的主要的css文件内引用我们的公共样式。
鸿蒙开发核心知识点，看这篇文章就够了，高级前端开发面试题
2401_84150320的博客
04-19 968
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）一个人可以走的很快，但一群人才能走的更远！
鸿蒙开发核心知识点，看这篇文章就够了_鸿蒙开发核心基础
2401_84150320的博客
04-19 950
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）一个人可以走的很快，但一群人才能走的更远！
鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
shudaoshanQAQ的博客
03-14 1万+
鸿蒙项目实战全家桶
鸿蒙开发核心知识点，看这篇文章就够了_鸿蒙开发核心基础(1)
2401_84164546的博客
04-21 704
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！那么很难做到真正的技术提升。**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）
HarmonyOS从基础到实战-高性能华为在线答题元服务
热门推荐
一键难忘的博客
11-21 12万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
100天精通鸿蒙从入门到跳槽——第0天：Web/安卓开发者的鸿蒙之旅
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
01-16 7万+
随着智能设备行业的迅猛发展，现在正是把握`HarmonyOS`未来趋势，开拓新技术和新机遇的最佳时机。不论您是对`HarmonyOS`充满兴趣的Web开发者，还是希望拓宽技能范围的安卓开发者，这个专栏都是您的不二之选择。通过本专栏的精心设计的100天学习计划，您将不仅理解`HarmonyOS`的基础知识，而且掌握将其应用于实际项目的技能。我们承诺在金三银四之前更新完毕，确保提供连贯、系统的学习体验。深入探索`HarmonyOS`，开拓您的技术视野，共同迎接智能互联网的新时代！
高分通过HarmonyOS基础认证-必学HarmonyOS第一课_附题库答案【官网课程提炼关键知识点-精炼】
一键难忘的博客
12-17 5964
运行Hello WorldHarmonyOS 3.1及以上本课程是基于HarmonyOS 3.1及以上版本的新技术和特性所推出的系列化课程，每个课程单元里面都包含视频、Codelab、文章和习题，帮助您快速掌握HarmonyOS的应用开发；通过本章节的学习，您可以安装DevEco Studio开发工具，运行第一个应用。介绍了HarmonyOS课程，旨在帮助开发者快速掌握HarmonyOS应用开发。
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 552
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 754
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
使用Selenium WebDriver来检测网页上的坏链接
C'mon的博客
09-07 620
坏链接是指那些不可达的链接或URL，它们可能是由于某些服务器错误而导致无法访问。一个URL通常会有一个有效的状态码2xx。对于无效的请求，HTTP状态码是4xx（客户端错误）或5xx（服务器端错误）。我们通常需要点击链接来确认它是否工作，否则很难确定。
el-popover弹框自定义位置
weixin_47218354的博客
09-05 381
【代码】el-popover弹框自定义位置。
前端文件预览，PDF，word，TXT
致未来的你。的博客
09-06 530
前端文件预览，PDF，word，TXT
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
最新发布
翎风世界
09-10 435
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1044
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
前端技术演进与未来发展趋势探究
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
09-07 1967
本文深入探讨了前端领域的发展历程、主要技术及未来趋势。从前端技术的起源与早期发展，到动态页面的崛起，再到如今各种先进技术的涌现，我们见证了前端技术的不断演进。在发展历程方面，前端从最初的静态网页逐渐发展为复杂的动态交互界面。早期浏览器的竞争推动了技术的进步，而随着互联网的发展，后端框架的出现解决了后台代码庞大臃肿的问题。前端技术也从“网页三剑客”演变为新的“三剑客”，即 HTML、CSS 和 JavaScript，同时各种前端框架不断涌现，大大提高了开发效率和质量。
Vue响应式进阶常用API学习
weixin_44072254的博客
09-06 861
reactive()的浅层浅层响应式，和reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。readonly()的浅层作用形式,只有根级别是只读不可更改的，根级别以下的可更改，只是视图不会更新，但值改变了。shallowRef是浅层引用,只会跟踪原始对象的引用,不会跟踪原始对象的属性。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。的副作用，这通常在对浅引用的内部值进行深度变更后使用。代理对象，并返回该代理对象对应的原始对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端成长营

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

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

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

打赏作者

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

抵扣说明：

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

余额充值