当前位置：首页 > web >正文

HarmonyOS NEXT系列之元服务框架ASCF

web 2025/8/25 13:59:47

元服务ASCF框架

〇、前言
一、认识 ASCF 项目
- 1、工程目录结构
- 2、ascf_src 目录
- - 2.1、pages 子目录
  - - 2.1.1、HXML
    - 2.1.2、CSS
    - 2.1.3、js
    - 2.1.4、json
  - 2.2、component 子目录
- 3、rawfile 目录
- 4、部署运行
三、总结

〇、前言

在这里插入图片描述
在鸿蒙开发者平台下载中心页面，自下半年开始，多了一个 ASCF plugin的下载项，这是一个 DevEco Studio 插件，而该插件的主要作用就是让 IDE 支持使用 ASCF 框架进行元服务开发，并引入相应的项目模板：

一、认识 ASCF 项目

下面从工程目录结构、页面实现和编译运行三个方面入手，对 ASCF 项目进行认识。

1、工程目录结构

在这里插入图片描述
与普通的 HarmonyOS NEXT 项目相比，ASCF 项目明显多了一个 ascf 目录，同时，entry 模块的 resources 目录下的 rawfile 目录下内容与 ascf 目录中的内容很相似，而实际上这两者也是相互关联的。

2、ascf_src 目录

在 ASCF 框架中，真正的源码目录不再是 entry 模块的 src 目录，而是 ascf_src 目录，之所以这样说，只需浏览下 entry/src/main/ets/pages/Index.ets 中的内容：
在这里插入图片描述
就知道真正描述页面实现的代码，已经不在此处。

ascf_src 目录分为 pages 目录和 component 目录，以及app.js 和 app.json 文件，app.json 文件是配置文件，控制的是应用级别的配置；app.js 文件存放实现应用级别功能逻辑的 js 代码；pages 目录下每个子目录对应一个应用页面，子目录名称通常与页面名称保持一致，如起始页 index；component 下的子目录对应一个自定义 Component。

pages 子目录和 component 子目录，两者中的内容都是有 .hxml、.css、.js 和 .json 组成。

2.1、pages 子目录

以 index 页面对应 index 目录为例，讲解 ASCF 框架中如何实现一个应用页面。

pages 子目录不是随意创建的，它是根据 entry 模块 pages 目录中定义的 pages 去扩展的，或者说，在 entry 模块的 main_pages.json 文件中定义了几个页面，ascf/ascf_src/pages 中就可以创建几个子目录：
在这里插入图片描述
而 ascf/ascf_src/app.json 文件中定义的 URL，也需要保持一致：

一个 ASCF Page 由 hxml、CSS、js 和 json 共同实现，具体作用如下：

2.1.1、HXML

首先，看一下 HXML 文件的内容：

<view class="content"><text class="title">{{ message }}</text><view class="btn_container"><button class="btn_black" bindtap="showToast"><text>按钮</text></button></view><view class="btn_container"><button class="btn_black" bindtap="newtPage"><text>Next</text></button></view><view><testComponent><view>这里是插入到组件slot中的内容</view></testComponent></view>
</view>

可以看出，HXML 与 HTML 类似，通过元素标签进行视图内容的构建，因此，可以看作是页面结构的描述文件。

2.1.2、CSS

ASCF 框架中的 CSS 文件，跟一般的 Web 项目或者说 H5 项目的 CSS 文件一样，就是层叠样式表：

.content {padding: 100rpx 0;text-align: start;
}.title {font-size: 72rpx;color: #000000;font-weight: 600;
}page {height: 100%;width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;
}.btn_container {width: 100%;height: 80rpx;margin-top: 20rpx;ddisplay: flex;flex-direction: row;align-items: center;justify-content: center;text-align: center;
}
.btn_black {background-color: #000000;color: #ffffff;width: 180rpx;height: 100%;text-align: center;
}

也所以，CSS 文件理所当然就是页面样式的描述文件。

2.1.3、js

index.js 文件，实际上就是 index 页面的交互逻辑的描述文件：

Page({data: {message: '这里是第一页',},showToast: function(event) {has.showToast({title: '点击了按钮',duration: 5000,})},myEventListener(e){console.log(e.detail) // 自定义组件触发事件时提供的detail对象},newtPage(){has.navigateTo({url: "/pages/second/second",success(res) {console.log('success: ', res);},fail(res) {console.log('fail: ', res);},complete(res) {console.log('complete: ', res);}});}
});

如果是自定义 Component，那么 js 脚本中最外层就是 Component：
在这里插入图片描述

2.1.4、json

json 文件就是对应页面或自定义组件的配置文件，对于 page 类型的 json 文件，内容通常如下：

{"navigationBarTitleText": "Home","usingComponents": {"testComponent": "../../components/testComponent/testComponent"}
}

navigationBarTitleText 设置页面标题，usingComponents 用于引入在页面中要使用的自定义组件。

2.2、component 子目录

component 和 page 一样也是由 hxml、CSS、js 和 json 共同组成，而成为 component，除了 js 中要使用 component 函数外，json 文件必须写上代码语句：

{ "component": true}

之后，剩下的跟 page 没有太大区别，比如 testComponent.hxml：

<view class="content"><view><text>下面是组件内部节点：</text></view><text class="title">{{msg}}</text><view class="btn_container"><button class="btn_black" bindTap="tapTestComponent"><text>{{btnText}}</text></button></view><view><text>下面是传入组件的外部节点：</text></view><slot></slot>
</view>