自疫情过后,java和web前端都进入了冰河时代。年龄、薪资、学历都成了找工作路上躲不开的门槛。
年龄太大pass
薪资要高了pass
学历大专pass
好多好多pass
找工作的路上明明阳关普照,却有一种凄凄惨惨戚戚说不清道不明的“优雅”意境。
如何破局?
鸿蒙!
好了废话不多说,下面进入正题
先聊一聊怎么学习鸿蒙
一、不建议报班
目前有好多培训班,对有web开发经验的人来说,我个人不建议报班。
要花费大量的时间
花费一定的money,现在钱不好赚能省则省吧
那么我们如何开始学习鸿蒙呢?
二 、b站
现在b站里面黑马、千峰、尚硅谷已经出了多期基础视频,可以先看看这些视频,然后跟着老师把项目写一下,大概花两周的时间吧。
这样可以快速的了解什么是鸿蒙,鸿蒙做了哪些事情,为以后的自己独立学习奠定基础
三、鸿蒙官方api
harmonyos应用-harmonyos开发者-华为开发者联盟
或者
如果兄弟们时间紧张可以先看下面这几个模块,一般看完面试就够用了
项目结构
ui
如果ts薄弱可以看看这个
有框架的认知
有ts处理逻辑
有ui展示页面
这样一个app大概就全了,如果兄弟们还有精力,那肯定是api研究的越全面越好啦
面试
如果兄弟们这些都学完了,那么可以进行面试了:
需要注意的是面试分线下面试和线上面试
线下面试
如果是线下面试那兄弟们要注意了,可能要现场写代码,所以我建议先学完了我上面说的再去面试。如果写不出来白白浪费了一次机会。
不过线下写代码也不要担心,一般都是基础布局,在固定的时间内完成就行。
我先说一下我线下面试时需要注意的事项:
1. 如果大家习惯键盘和鼠标的话最好自己备上。
2. 面试官的需求文档一定要先看懂了,有全局的把控再开始写代码,不懂就问。
3. 得分点一定要清楚,而且都要实现
具体有哪些得分点,我给兄弟们举几个我在面试中遇到的
1. 用到组件化思想
2. 布局元素不能少,也就是和ui设计高度保真
3. 一些类型最好定义成枚举
4. 颜色变量定义到这里
5. http请求的封装
6. 列表尽量用lazyforeach提升性能
线上面试
我这里总结了一些:
1. module类型
分为ability类型和library类型
ability类型(重点知道什么是hap)
用于实现应用的功能和特性。每一个ability类型的module编译后,会生成一个以.hap为后缀的文件,我们称其为hap(harmony ability package)包。hap包可以独立安装和运行,是应用安装的基本单位,一个应用中可以包含一个或多个hap包,具体包含如下两种类型。
- entry类型的module:应用的主模块,包含应用的入口界面、入口图标和主功能特性,编译后生成entry类型的hap。每一个应用分发到同一类型的设备上的应用程序包,只能包含唯一一个entry类型的hap。
- feature类型的module:应用的动态特性模块,编译后生成feature类型的hap。一个应用中可以包含一个或多个feature类型的hap,也可以不包含。
library类型的module: (har、hsp)
用于实现代码和资源的共享。同一个library类型的module可以被其他的module多次引用,合理地使用该类型的module,能够降低开发和维护成本。library类型的module分为static和shared两种类型,编译后会生成共享包。
- static library:静态共享库。编译后会生成一个以.har为后缀的文件,即静态共享包har(harmony archive)。
- shared library:动态共享库。编译后会生成一个以.hsp为后缀的文件,即动态共享包hsp(harmony shared package)。
har与hsp两种共享包的主要区别体现在:
共享包类型 | 编译和运行方式 | 发布和引用方式 |
---|---|---|
har | har中的代码和资源跟随使用方编译,如果有多个使用方,它们的编译产物中会存在多份相同拷贝。 | har除了支持应用内引用,还可以独立打包发布,供其他应用引用。 |
hsp | hsp中的代码和资源可以独立编译,运行时在一个进程中代码也只会存在一份。 | hsp一般随应用进行打包,当前只支持应用内引用,不支持独立发布和跨应用的引用。 |
har和hsp在app包中的形态示意图
2. arkts相关(如果兄弟们精通ts可省略)
文档中心https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-v5/introduction-to-arkts-v5
-
自定义组件:@component装饰的ui单元,可以组合多个系统组件实现ui的复用,可以调用组件的生命周期。
-
页面:即应用的ui页面。可以由一个或者多个自定义组件组成,@entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@entry。只有被@entry装饰的组件才可以调用页面的生命周期。
页面生命周期,即被@entry装饰的组件生命周期,提供以下生命周期接口:
-
onpageshow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。
-
onpagehide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。
-
onbackpress:当用户点击返回按钮时触发。
组件生命周期,即一般用@component装饰的自定义组件的生命周期,提供以下生命周期接口:
-
abouttoappear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
-
ondidbuild:组件build()函数执行完成之后回调该接口,不建议在ondidbuild函数中更改状态变量、使用animateto等功能,这可能会导致不稳定的ui表现。
-
abouttodisappear:abouttodisappear函数在自定义组件析构销毁之前执行。不允许在abouttodisappear函数中改变状态变量,特别是@link变量的修改可能会导致应用程序行为不稳定。
生命周期流程如下图所示,下图展示的是被@entry装饰的组件(页面)生命周期。
根据上面的流程图,我们从自定义组件的初始创建、重新渲染和删除来详细解释。
3.自定义组件的创建和渲染流程
-
自定义组件的创建:自定义组件的实例由arkui框架创建。
-
初始化自定义组件的成员变量:通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量,初始化顺序为成员变量的定义顺序。
-
如果开发者定义了abouttoappear,则执行abouttoappear方法。
-
在首次渲染的时候,执行build方法渲染系统组件,如果子组件为自定义组件,则创建自定义组件的实例。在首次渲染的过程中,框架会记录状态变量和组件的映射关系,当状态变量改变时,驱动其相关的组件刷新。
-
如果开发者定义了ondidbuild,则执行ondidbuild方法。
4. 自定义组件重新渲染
当事件句柄被触发(比如设置了点击事件,即触发点击事件)改变了状态变量时,或者localstorage / appstorage中的属性更改,并导致绑定的状态变量更改其值时:
-
框架观察到了变化,将启动重新渲染。
-
根据框架持有的两个map(自定义组件的创建和渲染流程中第4步),框架可以知道该状态变量管理了哪些ui组件,以及这些ui组件对应的更新函数。执行这些ui组件的更新函数,实现最小化更新。
5. 自定义组件的删除
如果if组件的分支改变,或者foreach循环渲染中数组的个数改变,组件将被删除:
-
在删除组件之前,将调用其abouttodisappear生命周期函数,标记着该节点将要被销毁。arkui的节点删除机制是:后端节点直接从组件树上摘下,后端节点被销毁,对前端节点解引用,前端节点已经没有引用时,将被js虚拟机垃圾回收。
-
自定义组件和它的变量将被删除,如果其有同步的变量,比如@link、@prop、@storagelink,将从同步源上取消注册。
不建议在生命周期abouttodisappear内使用async await,如果在生命周期的abouttodisappear使用异步操作(promise或者回调方法),自定义组件将被保留在promise的闭包中,直到回调方法被执行完,这个行为阻止了自定义组件的垃圾回收。
以下示例展示了生命周期的调用时机:
// index.ets
import router from '@ohos.router';
@entry
@component
struct mycomponent {
@state showchild: boolean = true;
@state btncolor:string = "#ff007dff"
// 只有被@entry装饰的组件才可以调用页面的生命周期
onpageshow() {
console.info('index onpageshow');
}
// 只有被@entry装饰的组件才可以调用页面的生命周期
onpagehide() {
console.info('index onpagehide');
}
// 只有被@entry装饰的组件才可以调用页面的生命周期
onbackpress() {
console.info('index onbackpress');
this.btncolor ="#ffee0606"
return true // 返回true表示页面自己处理返回逻辑,不进行页面路由;返回false表示使用默认的路由返回逻辑,不设置返回值按照false处理
}
// 组件生命周期
abouttoappear() {
console.info('mycomponent abouttoappear');
}
// 组件生命周期
ondidbuild() {
console.info('mycomponent ondidbuild');
}
// 组件生命周期
abouttodisappear() {
console.info('mycomponent abouttodisappear');
}
build() {
column() {
// this.showchild为true,创建child子组件,执行child abouttoappear
if (this.showchild) {
child()
}
// this.showchild为false,删除child子组件,执行child abouttodisappear
button('delete child')
.margin(20)
.backgroundcolor(this.btncolor)
.onclick(() => {
this.showchild = false;
})
// push到page页面,执行onpagehide
button('push to next page')
.onclick(() => {
router.pushurl({ url: 'pages/page' });
})
}
}
}
@component
struct child {
@state title: string = 'hello world';
// 组件生命周期
abouttodisappear() {
console.info('[lifecycle] child abouttodisappear')
}
// 组件生命周期
ondidbuild() {
console.info('[lifecycle] child ondidbuild');
}
// 组件生命周期
abouttoappear() {
console.info('[lifecycle] child abouttoappear')
}
build() {
text(this.title).fontsize(50).margin(20).onclick(() => {
this.title = 'hello arkui';
})
}
}
// page.ets
@entry
@component
struct page {
@state textcolor: color = color.black;
@state num: number = 0
onpageshow() {
this.num = 5
}
onpagehide() {
console.log("page onpagehide");
}
onbackpress() { // 不设置返回值按照false处理
this.textcolor = color.grey
this.num = 0
}
abouttoappear() {
this.textcolor = color.blue
}
build() {
column() {
text(`num 的值为:${this.num}`)
.fontsize(30)
.fontweight(fontweight.bold)
.fontcolor(this.textcolor)
.margin(20)
.onclick(() => {
this.num += 5
})
}
.width('100%')
}
}
以上示例中,index页面包含两个自定义组件,一个是被@entry装饰的mycomponent,也是页面的入口组件,即页面的根节点;一个是child,是mycomponent的子组件。只有@entry装饰的节点才可以使页面级别的生命周期方法生效,因此在mycomponent中声明当前index页面的页面生命周期函数(onpageshow / onpagehide / onbackpress)。mycomponent和其子组件child分别声明了各自的组件级别生命周期函数(abouttoappear / ondidbuild/abouttodisappear)。
-
应用冷启动的初始化流程为:mycomponent abouttoappear --> mycomponent build --> mycomponent ondidbuild--> child abouttoappear --> child build --> child ondidbuild --> index onpageshow。
-
点击“delete child”,if绑定的this.showchild变成false,删除child组件,会执行child abouttodisappear方法。
-
点击“push to next page”,调用router.pushurl接口,跳转到另外一个页面,当前index页面隐藏,执行页面生命周期index onpagehide。此处调用的是router.pushurl接口,index页面被隐藏,并没有销毁,所以只调用onpagehide。跳转到新页面后,执行初始化新页面的生命周期的流程。
-
如果调用的是router.replaceurl,则当前index页面被销毁,执行的生命周期流程将变为:index onpagehide --> mycomponent abouttodisappear --> child abouttodisappear。上文已经提到,组件的销毁是从组件树上直接摘下子树,所以先调用父组件的abouttodisappear,再调用子组件的abouttodisappear,然后执行初始化新页面的生命周期流程。
-
点击返回按钮,触发页面生命周期index onbackpress,且触发返回一个页面后会导致当前index页面被销毁。
-
最小化应用或者应用进入后台,触发index onpagehide。当前index页面没有被销毁,所以并不会执行组件的abouttodisappear。应用回到前台,执行index onpageshow。
-
退出应用,执行index onpagehide --> mycomponent abouttodisappear --> child abouttodisappear。
6. 自定义组件的冻结功能(要了解)
定义组件处于非激活状态时,状态变量将不响应更新,即@watch不会调用,状态变量关联的节点不会刷新。通过freezewheninactive属性来决定是否使用冻结功能,不传参数时默认不使用。支持的场景有:页面路由,tabcontent,lazyforeach,navigation。
7. 常用装饰器
@builder装饰器:自定义构建函数
@builderparam装饰器:引用@builder函数
@styles装饰器:定义组件重用样式
@extend装饰器:定义扩展组件样式
8. 状态管理
组件状态
-
@state:@state装饰的变量拥有其所属组件的状态,可以作为其子组件单向和双向同步的数据源。当其数值改变时,会引起相关组件的渲染刷新。
-
@prop:@prop装饰的变量可以和父组件建立单向同步关系,@prop装饰的变量是可变的,但修改不会同步回父组件。
-
@link:@link装饰的变量可以和父组件建立双向同步关系,子组件中@link装饰变量的修改会同步给父组件中建立双向数据绑定的数据源,父组件的更新也会同步给@link装饰的变量。
-
@provide/@consume:@provide/@consume装饰的变量用于跨组件层级(多层组件)同步状态变量,可以不需要通过参数命名机制传递,通过alias(别名)或者属性名绑定。
-
@observed:@observed装饰class,需要观察多层嵌套场景的class需要被@observed装饰。单独使用@observed没有任何作用,需要和@objectlink、@prop联用。
-
@objectlink:@objectlink装饰的变量接收@observed装饰的class的实例,应用于观察多层嵌套场景,和父组件的数据源构建双向同步。
应用状态
-
appstorage是应用程序中的一个特殊的单例localstorage对象,是应用级的数据库,和进程绑定,通过@storageprop和@storagelink装饰器可以和组件联动。
-
appstorage是应用状态的“中枢”,将需要与组件(ui)交互的数据存入appstorage,比如持久化数据persistentstorage和环境变量environment。ui再通过appstorage提供的装饰器或者api接口,访问这些数据。
-
框架还提供了localstorage,appstorage是localstorage特殊的单例。localstorage是应用程序声明的应用状态的内存“数据库”,通常用于页面级的状态共享,通过@localstorageprop和@localstoragelink装饰器可以和ui联动。
ui层面
布局种类:
- 线性布局 (row/column)
- 层叠布局 (stack)
- 弹性布局 (flex)
- 相对布局 (relativecontainer)
- 栅格布局 (gridrow/gridcol)
- 媒体查询 (@ohos.mediaquery)
- 创建列表 (list)
- 创建网格 (grid/griditem)
- 创建轮播 (swiper)
- 选项卡 (tabs)
常用组件
- 按钮 (button)
- 单选框 (radio)
- 切换按钮 (toggle)
- 进度条 (progress)
- 文本显示 (text/span)
- 文本输入 (textinput/textarea)
- 显示图片 (image)
- 自定义弹窗 (customdialog)
- 视频播放 (video)
- 自定义绘制 (xcomponent)
- native xcomponent
页面路由
文档中心https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-v5/arkts-routing-v5
鸿蒙中嵌套web(有时间可以了解,只在一次面试中问到)
文档中心https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-v5/ui-js-overview-v5
最后在简历层面我再浅说几点:
1. 要写上鸿蒙的经验,最少一年吧。为什么这么写,兄弟们要明白,你第一关要过的是hr,至于面试官信不信那不重要,面试官关注的是技术点。
2. 在个人优势里要尽量写鸿蒙相关的内容,基础也要写。还是那句话hr要看。
3. 面试的时候会就是会,不会就是不会。鸿蒙都是刚起步,不会不丢人,不要模棱两可。
4. 面试的时候语速要慢,尽量表达清晰。要自己先相信自己才能让面试官认可自己
5. 大家都是打工的,都是为了一个共同的方向在努力,没必要怯场,说话要平等大大方方的很重要
最后预祝大家面试成功!
如果兄弟们想一起学习鸿蒙,或者有面试相关的问题,简历问题,或者想一起分享总结的。可以评论区留言,加个联系方式,也可以私信弟弟。寒冬虽寒,但只要我们抱团取暖,总有那一线生机。
发表评论