华为鸿蒙开发笔记
记在前面
官方文档链接
因无法直接使用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 = '蜂窝网络'}
}