当前位置: 首页 > news >正文

华为鸿蒙开发笔记

记在前面

官方文档链接

因无法直接使用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 = '蜂窝网络'}
}
http://www.lryc.cn/news/466118.html

相关文章:

  • Go语言Gin框架的常规配置和查询数据返回json示例
  • JavaEE----多线程(二)
  • 【K8S】快速入门Kubernetes
  • 如何在 MySQL 中处理大量的 DELETE 操作??
  • LabVIEW中句柄与引用
  • 【三十四】【QT开发应用】音量图标以及滑动条,没有代码补全的小技巧
  • Android修改第三方应用相机方向
  • Python 读取文件汇总
  • 云原生:一张图了解devops 中CI/CD
  • 无人机之自组网通信技术篇
  • 【WebLogic】Oracle发布2024年第四季度中间件安全公告
  • Java集合(3:Set和Map)
  • 【Golang】Gin框架中如何定义路由
  • CPU内存飙升
  • 【Java】LinkedList实现类的使用
  • 创建人物状态栏
  • django5入门【01】环境配置
  • 1000集《楼兰》系列短剧开机仪式在疆举行,开启全球传播新篇章
  • 【景观生态学实验】实验五 景观生态脆弱性评价
  • ChatGPT 现已登陆 Windows 平台
  • 和鲸社区数据科学实训季,西安交通大学圆满收官,西安,后会有期!
  • 工作使用篇:如何在centos系统中安装anaconda
  • qt creator 转 visual stdio 项目调试
  • django5入门【02】创建新的django程序
  • 乐趣无限,十个让你沉浸的“摸鱼”网站
  • ubuntu22.04 桌面系统怎么搭建一个esp-idf的项目,搭建开发环境
  • iOS Swift逆向——deMangle过程中的偏移计算
  • 国产大模型基础能力大比拼 - 计数:通义千文 vs 文心一言 vs 智谱 vs 讯飞-正经应用场景的 LLM 逻辑测试
  • YOLO11改进 | 注意力机制 | 正确的 Self-Attention 与 CNN 融合范式,性能速度全面提升【独家创新】
  • 0基础学java之Day11