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

目录

1 -> 生命周期

1.1 -> 应用生命周期

1.2 -> 页面生命周期

2 -> 资源限定与访问

2.1 -> 资源限定词

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

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

2.4 -> 引用JS模块内resources资源

3 -> 多语言支持

3.1 -> 定义资源文件

3.2 -> 引用资源

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+() => voidFA重新请求FA已经启动时收到新的请求后触发。

页面A的生命周期接口的调用顺序

  • 打开页面A：onInit() -> onReady() -> onShow()

  • 在页面A打开页面B：onHide()

  • 从页面B返回页面A：onShow()

  • 退出页面A：onBackPress() -> onHide() -> onDestroy()

  • 页面隐藏到后台运行：onInactive() -> onHide()

  • 页面从后台运行恢复到前台：onShow() -> onActive()

2 -> 资源限定与访问

2.1 -> 资源限定词

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

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

  • 限定词的组合顺序：屏幕密度。开发者可以根据应用的使用场景和设备特征，选择其中的一类或几类限定词组成目录名称，顺序不可颠倒。

  • 限定词的连接方式：限定词之间均采用中划线（-）连接。例如：res-dark-ldpi.json 。

  • 限定词的取值范围：每类限定词的取值必须符合下表的条件，否则，将无法匹配目录中的资源文件，限定词大小写敏感。

  • 限定词前缀：resources资源文件的资源限定词有前缀res，例如res-ldpi.json。

  • 默认资源限定文件：resources资源文件的默认资源限定文件为res-defaults.json。

  • 资源限定文件中不支持使用枚举格式的颜色来设置资源。

表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 -> 限定词与设备状态的匹配规则

  • 在为设备匹配对应的资源文件时，限定词目录匹配的优先级从高到低依次为：MCC和MNC> 横竖屏 > 深色模式 > 设备类型 > 屏幕密度。在资源限定词目录均未匹配的情况下，则匹配默认资源限定文件。

  • 如果限定词目录中包含资源限定词，则对应限定词的取值必须与当前的设备状态完全一致，该目录才能够参与设备的资源匹配。例如：资源限定文件res-hdpi.json与当前设备密度xhdpi无法匹配。

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中使用。

  • 简单格式化方法

    在应用中使用$t方法引用资源，$t既可以在hml中使用，也可以在js中使用。系统将根据当前语言环境和指定的资源路径(通过$t的path参数设置)，显示对应语言的资源文件中的内容。

表2 简单格式化
属性类型必填描述
$tFunction是根据系统语言完成简单的替换：this.$t('strings.hello')
表3 $t参数说明
参数类型必填描述
pathstring是资源路径
paramsArrayObject否

运行时用来替换占位符的实际内容，占位符分为两种：

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

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

简单格式化示例代码

<!-- test.hml -->
<div><!-- 不使用占位符，text中显示“Hello world!” --><text>{{ $t('strings.hello') }}</text><!-- 具名占位符格式，运行时将占位符{name}替换为“Hello world” --><text>{{ $t('strings.object', { name: 'Hello world' }) }}</text><!-- 数字占位符格式，运行时将占位符{0}替换为“Hello world” --><text>{{ $t('strings.array', ['Hello world']) }}</text><!-- 先在js中获取资源内容，再在text中显示“Hello world” --><text>{{ hello }}</text><!-- 先在js中获取资源内容，并将占位符{name}替换为“Hello world”，再在text中显示“Object parameter substitution-Hello world” --><text>{{ replaceObject }}</text><!-- 先在js中获取资源内容，并将占位符{0}替换为“Hello world”，再在text中显示“Array type parameter substitution-Hello world” --><text>{{ replaceArray }}</text><!-- 获取图片路径 --><image src="{{ $t('files.image') }}" class="image"></image><!-- 先在js中获取图片路径，再在image中显示图片 --><image src="{{ replaceSrc }}" class="image"></image>
</div>
// 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 单复数格式化
属性类型必填描述
$tcFunction是

根据系统语言完成单复数替换：this.$tc('strings.people')

说明：

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

表5 $tc参数说明
参数类型必填描述
pathstring是资源路径
countnumber是要表达的值
  • 单复数格式化示例代码
<!--test.hml-->
<div><!-- 传递数值为0时： "0 people" 阿拉伯语中此处匹配key为zero的词条--><text>{{ $tc('strings.people', 0) }}</text><!-- 传递数值为1时： "one person" 阿拉伯语中此处匹配key为one的词条--><text>{{ $tc('strings.people', 1) }}</text><!-- 传递数值为2时： "2 people" 阿拉伯语中此处匹配key为two的词条--><text>{{ $tc('strings.people', 2) }}</text><!-- 传递数值为6时： "6 people" 阿拉伯语中此处匹配key为few的词条--><text>{{ $tc('strings.people', 6) }}</text><!-- 传递数值为50时： "50 people" 阿拉伯语中此处匹配key为many的词条--><text>{{ $tc('strings.people', 50) }}</text><!-- 传递数值为100时： "100 people" 阿拉伯语中此处匹配key为other的词条--><text>{{ $tc('strings.people', 100) }}</text>
</div>

感谢各位大佬支持！！！

互三啦！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/9547.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【JavaWeb06】Tomcat基础入门：架构理解与基本配置指南

【JavaWeb06】Tomcat基础入门：架构理解与基本配置指南

文章目录 &#x1f30d;一. WEB 开发❄️1. 介绍 ❄️2. BS 与 CS 开发介绍 ❄️3. JavaWeb 服务软件 &#x1f30d;二. Tomcat❄️1. Tomcat 下载和安装 ❄️2. Tomcat 启动 ❄️3. Tomcat 启动故障排除 ❄️4. Tomcat 服务中部署 WEB 应用 ❄️5. 浏览器访问 Web 服务过程详…
阅读更多...
C语言练习（29）

C语言练习（29）

13个人围成一圈&#xff0c;从第1个人开始顺序报号1、2、3。凡报到“3”者退出圈子&#xff0c;找出最后留在圈子中的人原来的序号。本题要求用链表实现。 #include <stdio.h> #include <stdlib.h>// 定义链表节点结构体 typedef struct Node {int num;struct Nod…
阅读更多...
简要介绍C语言和c++的共有变量，以及c++特有的变量

简要介绍C语言和c++的共有变量，以及c++特有的变量

在C语言和C中&#xff0c;变量是用来存储数据的内存位置&#xff0c;它们的使用方式和特性在两种语言中既有相似之处&#xff0c;也有不同之处。以下分别介绍C语言和C的共有变量以及C特有的变量。 C语言和C的共有变量 C语言和C都支持以下类型的变量&#xff0c;它们在语法和基…
阅读更多...
【UE插件】Sphinx关键词语音识别

【UE插件】Sphinx关键词语音识别

视频教程&#xff1a; Unreal Engine - Speech Recognition - Free Pluginhttps://www.youtube.com/watch?vKBcXNnSdWog&t622s 官方教程&#xff1a; Sphinx: Speech Recognition Plugin | Unreal Engine Community Wikihttps://unrealcommunity.wiki/speech-recognition…
阅读更多...
图漾相机——C++语言属性设置

图漾相机——C++语言属性设置

文章目录 前言1.SDK API功能介绍1.1 Device组件下的API测试1.1.1 相机工作模式设置&#xff08;TY_TRIGGER_PARAM_EX&#xff09;1.1.2 TY_INT_FRAME_PER_TRIGGER1.1.3 TY_INT_PACKET_DELAY1.1.4 TY_INT_PACKET_SIZE1.1.5 TY_BOOL_GVSP_RESEND1.1.6 TY_BOOL_TRIGGER_OUT_IO1.1.…
阅读更多...
Spring AI 在微服务中的应用：支持分布式 AI 推理

Spring AI 在微服务中的应用：支持分布式 AI 推理

1. 引言 在现代企业中&#xff0c;微服务架构 已成为开发复杂系统的主流方式&#xff0c;而 AI 模型推理 也越来越多地被集成到业务流程中。如何在分布式微服务架构下高效地集成 Spring AI&#xff0c;使多个服务可以协同完成 AI 任务&#xff0c;并支持分布式 AI 推理&#x…
阅读更多...
研发的立足之本到底是啥？

研发的立足之本到底是啥？

0 你的问题&#xff0c;我知道&#xff01; 本文深入T型图“竖线”的立足之本&#xff1a;专业技术 技术赋能业务能力。研发在学习投入精力最多&#xff0c;也误区最多。 某粉丝感发展遇到瓶颈&#xff0c;项目都会做&#xff0c;但觉无提升&#xff0c;想跳槽。于是&#x…
阅读更多...
HarmonyOS DevEco Studio模拟器点击运行没有反应的解决方法

HarmonyOS DevEco Studio模拟器点击运行没有反应的解决方法

HarmonyOS DevEco Studio模拟器点击运行没有反应的解决方法 翻遍了CSDN&#xff0c;试了所有办法都没办法&#xff0c;最后偶然间竟然解决了 解决方法其实很简单&#xff1a;本地模拟器下载路径下面不能有中文。。。。。 切换正确路径以后&#xff0c;成功运行&#xff0c;哦…
阅读更多...
升级到Mac15.1后pod install报错

升级到Mac15.1后pod install报错

升级Mac后&#xff0c;Flutter项目里的ios项目运行 pod install报错&#xff0c; 遇到这种问题&#xff0c;不要着急去百度&#xff0c;大概看一下报错信息&#xff0c;每个人遇到的问题都不一样。 别人的解决方法并不一定适合你&#xff1b; 下面是报错信息&#xff1a; #…
阅读更多...
C++入门（1）

C++入门（1）

1.第一个C程序 1.1基础程序 #include"iostream" //头文件 using namespace std; //使用std的名字空间int main() //main函数 {cout<<"Hello world"<<endl; //输出return 0; } 1.2main函数 main函数是程序的入口&#xff0c;C的程…
阅读更多...
c++：vector

c++：vector

1.使用 1.1构造函数 常见的三种构造方式&#xff1a;空构造&#xff0c;拷贝构造&#xff0c;指定元素构造 1.2iterator begin和end也分为正向和反向。 注意&#xff1a;反向迭代器可以反向遍历是因为在定义rbegin和rend函数的时候把尾地址给到了rbegin&#xff0c;而不是说改…
阅读更多...
1.27补题 回训练营

1.27补题 回训练营

E 智乃的小球 题目描述 在一条无限长的水平直线上&#xff0c;有 n 个小球&#xff0c;每个小球的质量相同&#xff0c;体积可以忽略不计。这些小球初始时位于直线上的不同位置&#xff0c;并且每个小球有一个初始速度&#xff0c;速度为 -1 m/s 或 1 m/s。速度为 -1 m/s 表示…
阅读更多...
Hive安装教程

Hive安装教程

Hive安装教程 文章目录 Hive安装教程写在前面安装下载安装部署安装Hive启动并使用Hive MySQL安装检查当前系统是否安装过MySQL安装初始化数据库 Hive元数据配置到MySQL拷贝驱动配置Metastore到MySQL再次启动Hive 写在前面 Linux版本&#xff1a;CentOS7.5Hive版本&#xff1a;…
阅读更多...
大屏 UI 设计风格的未来趋势

大屏 UI 设计风格的未来趋势

在科技飞速革新的时代&#xff0c;大屏设备的应用领域不断拓展&#xff0c;从城市的智能交通指挥中心&#xff0c;到商场的互动广告大屏&#xff0c;再到家庭的超大尺寸智能电视&#xff0c;大屏已然成为信息展示与交互的关键载体。大屏 UI 设计风格也随之不断演变&#xff0c;…
阅读更多...
元素的显示与隐藏

元素的显示与隐藏

display显示隐藏visibility显示隐藏overflow溢出显示隐藏 display属性 visibility属性 overflow溢出
阅读更多...
Unity游戏(Assault空对地打击)开发(1) 创建项目和选择插件

Unity游戏(Assault空对地打击)开发(1) 创建项目和选择插件

目录 前言 创建项目 插件导入 地形插件 前言 这是游戏开发第一篇&#xff0c;进行开发准备。 创作不易&#xff0c;欢迎支持。 我的编辑器布局是【Tall】&#xff0c;建议调整为该布局&#xff0c;如下。 创建项目 首先创建一个项目&#xff0c;过程略&#xff0c;名字请勿…
阅读更多...
网络工程师 （7）进程管理

网络工程师 （7）进程管理

一、进程相关的概念 &#xff08;一&#xff09;定义 进程&#xff08;Process&#xff09;是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;也是操作系统结构的基础。进程是程序的一次执行实例&#xff0c;具有动…
阅读更多...
使用CSS实现一个加载的进度条

使用CSS实现一个加载的进度条

文章目录 使用CSS实现一个加载的进度条一、引言二、步骤一&#xff1a;HTML结构与CSS基础样式1、HTML结构2、CSS基础样式 三、步骤二&#xff1a;添加动画效果1、使用CSS动画2、结合JavaScript控制动画 四、使用示例五、总结 使用CSS实现一个加载的进度条 一、引言 在现代网页…
阅读更多...
ios swift画中画技术尝试

ios swift画中画技术尝试

继上篇&#xff1a;iOS swift 后台运行应用尝试失败-CSDN博客 为什么想到画中画&#xff0c;起初是看到后台模式里有一个picture in picture&#xff0c;去了解了后发现这个就是小窗口视频播放&#xff0c;方便用户执行多任务。看小窗口视频的同时&#xff0c;可以作其他的事情…
阅读更多...
论文阅读(二)：理解概率图模型的两个要点：关于推理和学习的知识

论文阅读(二)：理解概率图模型的两个要点：关于推理和学习的知识

1.论文链接&#xff1a;Essentials to Understand Probabilistic Graphical Models: A Tutorial about Inference and Learning 摘要&#xff1a; 本章的目的是为没有概率图形模型背景或没有深入背景的科学家提供一个高级教程。对于更熟悉这些模型的读者&#xff0c;本章将作为…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023