华为鸿蒙开发笔记

记在前面

官方文档链接

因无法直接使用chatgpt进行编程(悲,2024/10),故记录笔记,方便查阅,基于arkts语言

DevEco

中文

deveco是默认有中文包的,所以在市场里面搜不错,而应该在已安装里面搜索,然后启用就行了

测试

对ts进行单独测试

打开entry/src/test/LocalUnit.test.ets

将需要测试的代码附加再后面,然后就可以运行了,如下面测试代码

const first: string = "Hello World";
console.log(first);

常用组件

大小单位

如下,有两种设置方式

@Entry
@Component
struct Index {build() {Column({ }) {Text().width(360).height(360).backgroundColor(0x0000FF)Text().width('100%').height('50%').backgroundColor(0x00FF00)}}
}

Text

Text('HarmonyOS').fontColor(Color.Blue).fontSize(40).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)

使用资源文件

Text($r('app.string.EntryAbility_label'))

Image

资源图片

Image($r("app.media.image2")).objectFit(ImageFit.Cover).backgroundColor(0xCCCCCC).width(100).height(100)

• Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

• Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

• Auto：自适应显示。

• Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。

• ScaleDown：保持宽高比显示，图片缩小或者保持不变。

• None：保持原有尺寸显示。

网络图片

Image('https://www.example.com/xxx.png')

为了成功加载网络图片，您需要在module.json5文件中申明网络访问权限。

{"module" : {"requestPermissions":[{"name": "ohos.permission.INTERNET"}]}
}

TextInput

@Entry
@Component
struct Test {@State text: string = ''build() {Column() {TextInput({ placeholder: '请输入账号' }).caretColor(Color.Blue).onChange((value: string) => {this.text = value})Text(this.text)}}
}

Button

点击事件

@Entry
@Component
struct Test {@State num: number = 0build() {Column() {Button('click me', { type: ButtonType.Capsule, stateEffect: true }).onClick(() => {this.num+=1})Text(this.num.toString())}}
}

type用于定义按钮样式三种Capsule,Normal,Circle

stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。

图标按钮

@Entry
@Component
struct Test {build() {Column() {Button({ type: ButtonType.Circle, stateEffect: true }) {// Image($r('app.media.startIcon'))//   .width(30)//   .height(30)SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')).fontSize(45)}.width(55).height(55).backgroundColor(0x00FF00)}}
}

LoadingProgress

LoadingProgress().color(Color.Blue).height(60).width(60)

Foreach

接口如下

ForEach(arr: Array,itemGenerator: (item: any, index: number) => void,keyGenerator?: (item: any, index: number) => string
)

简单应用如下,

@Entry
@Component
struct Index {@State simpleList: Array<string> = ['one', 'two', 'three'];build() {Column() {ForEach(this.simpleList, (item: string,index:number) => {Text(`${index} : `+item).fontSize(50)}, (item: string) => item)}}
}

List

如下,需要先用List,再使用ListItem指定显示项

@Entry
@Component
struct Index {@State results:number[] = [1,2,3,4,5,6]build() {List() {ForEach(this.results,(item:number)=>{ListItem(){Text(item.toString()).fontSize(30).width('100%').height('30%').borderWidth(1).borderColor(0x000000)}})}}
}

弹窗

简单提醒

基于模态窗口

Button('删除').onClick(() => {if (this.selectedCardList.length == 0) {AlertDialog.show({message: '已经删完了喔',autoCancel: true,alignment: DialogAlignment.Bottom,})} 

简单提醒2

onBackPress(){if (this.isShowToast()) {prompt.showToast({message: $r('app.string.prompt_text'),duration: 1000});this.clickBackTimeRecord = new Date().getTime();return true;}return false;}

样式复用

使用@Style装饰,但只能在本文件中复用,说实话有点鸡肋

组件封装

class Article {id: string;title: string;brief: string;constructor(id: string, title: string, brief: string) {this.id = id;this.title = title;this.brief = brief;}
}@Entry
@Component
struct ArticleListView {@State isListReachEnd: boolean = false;@State articleList: Array<Article> = []aboutToAppear(): void {for (let i = 1; i <= 4; i++) {const id = i.toString().padStart(3, '0'); // 格式化ID，如 '001', '002', etc.const title = `第${i}篇文章`;const content = '文章简介内容';this.articleList.push(new Article(id, title, content));}}loadMoreArticles() {this.articleList.push(new Article('007', '加载的新文章', '文章简介内容'));}build() {Column({ space: 5 }) {List() {ForEach(this.articleList, (item: Article) => {ListItem() {ArticleCard({ article: item }).margin({ top: 20 })}}, (item: Article) => item.id)}.padding(20).scrollBar(BarState.Off)}.width('100%').height('100%').backgroundColor(0xF1F3F5)}
}@Component
struct ArticleCard {@Prop article: Article;build() {Row() {Image($r('app.media.startIcon')).width(80).height(80).margin({ right: 20 })Column() {Text(this.article.title).fontSize(20).margin({ bottom: 8 })Text(this.article.brief).fontSize(16).fontColor(Color.Gray).margin({ bottom: 8 })}.alignItems(HorizontalAlign.Start).width('80%').height('100%')}.padding(20).borderRadius(12).backgroundColor('#FFECECEC').height(120).width('100%').justifyContent(FlexAlign.SpaceBetween)}
}

布局

动画

导航及传参

页面跳转,以及使用provide和consume进行传参

Main Page

import { DetailPage } from './DetailPage';@Entry
@Component
struct MainPage {@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()@Provide param: string ='param';build() {Column() {Navigation(this.pageInfos) {Button('Next Page').align(Alignment.Center).margin({ top: 100 }).borderRadius(12).onClick(() => {this.pageInfos.pushPathByName("DetailPage",'')});}.title("Main Page").navDestination(this.PageMap);}}@BuilderPageMap(name: string) {if (name === "DetailPage") {DetailPage(); // 调用详情页面}}
}

Detail Page

@Component
export struct DetailPage {@Consume('pageInfos') pageInfos: NavPathStack;@Consume  param: string;build() {NavDestination() {Column() {Text(this.param).fontSize(30).margin({ top: 20 });}}.title("Detail Page").onBackPressed(() => {this.pageInfos.pop();return true;});}
}

生命周期事件

页面生命周期

被@Entry装饰的组件生命周期

onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景
onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入前后台等场景
onBackPress：当用户点击返回按钮时触发。

组件生命周期

被@Component装饰的自定义组件的生命周期

aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。

aboutToDisappear：在自定义组件即将析构销毁时执行。

onAppear：是每个组件的属性方法，在该组件显示时触发此回调。

设备信息

屏幕信息

// 获取屏幕分辨率
getDisplayInfo() {// 获取默认显示器const defaultDisplay = display.getDefaultDisplaySync()// 获取屏幕高度this.displayHeight = defaultDisplay.height// 获取屏幕宽度this.displayWidth = defaultDisplay.width// 获取屏幕刷新率this.displayRefreshRate = defaultDisplay.refreshRate// 获取像素密度this.displayDensityDPI = defaultDisplay.densityDPI
}

在使用previewer获取到的信息都是0,所以在开发的时候先设定定值

// private  deviceWidth:number = display.getDefaultDisplaySync().width;
// private  deviceHeight:number = display.getDefaultDisplaySync().height;private  deviceWidth:number = 1080;
private  deviceHeight:number = 2340;

网络状态

网络权限

在module.json5中配置网络权限

 "requestPermissions": [{"name": "ohos.permission.GET_NETWORK_INFO"// 获取网络信息权限}],

IP

//获取 IP 地址
getIPAddress() {// 获取默认网络const netHandle = connection.getDefaultNetSync()// 获取网络连接信息const connectionProperties = connection.getConnectionPropertiesSync(netHandle)// 提取链路信息const linkAddress = connectionProperties.linkAddresses?.[0]if (linkAddress) {// 提取 IP 地址this.IPAddress = linkAddress.address.address}
}

网络类型

// 获取网络类型
getConnection() {const hasDefaultNet = connection.hasDefaultNetSync() // 是否有默认网络// 没有网络if (!hasDefaultNet) {this.netBearType = '无网络连接'} else {this.getConnectionNetBearType()}
}// 获取网络类型
getConnectionNetBearType() {// 1. 获取默认网络const defaultNet = connection.getDefaultNetSync()// 2. 获取网络能力信息const netCapabilities = connection.getNetCapabilitiesSync(defaultNet)// 3. 判断网络类型if (netCapabilities.bearerTypes.includes(connection.NetBearType.BEARER_ETHERNET)) {this.netBearType = '以太网网络'} else if (netCapabilities.bearerTypes.includes(connection.NetBearType.BEARER_WIFI)) {this.netBearType = 'WIFI网络'} else if (netCapabilities.bearerTypes.includes(connection.NetBearType.BEARER_CELLULAR)) {this.netBearType = '蜂窝网络'}
}