【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(三)

简介: 本文主要介绍了应用开发中的三大核心内容:生命周期管理、资源限定与访问以及多语言支持。在生命周期部分,详细说明了应用和页面的生命周期函数及其触发时机,帮助开发者更好地掌控应用状态变化。资源限定与访问章节,则聚焦于资源限定词的定义、命名规则及匹配逻辑,并阐述了如何通过 `$r` 引用 JS 模块内的资源。最后,多语言支持部分讲解了如何通过 JSON 文件定义多语言资源,使用 `$t` 和 `$tc` 方法实现简单格式化与单复数格式化,为全球化应用提供便利。


目录

1 -> 生命周期

2 -> 资源限定与访问

3 -> 多语言支持

1 -> 生命周期
1.1 -> 应用生命周期
在app.js中可以定义如下应用生命周期函数:

属性 类型 描述 触发时机
onCreate () => void 应用创建 当应用创建时调用。
onShow6+ () => void 应用处于前台 当应用处于前台时触发。
onHide6+ () => void 应用处于后台 当应用处于后台时触发。
onDestroy () => void 应用销毁 当应用退出时触发。
1.2 -> 页面生命周期
在页面JS文件中可以定义如下页面生命周期函数:

属性 类型 描述 触发时机
onInit () => void 页面初始化 页面数据初始化完成时触发,只触发一次。
onReady () => void 页面创建完成 页面创建完成时触发,只触发一次。
onShow () => void 页面显示 页面显示时触发。
onHide () => void 页面消失 页面消失时触发。
onDestroy () => void 页面销毁 页面销毁时触发。
onBackPress () => boolean 返回按钮动作
当用户点击返回按钮时触发。

  • 返回true表示页面自己处理返回逻辑。

  • 返回false表示使用默认的返回逻辑。

  • 不返回值会作为false处理。

onActive()5+ () => void 页面激活 页面激活时触发。
onInactive()5+ () => void 页面暂停 页面暂停时触发。
onNewRequest()5+ () => void FA重新请求 FA已经启动时收到新的请求后触发。
页面A的生命周期接口的调用顺序

2 -> 资源限定与访问
2.1 -> 资源限定词
资源限定词可以由一个或多个表征应用场景或设备特征的限定词组合而成,包括屏幕密度等维度,限定词之间通过中划线(-)连接。在resources目录下创建限定词文件时,需要掌握限定词文件的命名要求以及与限定词文件与设备状态的匹配规则。

2.2 -> 资源限定词的命名要求

表1 资源限定词
类型 含义与取值说明
屏幕密度
表示设备的屏幕密度(单位为dpi),取值如下:

  • sdpi:表示低密度屏幕(~120dpi)(0.75基准密度)

  • mdpi:表示中密度屏幕(~160dpi)(基准密度)

  • ldpi:表示高密度屏幕(~240dpi)(1.5基准密度)

  • xhdpi:表示加高密度屏幕(~320dpi)(2.0基准密度)

  • xxhdpi:表示超超高密度屏幕(~480dpi)(3.0基准密度)

  • xxxhdpi:表示超超超高密度屏幕(~640dpi)(4.0基准密度)

2.3 -> 限定词与设备状态的匹配规则

2.4 -> 引用JS模块内resources资源
在应用开发的hml和js文件中使用$r的语法,可以对JS模块内的resources目录下的json资源进行格式化,获取相应的资源内容,该目录与pages目录同级。

属性 类型 描述
$r (key: string) => string
获取资源限定下具体的资源内容。例如:$r('strings.hello')。

参数说明:

  • key:定义在资源限定文件中的键值,如strings.hello。

res-defaults.json示例:

{
"strings": {
"hello": "hello world"
}
}
3 -> 多语言支持
基于开发框架的应用会覆盖多个国家和地区,开发框架支持多语言能力后,可以让应用开发者无需开发多个不同语言的版本,就可以同时支持多种语言的切换,为项目维护带来便利。

3.1 -> 定义资源文件
资源文件用于存放应用在多种语言场景下的资源内容,开发框架使用JSON文件保存资源定义。在文件组织中指定的i18n文件夹内放置语言资源文件,其中语言资源文件的命名是由语言、文字、国家或地区的限定词通过中划线连接组成,其中文字和国家或地区可以省略,如zh-Hant-HK(中国香港地区使用的繁体中文)、zh-CN(中国使用的简体中文)、zh(中文)。命名规则如下:

language[-script-region].json
限定词的取值需符合下表要求。

表1 限定词取值要求
限定词类型 含义与取值说明
语言 表示设备使用的语言类型,由2~3个小写字母组成。例如:zh表示中文,en表示英语,mai表示迈蒂利语。
文字 表示设备使用的文字类型,由1个大写字母(首字母)和3个小写字母组成。例如:Hans表示简体中文,Hant表示繁体中文。
国家或地区 表示用户所在的国家或地区,由2~3个大写字母或者3个数字组成。例如:CN表示中国,GB表示英国。
当开发框架无法在应用中找到系统语言的资源文件时,默认使用en-US.json中的资源内容。

资源文件内容格式如下:

en-US.json

{
"strings": {
"hello": "Hello world!",
"object": "Object parameter substitution-{name}",
"array": "Array type parameter substitution-{0}",
"symbol": "@#$%^&*()_+-={}[]\|:;\"'<>,./?"
},

"files": {
    "image": "image/en_picture.PNG"
}

}
由于不同语言针对单复数有不同的匹配规则,在资源文件中使用“zero”“one”“two”“few”“many”“other”定义不同单复数场景下的词条内容。例如中文不区分单复数,仅存在“other”场景;英文存在“one”、“other”场景;阿拉伯语存在上述6种场景。

以en-US.json和ar-AE.json为例,资源文件内容格式如下:

en-US.json

{
"strings": {
"people": {
"one": "one person",
"other": "{count} people"
}
}
}
ar-AE.json

{
"strings": {
"people": {
"zero": "لا أحد",
"one": "وحده",
"two": "اثنان",
"few": "ستة اشخاص",
"many": "خمسون شخص",
"other": "مائة شخص"
}
}
}
3.2 -> 引用资源
在应用开发的页面中使用多语言的语法,包含简单格式化和单复数格式化两种,都可以在hml或js中使用。

表2 简单格式化
属性 类型 必填 描述
$t Function 是 根据系统语言完成简单的替换:this.$t('strings.hello')
表3 $t参数说明
参数 类型 必填 描述
path string 是 资源路径
params ArrayObject 否
运行时用来替换占位符的实际内容,占位符分为两种:

  • 具名占位符,例如{name}。实际内容必须用Object类型指定,例如:$t('strings.object', {name:'Hello world'})。

  • 数字占位符,例如{0}。实际内容必须用Array类型指定,例如:$t('strings.array', [Hello world']

简单格式化示例代码



{ { $t('strings.hello') }}

{ { $t('strings.object', { name: 'Hello world' }) }}

{ { $t('strings.array', ['Hello world']) }}

{ { hello }}

{ { replaceObject }}

{ { replaceArray }}





// test.js
// 下面为在js文件中的使用方法。
export default {
data: {
hello: '',
replaceObject: '',
replaceArray: '',
replaceSrc: '',
},
onInit() {
this.hello = this.$t('strings.hello');
this.replaceObject = this.$t('strings.object', { name: 'Hello world' });
this.replaceArray = this.$t('strings.array', ['Hello world']);
this.replaceSrc = this.$t('files.image');
},
}
单复数格式化方法
表4 单复数格式化
属性 类型 必填 描述
$tc Function 是
根据系统语言完成单复数替换:this.$tc('strings.people')

说明:

定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。

表5 $tc参数说明
参数 类型 必填 描述
path string 是 资源路径
count number 是 要表达的值
单复数格式化示例代码



{ { $tc('strings.people', 0) }}

{ { $tc('strings.people', 1) }}

{ { $tc('strings.people', 2) }}

{ { $tc('strings.people', 6) }}

{ { $tc('strings.people', 50) }}

{ { $tc('strings.people', 100) }}

感谢各位大佬支持!!!

互三啦!!!

目录
相关文章
|
16天前
|
监控 JavaScript 编译器
从“天书”到源码:HarmonyOS NEXT 崩溃堆栈解析实战指南
本文详解如何利用 hiAppEvent 监控并获取 sourcemap、debug so 等核心产物,剖析了 hstack 工具如何将混淆的 Native 与 ArkTS 堆栈还原为源码,助力开发者掌握异常分析方法,提升应用稳定性。
242 29
|
28天前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
144 4
|
2月前
|
JavaScript 开发者 索引
鸿蒙应用开发从入门到实战(九):ArkTS渲染控制
ArkTS拓展了TypeScript,可以结合ArkUI进行渲染控制,是的界面设计具有可编程性。本文简要描述鸿蒙应用开发中的条件渲染和循环渲染。
130 5
|
16天前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
126 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
23天前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
204 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
24天前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
375 3
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
22天前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
82 0
|
2月前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
131 1
|
2月前
|
JavaScript
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
ArkUI除系统预置的组件外,还支持自定义组件。使用自定义组件,可使代码的结构更加清晰,并且能提高代码的复用性。
140 7
|
2月前
|
传感器 监控 安全
HarmonyOS NEXT 5.0 的星闪(NearLink)开发应用案例
V哥分享HarmonyOS NEXT 5.0星闪开发实战,涵盖智能车钥匙无感解锁与工业传感器监控。低延迟、高可靠,代码完整,速来学习!
370 0

热门文章

最新文章