OpenHarmony应用开发-使用JS语言开发（FA模型）与资源分类与访问

版本：v3.2 Beta5

使用JS语言开发（FA模型）

说明：

为确保运行效果，本文以使用DevEco Studio V3.0.0.993版本为例，点击​​此处​​获取下载链接。

创建JS工程

1. 若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File>New>Create Project来创建一个新工程。选择OpenHarmony模板库，选择模板“Empty Ability”，点击Next进行下一步配置。

2. 进入配置工程界面，Compile SDK选择“8”（Compile SDK选择“9”时注意同步选择Model为“FA”，此处以选择“8”为例），Language选择“JS”，其他参数保持默认设置即可。

说明：

DevEco Studio V2.2 Beta1及更高版本支持使用JS​​低代码开发​​方式。

低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。

如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。

3. 点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

JS工程目录结构

• entry：OpenHarmony工程模块，编译构建生成一个​​HAP​​包。

     ○  src > main > js：用于存放js源码。

     ○  src > main > js > MainAbility：应用/服务的入口。

     ○  src > main > js > MainAbility > i18n：用于配置不同语言场景资源内容，比如应用文本词条、图片路径等资源。

     ○  src > main > js > MainAbility > pages：MainAbility包含的页面。

     ○  src > main > js > MainAbility > app.js：承载Ability生命周期。

     ○  src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见​​资源限定与访问​​。

     ○  src > main > config.json：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见​​应用配置文件（FA模型）​​。

     ○  build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。

     ○  hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。

• build-profile.json5：应用级配置信息，包括签名、产品配置等。
• hvigorfile.ts：应用级编译构建任务脚本。

构建第一个页面

1. 使用文本组件。
   工程同步完成后，在“Project”窗口，点击“entry > src > main > js > MainAbility > pages> index”，打开“index.hml”文件，设置Text组件内容。“index.hml”文件的示例如下：

<!-- index.hml -->
<div class="container">
    <text class="title">
        Hello World
    </text>
</div>

2. 添加按钮，并绑定onclick方法。

在默认页面基础上，我们添加一个button类型的input组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“index.hml”文件的示例代码如下：

<!-- index.hml -->
<div class="container">
    <text class="title">
        Hello World
    </text>

<!-- 添加按钮，值为Next，并绑定onclick方法-->
    <input class="btn" type="button" value="Next" onclick="onclick"></input>
</div>

3. 设置页面样式。

在“Project”窗口，点击“entry > src > main > js > MainAbility > pages> index”，打开“index.css”文件，可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“index.css”文件的示例如下：

/* index.css */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 100px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin: 10px;
}

.btn {
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    width: 40%;
    height: 5%;
    margin-top: 20px;
}

4. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：

构建第二个页面

1. 创建第二个页面。
   在“Project”窗口，打开“entry > src > main > js > MainAbility”，右键点击“pages”文件夹，选择“New > Page”，命名为“second”，点击“Finish”，即完成第二个页面的创建。可以看到文件目录结构如下：

2. 添加文本及按钮。

参照第一个页面，在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“second.hml”文件的示例如下：

<!-- second.hml -->
<div class="container">
    <text class="title">
        Hi there
    </text>

<!-- 添加按钮，值为Back，并绑定back方法-->
    <input class="btn" type="button" value="Back" onclick="back"></input>
</div>

3. 设置页面样式。

“second.css”文件的示例如下：

/* second.css */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 100px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin: 10px;
}

.btn {
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    width: 40%;
    height: 5%;
    margin-top: 20px;
}

实现页面间的跳转

页面间的导航可以通过​​页面路由router​​来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

1. 第一个页面跳转到第二个页面。

在第一个页面中，跳转按钮绑定onclick方法，点击按钮时跳转到第二页。“index.js”示例如下：

// index.js
// 导入页面路由模块
import router from '@ohos.router';

export default {
    onclick: function () {
        router.push({
            url: "pages/second/second"
        })
    }
}

2. 第二个页面返回到第一个页面。

在第二个页面中，返回按钮绑定back方法，点击按钮时返回到第一页。“second.js”示例如下：

// second.js
// 导入页面路由模块
import router from '@ohos.router';

export default {
    back: function () {
        router.back()
    }
}

3. 打开index文件夹下的任意一个文件，点击预览器中的

按钮进行刷新。效果如下图所示：

使用真机运行应用

1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
2. 点击File>Project Structure…>Project>Signing Configs界面勾选“Automatically generate signature”，等待自动签名完成即可，点击“OK”。如下图所示：

3. 在编辑窗口右上角的工具栏，点击

按钮运行。效果如下图所示：

恭喜您已经使用JS语言开发（FA模型）完成了第一个OpenHarmony应用，快来​​探索更多的OpenHarmony功能​​吧。

相关实例

针对使用JS语言开发（FA模型），有以下相关实例可供参考：

• ​​JsHelloWorld：你好世界（JS）（API8）​​

资源分类与访问

应用开发过程中，经常需要用到颜色、字体、间距、图片等资源，在不同的设备或配置中，这些资源的值可能不同。

• 应用资源：借助资源文件能力，开发者在应用中自定义资源，自行管理这些资源在不同的设备或配置中的表现。
• 系统资源：开发者直接使用系统预置的资源定义（即​​分层参数​​，同一资源ID在设备类型、深浅色等不同配置下有不同的取值）。

资源分类

resources目录

应用开发中使用的各类资源文件，需要放入特定子目录中存储管理。resources目录包括三大类目录，一类为base目录，一类为限定词目录，还有一类为rawfile目录。stage模型多工程情况下共有的资源文件放到AppScope下的resources目录。

base目录默认存在，而限定词目录需要开发者自行创建。应用使用某资源时，系统会根据当前设备状态优先从相匹配的限定词目录中寻找该资源。只有当resources目录中没有与设备状态匹配的限定词目录，或者在限定词目录中找不到该资源时，才会去base目录中查找。rawfile是原始文件目录，不会根据设备状态去匹配不同的资源。

资源目录示例：

resources
|---base  // 默认存在的目录
|   |---element
|   |   |---string.json
|   |---media
|   |   |---icon.png
|---en_GB-vertical-car-mdpi // 限定词目录示例，需要开发者自行创建   
|   |---element
|   |   |---string.json
|   |---media
|   |   |---icon.png
|---rawfile

表1 resources目录分类

限定词目录

限定词目录可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。开发者在创建限定词目录时，需要掌握限定词目录的命名要求，以及限定词目录与设备状态的匹配规则。

限定词目录的命名要求

• 限定词的组合顺序：_移动国家码_移动网络码-语言_文字_国家或地区-横竖屏-设备类型-颜色模式-屏幕密度_。开发者可以根据应用的使用场景和设备特征，选择其中的一类或几类限定词组成目录名称。
• 限定词的连接方式：语言、文字、国家或地区之间采用下划线（_）连接，移动国家码和移动网络码之间也采用下划线（_）连接，除此之外的其他限定词之间均采用中划线（-）连接。例如：zh_Hant_CN、zh_CN-car-ldpi。
• 限定词的取值范围：每类限定词的取值必须符合限定词取值要求表中的条件，否则，将无法匹配目录中的资源文件。

表2 限定词取值要求

限定词目录与设备状态的匹配规则

• 在为设备匹配对应的资源文件时，限定词目录匹配的优先级从高到低依次为：移动国家码和移动网络码 > 区域（可选组合：语言、语言_文字、语言_国家或地区、语言_文字_国家或地区）> 横竖屏 > 设备类型 > 颜色模式 > 屏幕密度。
• 如果限定词目录中包含移动国家码和移动网络码、语言、文字、横竖屏、设备类型、颜色模式限定词，则对应限定词的取值必须与当前的设备状态完全一致，该目录才能够参与设备的资源匹配。例如，限定词目录“zh_CN-car-ldpi”不能参与“en_US”设备的资源匹配。

资源组目录

base目录与限定词目录下面可以创建资源组目录（包括element、media、profile），用于存放特定类型的资源文件，详见资源组目录说明。

表3 资源组目录说明

媒体资源类型说明

表4 图片资源类型说明

表5 音视频资源类型说明

资源文件示例

color.json文件的内容如下：

{
    "color": [
        {
            "name": "color_hello",
            "value": "#ffff0000"
        },
        {
            "name": "color_world",
            "value": "#ff0000ff"
        }
    ]
}

float.json文件的内容如下：

{
    "float":[
        {
            "name":"font_hello",
            "value":"28.0fp"
        },
	{
            "name":"font_world",
            "value":"20.0fp"
        }
    ]
}

string.json文件的内容如下：

{
    "string":[
        {
            "name":"string_hello",
            "value":"Hello"
        },
	{
            "name":"string_world",
            "value":"World"
        },
	{
            "name":"message_arrive",
            "value":"We will arrive at %s."
        }
    ]
}

plural.json文件的内容如下：

{
    "plural":[
        {
            "name":"eat_apple",
            "value":[
                {
                    "quantity":"one",
                    "value":"%d apple"
                },
                {
                    "quantity":"other",
                    "value":"%d apples"
                }
            ]
        }
    ]
}

资源访问

应用资源

创建资源文件

在resources目录下，可按照限定词目录和资源组目录的说明创建子目录和目录内的文件。

同时，DevEco Studio也提供了创建资源目录和资源文件的界面。

• 创建资源目录及资源文件
  在resources目录右键菜单选择“New > Resource File”，此时可同时创建目录和文件。文件默认创建在base目录的对应资源组下。如果选择了限定词，则会按照命名规范自动生成限定词+资源组目录，并将文件创建在目录中。图中Avaliable qualifiers为供选择的限定词目录，通过右边的小箭头可添加或者删除。File name为需要创建的文件名，Resource type为资源组类型，默认是element。Root Element为资源类型。创建的目录名自动生成，格式固定为“限定词.资源组”，例如：创建一个限定词为dark的element目录，自动生成的目录名称为“dark.element”。

• 创建资源目录

在resources目录右键菜单选择“New > Resource Directory”，此时可创建资源目录。资源目录创建的是base目录，也可根据需求创建其它限定词目录。确定限定词后，选择资源组类型，当前资源组类型支持Element、Media、Profile三种，创建后自动生成目录名称。

• 创建资源文件

在资源目录的右键菜单选择“New > XXX Resource File”，即可创建对应资源组目录的资源文件。例如，在element目录下可新建Element Resource File。

访问应用资源

在工程中，通过​​"$r('app.type.name')"​​的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。

引用rawfile下资源时使用​​"$rawfile('filename')"​​的形式，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。

说明：

资源描述符不能拼接使用，仅支持普通字符串如​​'app.type.name'​​。

​​$r​​​返回值为Resource对象，可通过​​getStringValue​​ 方法获取对应的字符串。

在xxx.ets文件中，可以使用在resources目录中定义的资源。结合​​资源组目录​​中的“资源文件示例”，资源使用示例如下：

Text($r('app.string.string_hello'))
  .fontColor($r('app.color.color_hello'))
  .fontSize($r('app.float.font_hello'))

Text($r('app.string.string_world'))
  .fontColor($r('app.color.color_world'))
  .fontSize($r('app.float.font_world'))

// 引用string.json资源，$r的第二个参数用于替换%s，value为"We will arrive at five of the clock"。
Text($r('app.string.message_arrive', "five of the clock"))
  .fontColor($r('app.color.color_hello'))
  .fontSize($r('app.float.font_hello'))

// 引用plural$资源，第一个指定plural资源，第二个参数指定单复数的数量quantity，此处第三个数字为对%d的替换
// 单数下value为"5 apple"，复数下value为"5 apples"。
Text($r('app.plural.eat_apple', 5, 5))
  .fontColor($r('app.color.color_world'))
  .fontSize($r('app.float.font_world'))

Image($r('app.media.my_background_image'))  // media资源的$r引用

Image($rawfile('test.png'))                 // rawfile$r引用rawfile目录下图片

Image($rawfile('newDir/newTest.png'))       // rawfile$r引用rawfile目录下图片

系统资源

系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。

开发者可以通过​​“$r('sys.type.resource_id')”​​的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。

可以查看​​应用UX设计中关于资源的介绍​​，获取OpenHarmony支持的系统资源ID及其在不同配置下的取值。

说明：

• 仅声明式开发范式支持使用系统资源，类Web开发范式不支持。
• 可以查看​​OpenHarmony/resources代码仓​​了解系统预置资源的实现，这里的目录结构与工程中的resources目录类似，也是通过资源限定词匹配不同的设备或设备状态。
• 系统资源的使用场景、id、参数详细对照表详见​​OpenHarmony_系统资源分层设计表_V1.0.xlsm​​

Text('Hello')
  .fontColor($r('sys.color.ohos_id_color_emphasize'))
  .fontSize($r('sys.float.ohos_id_text_size_headline1'))
  .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
  .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))

Image($r('sys.media.ohos_app_icon'))
  .border({
    color: $r('sys.color.ohos_id_color_palette_aux1'),
    radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2
  })
  .margin({
    top: $r('sys.float.ohos_id_elements_margin_horizontal_m'),
    bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')
  })
  .height(200)
  .width(300)

相关实例

针对访问应用资源，有以下相关实例可供参考：

• ​​ResourceManager：资源管理器（ArkTS）（API8）​​

文章转载自：​​https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/quick-start/resource-categories-and-access.md/​​