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

news2025/2/3 10:15:34

目录

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.coloradmin.cn/o/2291214.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

小程序-基础加强-自定义组件

小程序-基础加强-自定义组件

前言 这次讲自定义组件 1. 准备今天要用到的项目 2. 初步创建并使用自定义组件 这样就成功在home中引入了test组件 在json中引用了这个组件才能用这个组件 现在我们来实现全局引用组件 在app.json这样使用就可以了 3. 自定义组件的样式 发现页面里面的文本和组件里面的文…
阅读更多...
尝试ai生成figma设计

尝试ai生成figma设计

当听到用ai 自动生成figma设计时&#xff0c;不免好奇这个是如何实现的。在查阅了不少资料后&#xff0c;有了一些想法。参考了&#xff1a;在figma上使用脚本自动生成色谱 这篇文章提供的主要思路是&#xff1a;可以通过脚本的方式构建figma设计。如果我们使用ai 生成figma脚本…
阅读更多...
【周易哲学】生辰八字入门讲解（八）

【周易哲学】生辰八字入门讲解（八）

&#x1f60a;你好&#xff0c;我是小航&#xff0c;一个正在变秃、变强的文艺倾年。 &#x1f514;本文讲解【周易哲学】生辰八字入门讲解&#xff0c;期待与你一同探索、学习、进步&#xff0c;一起卷起来叭&#xff01; 目录 一、六亲女命六亲星六亲宫位相互关系 男命六亲星…
阅读更多...
解决whisper 本地运行时GPU 利用率不高的问题

解决whisper 本地运行时GPU 利用率不高的问题

我在windows 环境下本地运行whisper 模型&#xff0c;使用的是nivdia RTX4070 显卡&#xff0c;结果发现GPU 的利用率只有2% 。使用 import torch print(torch.cuda.is_available()) 返回TRUE。表示我的cuda 是可用的。 最后在github 的下列网页上找到了问题 极低的 GPU 利…
阅读更多...
【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具02

【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具02

工具运行前的环境准备 1、登录用户管理员权限确认 工具使用的登录用户(-u后面的用户)&#xff0c;必须具有管理员的权限&#xff0c;因为需要读取系统表 例&#xff1a;Export.bat -s 10.48.111.12 -d db1 -u test -p test -schema dbo 　　　　 2、Powershell的安全策略确认…
阅读更多...
java异常处理——try catch finally

java异常处理——try catch finally

单个异常处理 1.当try里的代码发生了catch里指定类型的异常之后&#xff0c;才会执行catch里的代码&#xff0c;程序正常执行到结尾 2.如果try里的代码发生了非catch指定类型的异常&#xff0c;则会强制停止程序&#xff0c;报错 3.finally修饰的代码一定会执行&#xff0c;除…
阅读更多...
DeepSeek-R1：通过强化学习激励大型语言模型（LLMs）的推理能力

DeepSeek-R1：通过强化学习激励大型语言模型（LLMs）的推理能力

摘要 我们推出了第一代推理模型&#xff1a;DeepSeek-R1-Zero和DeepSeek-R1。DeepSeek-R1-Zero是一个未经监督微调&#xff08;SFT&#xff09;作为初步步骤&#xff0c;而是通过大规模强化学习&#xff08;RL&#xff09;训练的模型&#xff0c;展现出卓越的推理能力。通过强…
阅读更多...
低成本、高附加值，具有较强的可扩展性和流通便利性的行业

低成本、高附加值，具有较强的可扩展性和流通便利性的行业

目录 虚拟资源类 1. 网课教程 2. 设计素材 3. 软件工具 服务类 1. 写作服务 2. 咨询顾问 3. 在线教育 4. 社交媒体管理 虚拟资源类 1. 网课教程 特点&#xff1a;高附加值&#xff0c;可复制性强&#xff0c;市场需求大。 执行流程&#xff1a; 选择领域&#xff1a…
阅读更多...
vue入门到实战 二

vue入门到实战 二

目录 2.1 计算属性computed 2.1.1什么是计算属性 2.1.2 只有getter方法的计算属性 2.1.3 定义有getter和setter方法的计算属性 2.1.4 计算属性和methods的对比 2.2 监听器属性watch 2.2.1 watch属性的用法 2.2.2 computed属性和watch属性的对比 2.1 计算属性computed…
阅读更多...
二叉树-堆（补充）

二叉树-堆（补充）

二叉树-堆 1.二叉树的基本特性2.堆2.1.堆的基本概念2.2.堆的实现2.2.1.基本结构2.2.2.堆的初始化2.2.3.堆的销毁2.2.4.堆的插入2.2.5.取出堆顶的数据2.2.6.堆的删除2.2.7.堆的判空2.2.8.堆的数据个数2.2.9.交换2.2.10.打印堆数据2.2.11.堆的创建2.2.12.堆排序2.2.13.完整代码 3…
阅读更多...
基于springboot私房菜定制上门服务系统设计与实现(源码+数据库+文档)

基于springboot私房菜定制上门服务系统设计与实现(源码+数据库+文档)

私房菜定制上门服务系统目录 目录 基于springbootvue私房菜定制上门服务系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能实现 &#xff08;1&#xff09;菜品管理 &#xff08;2&#xff09;公告管理 &#xff08;3&#xff09; 厨师管理 2、用…
阅读更多...
2025开源DouyinLiveRecorder全平台直播间录制工具整合包，多直播同时录制、教学直播录制、教学视频推送、简单易用不占内存

2025开源DouyinLiveRecorder全平台直播间录制工具整合包，多直播同时录制、教学直播录制、教学视频推送、简单易用不占内存

一、DouyinLiveRecorder软件介绍&#xff08;文末提供下载&#xff09; 官方地址&#xff1a;GitHub - ihmily/DouyinLiveRecorder 本文信息来源于作者GitHub地址 一款简易的可循环值守的直播录制工具&#xff0c;基于FFmpeg实现多平台直播源录制&#xff0c;支持自定义配置录制…
阅读更多...
利用飞书机器人进行 - ArXiv自动化检索推荐

利用飞书机器人进行 - ArXiv自动化检索推荐

相关作者的Github仓库 ArXivToday-Lark 使用教程 Step1 新建机器人 根据飞书官方机器人使用手册&#xff0c;新建自定义机器人&#xff0c;并记录好webhook地址&#xff0c;后续将在配置文件中更新该地址。 可以先完成到后续步骤之前&#xff0c;后续的步骤与安全相关&…
阅读更多...
python算法和数据结构刷题[5]：动态规划

python算法和数据结构刷题[5]：动态规划

动态规划&#xff08;Dynamic Programming, DP&#xff09;是一种算法思想&#xff0c;用于解决具有最优子结构的问题。它通过将大问题分解为小问题&#xff0c;并找到这些小问题的最优解&#xff0c;从而得到整个问题的最优解。动态规划与分治法相似&#xff0c;但区别在于动态…
阅读更多...
【Rust自学】16.2. 使用消息传递来跨线程传递数据

【Rust自学】16.2. 使用消息传递来跨线程传递数据

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 16.2.1. 消息传递 有一种很流行而且能保证安全并发的技术&#xff08;或者叫机制&#xff09;叫做消息传递。在这种机制里&#xff0c;线…
阅读更多...
解锁豆瓣高清海报(二) 使用 OpenCV 拼接和压缩

解锁豆瓣高清海报(二) 使用 OpenCV 拼接和压缩

解锁豆瓣高清海报(二): 使用 OpenCV 拼接和压缩 脚本地址: 项目地址: Gazer PixelWeaver.py pixel_squeezer_cv2.py 前瞻 继上一篇“解锁豆瓣高清海报(一) 深度爬虫与requests进阶之路”成功爬取豆瓣电影海报之后&#xff0c;本文将介绍如何使用 OpenCV 对这些海报进行智…
阅读更多...
利用腾讯云cloud studio云端免费部署deepseek-R1

利用腾讯云cloud studio云端免费部署deepseek-R1

1. cloud studio 1.1 cloud studio介绍 Cloud Studio&#xff08;云端 IDE&#xff09;是基于浏览器的集成式开发环境&#xff0c;为开发者提供了一个稳定的云端工作站。支持CPU与GPU的访问。用户在使用 Cloud Studio 时无需安装&#xff0c;随时随地打开浏览器即可使用。Clo…
阅读更多...
DeepSeek r1本地安装全指南

DeepSeek r1本地安装全指南

环境基本要求 硬件配置 需要本地跑模型&#xff0c;兼顾质量、性能、速度以及满足日常开发需要&#xff0c;我们需要准备以下硬件&#xff1a; CPU&#xff1a;I9内存&#xff1a;128GB硬盘&#xff1a;3-4TB 最新SSD&#xff0c;C盘确保有400GB&#xff0c;其它都可划成D盘…
阅读更多...
基于VMware的ubuntu与vscode建立ssh连接

基于VMware的ubuntu与vscode建立ssh连接

1.首先安装openssh服务 sudo apt update sudo apt install openssh-server -y 2.启动并检查ssh服务状态 到这里可以按q退出 之后输入命令 &#xff1a; ip a 红色挡住的部分就是我们要的地址&#xff0c;这里就不展示了哈 3.配置vscode 打开vscode 搜索并安装&#xff1a;…
阅读更多...
【LLM-agent】(task2)用llama-index搭建AI Agent

【LLM-agent】(task2)用llama-index搭建AI Agent

note LlamaIndex 实现 Agent 需要导入 ReActAgent 和 Function Tool&#xff0c;循环执行&#xff1a;推理、行动、观察、优化推理、重复进行。可以在 arize_phoenix 中看到 agent 的具体提示词&#xff0c;工具被装换成了提示词ReActAgent 使得业务自动向代码转换成为可能&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023