ts interface 接口 只能生命复杂数据类型 type 可设置任意数据类型
interface person{
name:string
age:(age) => void // 有返回值 对应返回值类型 number/string 无返回值或者返回值不确定 void
dancer:() =>void 无传参
}
type userName = string; // 基本类型
// 对象类型
type Person = {
id: userId; // 可以使用定义类型
name: userName;
age: number;
gender: string;
isWebDev: boolean;
};
interface 接口的继承extends 实现implements
extends 类继承interface 接口的数据
implements 类中至少要包含接口的属性 方法，可多加
联合类型 枚举
联合类型
type gender:'man'|'woman'|'sercet';
let sex:gender = 'man';//只能从上面3个里面选择一个
枚举：
enum Color{
red="#f3f3f3",
orange = "#ddd",
Green="#4r3r3r"
}
let sex:Color = Color.orange;
class 类
class 类名{
字段名:类型= 初始值
字段名?:类型
}
构造函数
const say = new 类型（参数）
类new 实例 添加属性和方法
class Person{
name:string
constructor(name:string){
this.name = name;
}
sayHi(name:string){
console.log(`你好${name},我是:${this.name}`)
}
}
const p:Person= new Person('jack')
p.sayHi(hauhua)
// 你好 hauhua，我是jack
class 类 静态属性 和静态方法
class Robot{
static version:string ='v2.0'
static getRandom(): number{
return Math.random()
}
}
用
Robot.version
Robot.getRandom()
class类 继承extends 和super
【ES6】js 中class的extends、super关键字用法和避坑点_js class extends-CSDN博客
super 可直接继承父类的属性方法
当子类有和父类一样的属性方法时，默认会将父类的方法 属性改写
使用super 则会对父类和子类的属性方法合并
判断类型
typeof typeOf 1 简单类型 返回数据类型
instanceOf 复杂类型 返回boolean 值
public private protected readonly
public 默认 公共无限制
private 私有 类内部可以访问
proctected 受保护的 类及子类可以访问
readonly 只读 无限制
泛型 泛型约束 （可传递多个变量 用逗号隔开）
封装一个函数，传入什么样的参数，就立刻返回什么样的参数
function fn<T>(params:T):T{
return params
}
fn<number>(1)
fn<number[]>([1,3])
fn(true) 默认根据传参去进行类型推断
定义函数 参数是数组（存储的类型不定），返回数组的最后一项
泛型约束 ---- 给传递的类型添加限制
interface Ilength{
length:number
}
function getLast<T extends Ilength>(params:T):T{
//T 继承Ilength 也就意味着param 参数中必须包含length这个字段
}
class Desk{
length =2
}
let d= new Desk()
fn<Desk>(d)
泛型接口
interface Idfun{
//类型:(参数名:参数类型) => 返回值类型
id:(value:number) => number
}
interface Idf<Type>{
id:(value:Type) => Type
}
let Obj:Idf<number> = {
id(value:number){
}
}
泛型类
class Person <T>{
id:T
construnctor(id:T){
this.id = id
}
getId():T{
return this.id
}
}
let p = new Person<number>(10)
剩余参数 展开运算符
...argsNum:number[] ---- 剩余所有参数合集
function aum(a,b,...argNum:number[]){}
aum(q,e,r,t,ty)
控制组件间的间隙大小
{space:10}
svg 图标的使用
Image($r(app.media.ic_dianpu))
.width(40) 设置大小
.fillColor("#b0473d") //svg 图标填充颜色
鸿蒙图标库
HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟 (huawei.com)
svg 图标可通过 .fillColor(Color.orange) //动态修改图标颜色
边框
.border({
width:1,
color:Color.red,
style:BorderStyle.Dashed
}) //四个边都一样
.border({
width:{left:1,right:2},
color:{left:Color.red,right:Color.green}
style:BorderStyle.Dashed
}) //分别设置两个不同的边边框
设置盒子圆角
.borderRadius(5)
.borderRadius({
topLeft:5,
topRight:4,
bottomRight:14,
bottomLeft:20
})
背景图片
.backgroundImage($r('app.media.xx'),ImageRepeat.XY) 水平垂直都平铺，默认不平铺
.backgroundImagePosition({{x:100,y:100});背景图做顶点的位置 Alignment 枚举设置da
单位问题
px 实际物理像素点，vp 虚拟像素 相对于不同设备自动转换 保证不同设备视觉一致 推荐vp2px(数值) 将vp进行转换，得到px的数值
背景图片尺寸
.backgroundImageSize({
width:vp2px(150),
height:vp2px(100)
})
枚举 : Contain Cover
获取图片路径的方法
$rawfile(home/active.png);
$r('app.media.active.png')
ImageSpan 图片文本在一行
Text(){
ImageSpan($r(app.media.a)).width(15).margin({right:2})
Span('事业').fontSize(19)
}
层叠布局
Stack
Stack({alignContent:Alignment.bottom}){ //层叠内容每次都从底部开始布局，越往下层级越高
Image() //第一层
text() 第二层 text中只能添加toString()
}
position
.position({x:0,y:0}) 调整组件层级 zIndex(1)
Scroll 可滚动
Scroll(){
column(){
text("1").height('2')
}.width
}
空白弹簧
Blank() 会占位所有的空白区域
文字溢出 (换行+省略号)
textOverflow({overflow:TextOverflow.Ellipsis}) //超过省略号显示 MARQUEE 单行滚动
.maxLines(2) //必须配合最大显示行数
layoutWeight(1)
等份场景使用
占位空白区域
Blank()
定位
.position({
x:0,
y:0
})
居中
主轴
justifyContent(FlexAlign.spaceBettween)//两端对齐
交叉轴
Column alignItems(HorizontalAlign.start) 水平方向
row alignItems(VerticalAlign.Top) //居顶 居中 居底
布局 换行 或 单行单列换行
Flex({wrap:FlexWrap.Wrap}) 换行 或者 noWarp 不换行
独立一行显示
Row(){}
text 文本居中
.textAlign(TextAlign.center) 文本居中=
模板字符串拼接
let name: string = '小明'
let age: number = 18
console.log('简介信息', `姓名是${name},今年${age}岁了`) 模板字符串拼接
console.log('简介信息', '姓名是' + name + ',今年' + age + '岁了') 加号拼接
转数字 Number ParseInt ParseFloat
Number 转数字
ParseInt 去掉小数部分取整
ParseFloat 保留小数部署 去掉非数字内容
转字符串
toString 原样转
toFixed 保留几位小数 四舍五入 转字符串
点击事件
onClick(() =>{})
普通变量 状态变量
state 状态变量初始值确保首次更新 ，后续点击触发数据更新，改变会引起UI 重新渲染
普通变量 需要装饰器装饰，改变会引起UI的渲染刷新
加减乘除取余
num + =2 => num = num +2
num -=2 => num = num -2
num * = 2 => num = num*2
num %=100 => num / 100 余几
num / =2 => num = num /2
常见的一元运算符 -- ++ !
res = num++ 先赋值再自增
res= ++num 先自增再赋值
两个num 打印出来都一样 res 打印出来值不同
运算符优先级
小括号 ()
一元 ++ -- ！
算数 * / % 后 + -
比较 == !=
逻辑运算符 先&& 后 ||
赋值 =
数组的操作方法
unshift 从开头新增一个 返回数组的长度
push 从结尾新增一个 返回新增的数组长度
shift 从开头删除一个 返回删除的项
pop 从结尾删除一个 返回删除的项
splice(起始位置，删除的个数，新增元素1，新增元素2)
弹框
AlertDialog.show({message:'最小值为1'})
break continue
break 终止所有循环
commtinue 终止本次循环，下一个循环可以执行
遍历数组
for...of...
角标 --- 往图片上添加角标
Badge({
value: '',
style: { badgeSize: 6, badgeColor: '#FA2A2D' }
}) {
Image('/common/public_icon_off.svg')
.width(24)
.height(24)
}
.width(24)
.height(24)
.margin({ bottom: 4 })
网格布局 栅格布局
Grid(){
ForEach([1,3,4,5,6],() =>{
GridItem(){
Column(){}
. .width(50px).height(60px).background(Color.Green)
}
})
}
.columnsTemplate('1fr,1fr,1fr,1fr') 4列
rowsTemplate('1fr,1fr,1fr') 3行
.rowsGap('30px') //行间隙
.columnsGap('20px')//列间隙
透明度 层级 图片缩放
opacity 0--1 透明度
zIndex 层级 -1 --- 99
scale 图片缩放 0 ==》 1
animation({
duration:500 //动画时间
})
swiper 轮播图
//设置轮播图切换点
.Indicator(
indicator.dot()
.itemWidth(10)
.selectedItemWidth(30)
selectedColor(Color.White)
)
图片宽/高比, 设置固定宽度 高度等比例缩放
aspectRadio(2)
@Extend 扩展组件（事件，样式）侧重于组件 @Styles 抽取通用属性事件 侧重于样式 @Bulider 自定义构建函数（结构，样式，事件）
@Extend('Text') 同一类型组件提出 事件样式，支持function传参
例
@Extend('Button') 按钮事件
function fancyBtn(isOn:boolean){
.width(46)
.height(20)
.fontColor(isOn?'#ccc' :'#000')
}
有动态值得styles 应该定义到组件内部
@Styles function CommStyle(){ //不同类型的组件抽离事件样式 组件内部 全局皆可以定义 styles 不支持传参
.width(300)
...
}
@Bulider 可封装全局组件 动态渲染组件内容 可传参
@Bulider
function navItem(icon:ResourceStr,txt:string){
column({space:10}){
}
}
使用
this.navItem($r(app.media.ci),'阿里')
scroll 滚动效果
Scroll-容器组件-组件参考（基于ArkTS的声明式开发范式）-ArkTS API参考 | 华为开发者联盟 (huawei.com)
scroller 控制器 控制滚动事件
声明
scr:scroller = new Scroller()
scroll 中注入
scroll(this.scr){}
使用scr 点击可回到顶部
Button('回到顶部').onClick(() =>{
this.scr.scrollEdge(Edge.End)
})
onScroll 获取单次滑动 多少距离
onScroll((X,Y) =>{
}) //实时获取控制器滚动距离值
Tab 页面切换 高亮
tabBar内容封装成组件 --- 调用时传递固定的index 选中未选中图片 --- 声明选中index --- onchange 动态赋值 -- 组件中三元表达式 确定图片地址 颜色
Tabs(){
TabContent()
.tabBar('item') //标题内容
}
.barMode(BarMode.Scrollable) //-----滚动导航栏 默认导航栏不可滚动
传图片 文字
tabBar(this.myBuilder('购物车'),$r(app.ne)) // myBuilder 中传递固定的index 未选中的图片 选中图片
//选中 或者滑动
tabs(){}
.onChange((index:number) =>{
console.log('激活的索引',index)
})
按需导出导入对应的模块
导出
export 按需导出
export default 默认导出
导入
import {ar} from '../asC' 按需
import * as ar from '../asC' 全部导出 重命名为ar
单独预览组件
@preview
成员变量
//若想让其成为响应式，添加@state 使其为响应式且可被同变量值覆盖
title:string = '默认的大标题' 成员变量可被传入同变量名覆盖
getMore =()=>{ //成员变量函数 可以外部传入覆盖
}
sayhi(){} 非赋值型不可传入覆盖
@BuilderParam 尾随闭包
@BuilderParam ContentBuilder:() => void = this.defaultBuilder //组件中未传递UI 时默认选用@Builder
@Builder
defaultBuilder(){
Text('默认内容')
}
组件中使用 this.ContentBuilder()
父级调用
sonCom(){
Button('传入的结构')
}
存在多个BuilderParam 传递
@BuilderParam ContentBuilder:() => void = this.defaultBuilder //组件中未传递UI 时默认选用@Builder
@BuilderParam DContentBuilder:() => void = this.DdefaultBuilder //组件中未传递UI 时默认选用@Builder
@Builder
defaultBuilder(){
Text('默认内容')
}
@Builder
DdefaultBuilder(){
Text('默认内容')
}
组件中使用 this.ContentBuilder()
父级调用
sonCom({ContentBuilder:this.fatherBuilder()})
sonCom({ContentBuilder:this.DfatherBuilder()})
@Bulider
fatherBuilder(){
text('腹肌')
}
@Builder
DfatherBuilder(){
Button('点击按钮')
}
状态管理
@state 声明的响应式数据 三级结构数据直接赋值，数据修改但页面不更新 this.a.b.c 需要通过
this.a.b ={
c:'ww'
}
简单类型 可 直接监听到数据的变化
父子传值
@Prop
子
@Prop num:string
subFn = () => {}
addFn = () => {}
Button('点击').onClick(() =>{
this.subFn()
this.addFn()
})
父
addSon({
num:this.nums,
subFn = () => this.nums++,
addFn = () => this.nums--
})
List 实现列渲染比scroll 更智能
List(){
ListItem(){}
}
注册字体图标
aboutToAppear():void{
font.registerFont({
familyName:'myFont',
familySrc:'/fonts/iconfont.ttf' /找的是ets下的内容
})
}
使用
Text('\ue600').fontFamily('myfont')
.fontSize(30)
.fontColor(Color.Red)
通过函数造假数据
export class com{
name:string
age:number
}
export const aa = ():com[]{
const result:com[] = new Array()
result = [
com(`花花，16`)
]
return result
}
import aa from './aa'
@state alist:com[] = aa();
输入框双向数据绑定
TextInput({
placeholder:'写评论。。。'，
text:$$this.text
})
.onSubmit(() => {
this.onSubmitComment(this.text)
})
排序 Sort
rr3.sort(function(a,b){ return a - b;})
@provide @Consume 父子级数据共享，默认数据由父级传递给儿孙辈 跨层级进行数据传递
@provide 父级声明的方法
@Consume 子或者 孙 接收父级的参数
父级
@Provide a:number = '13'
儿孙
@Consume a:number
@Observed & @ObjectLink 嵌套对象数组属性变化
@state 只能监视两层数据变化 a = {a:{}}
一般用 aa.splice(index,1,item)解决不更新问题
需要class 声明数组
@Observed
class info{
name:string
age:number
}
@state arrList:info[] = new Array();
this.arrList = [ new info({name:haley,age:19}), new info({name:haley,age:18})]
entry 下不能用
子用@ObjectLink 装饰的数据 才会在数据改变驱动视图改变
路由跳转
导入
import router from '@ohos.router'
或
import {router} from '@kit.ArkUI'
router.pushUrl({ //普通跳转可返回
url:'页面地址'
})
router.replaceUrl({ //替换跳转 不可返回
url:'页面地址'
})
router.back() 返回
页面栈 先进后出
router.getLength() 获取页面栈的长度
router.clear() 清空页面栈 栈最大长度32
路由模式
Standard 不断累加 Single 会把同URL移动到最新的
路由传参
router.push({
url:'页面地址',
params:{
name:'haley',
age:12
}
})
获取
interface ParamObj{
name:string
age:number
}
aboutToAppear router.getParams() as ParamObj 需要知道传输的数据类型
组件和页面的生命周期
组件 和 页面
aboutToAppear aboutToDisappear
仅页面有
onPageShow onPageHide onBackPress
当从一个页面 跳转到另一个页面
onPageHide --- aboutToDisappear -- onPageShow --- aboutToAppear
中英管理界面进行文字配置
string.json --- Open Editor --- 修改对应内容
app.json5 module.json5
APPScope ---app.json5 --- 修改应用管理里面的文件图标显示
mmoudle.json5 ---配置ablity 入口图标 和标签配置
可创建多个UIAblity
设置UIAblity 入口
entry -- src --moudlle.json5
将这段代码放在哪里，哪个配置的入口页面 就是默认启动UIAblity 以及对应的页面
多个UIAblity 就是打开多个页面窗口
例 我在刷淘宝 ---- 突然到买饭窗口 ----- 我又回淘宝窗口买东西 ---买完东西我又去买饭窗口看饭好了没
两个窗口并存只是退到后台运行 这就是多窗口
onWindowStageCreate loadContent 配置的页面路径 就是 UIAblity 默认展示的页面
创建EnteryAblity.ets
找到对应的文件鼠标右击 ---- New --Ablity/ATSflie
多个Ablity 相互跳转,也可跨模块跳转
context= getContext(this)
点击事件
let wantInfo:Want = {
deviceId:''，//空表示本设备
bundleName:'app.json5中包名'， APPscope/app.json5 对应的BundleName mouduleName:'entry'模块名,//本模块跳转就是本模块对应的包名，跨模块跳转就是其他模块的包名
ablityName:'TwoAblity', //对应的Ablity
parameters:{
info:'来自entryAblity'
}
}
this.context.startAblity(wantInfo)
.then(() => {
console.log('111')
})
.catch((err:BussinessError) => {
console.log(启动失败)
})
创建一个entry 模块
一项项目有多个模块 怎么运行
切换 右上角 entry 下的工程名运行
