哈哈笔记 | HarmonyOS Arkts学习笔记（未完）
@Extend(Text) function priceText(){
.fontColor('#36D')
.fontsize(18)
}
//另外@extend只能卸载全局的位置
//此处的fontSize和fontClor是Text组建的特有属性。所以必须使用@Extend(Text)，表示继承Text的属性。
学习视频：
haimonyOS文档：
实战：
https://www.arkui.club/introduction.html
1、了解ArkTS
arkTS特点：
- 申明式UI前端，通过方舟编译器编译（AOT技术）实现的高渲染。
- 性能优越
- 多系统适配
- 与ts语言类似
2、ts语言基础
2.1变量的声明
变量类型：string 、number 、Boolean、any（任何类型）、union（联合类型）、object（对象）
2.2函数
function sayhello( name: string ):void{
}
//有返回值
function sum(x:number, y：number)：number {
}
//箭头函数
let saghi = (name:string)=>{
//函数体
}
2.3类和接口
- 接口：定义规则和方法（不实现）
- 类：用于实现方法。
2.4模块开发
- 其实就是通过export import 实现代码复用。
3、快速入门
bundle name需要保证唯一性。
项目目录：
首页：entry\src\main\ets\pages\Index.ets
小结
- 代码在目录src\main\ets\pages\Index.ets下写。
- 装饰器@Component用于标记组件、@Entry装饰器用于表示该页面是一个入口页面，可以单独展示的。
- @state装饰器是一个状态监视，只要发生改变就响应，重新渲染。
- 任何组件都有属性方法和样式方法。
4、AtkUI组件-image组件
Image组件--展示图片
组件含有通用属性和特有属性。
网络图片需要配置网络权限。
小结
- 图片组件有三种方式设置图片源
- string表示的一般都是网络图片，但是网络图片需要授权。授权要在entry\src\main\module.json5路径下授权。
"module": {
"requestPermissions": [
{
"name": 'ohos.permission.INTERNET'
}
],
}
- pimemap常常用于图片编辑的时候
- resource：图片在本地。一般在src/main/resources路径下。这种图片的表示方式有两种。
//如果图片在media文件夹下，名叫icon.png Image($r(app.media.icon)) //如果图片在rawfile文件夹下，图片名为icon.png Image($rawfile(icon.png))
- 组件一般都有通用属性和特有属性两种。具体的组件的用法和api可以直接在代码中看。悬停在组件上查看api文档即可。
- width属性：
- 数值类型 width(250)
- 字符串 width（'100%'）
5、ArkUI组件-Text
小结
- 文本组建的可以有两个格式，一个是string格式，这个是写死的，还有一个是resource格式，这个就是可以做国际化，类似于vue2里面的用一个字符串代表一个词语。
- 文本的属性都可以在文档里面查得到。不在赘述。
- 文本中利用resource格式的时候。表示了这种字段的声明都是在resource文件夹下的。
- base/element/string.json这个文件夹下的就是默认显示的字段内容。
- en_US/element/string.json这个文件夹下的就是英文示的字段内容。
- zh_CN/element/string.json这个文件夹下的就是中文显示的字段内容。
6、ArkUI组件-TextInput
小结
- 文本框的格式，如何申明。TextInput（{ }），括号内可以填写placeholder和text。
- textinput的属性：通用属性就是长宽之类的，没什么好说的。其特有属性是type（），括号里面可以选择输入文本的类型。
- textinput的事件：本节课介绍了onChange属性。
个人理解
- arkTS的类型转来转去的还是挺复杂的。
- 这一张都是UI组件介绍，其实之后在实践的时候学习更加高效，如果时间紧张可以不用看的太认真。
7、ArkUI组件-Button
8、ArkUI组件-Slider
小结：
1、滑动条{}内都是可以选择的。其中direction是方向，可以是水平的也可以是竖直的。reverse是反转：最大值和最小值换位置。
2、其他的可以看指南。
9、ArkUI组件-Column和Row
页面布局
- 线性布局组件
- 常见布局属性
主轴属性名和参数：
column相当于竖屏：
row是横屏
交叉轴属性名和参数
小结
- 线性布局，纵向采用column，横向采用row--主要概念--主轴交叉轴。
- justifyContent和alignItem分别用来控制主轴和交叉轴的对齐方式的。
- space间距、padding内边距、margin外边距。
个人理解
- 主要记忆主轴方向一种参数
- 这种的布局方式其实还是很方便，我感觉比传统的css方便。因为目前学习的的内容还很有限，样式也就那几种可供选择，所以比传统的css简单。
10、ArkUI组件-循环控制
对于大量重复的代码用foreach做渲染。
foreach(){
arr:Array,//遍历的数组
(item:any,indea?:number)=>{
//函数体，执行需要循环的操作
}
keyGenrator？：(item:any,indea?:number):string=>{
//键生成函数,这个函数会为数组里面的每一项生成一个唯一标识。
}
}
//条件判断
if(){
}else{
}
11、ArkUI组件-List
是一种新的布局。
List({space:10}){//listitem之间的间距
ForEach(arr,item()=>{
ListItem(){
//这个ListItem只能有一个跟组件。
}
})
}
.listDirection(Axis.Vertivcal)//列表方向
小结
- list的优势：在于大于屏幕高度会有滚动条。可以横向、可以纵向布局。
- 样式：higtweight（），高度权重。
12、ArkUI组件-自定义组件
自定义构建函数
定义在外部，和vue3一样，先定义在使用。
定义在内部，局部的自定义函数，在内部不可以加关键字function，调用的时候要加this
@styles装饰器
定义在外部，在全局的样式可以用@styles关键字定义。 举个例子，如果一个样式的复用性很强，在很多地方都有使用，那我们可以在外面定义一个样式
@style function fullScreen(){
//在这里定义样式
}
@Entry
@Component
struct ItemPage{
build(){
//如果我这里的Row用到fullScreen
Row(){
//这里是你的代码
}
.fullScreen()
}
}
但是如果我们把样式fullScreen卸载struct里面，我们就不用写function
@Entry
@Component
struct ItemPage{
@style fullScreen(){
//在这里定义样式
}
build(){
//如果我这里的Row用到fullScreen
Row(){
//这里是你的代码
}
.fullScreen()
}
}
extend语法：有的时候我们定义样式会发现有的样式是组件特有的，会报错。那我们应该用关键字@Extend
@Extend(Text) function priceText(){
.fontColor('#36D')
.fontsize(18)
}
//另外@extend只能卸载全局的位置
//此处的fontSize和fontClor是Text组建的特有属性。所以必须使用@Extend(Text)，表示继承Text的属性。
小结
Momenta公司福利 286人发布
投递海康威视等公司10个岗位