HarmonyOS NEXT系列之元服务框架ASCF

元服务ASCF框架

• 〇、前言
• [一、认识 ASCF 项目](#一、认识 ASCF 项目)
• • 1、工程目录结构
  • [2、ascf_src 目录](#2、ascf_src 目录)
  • • [2.1、pages 子目录](#2.1、pages 子目录)
    • • 2.1.1、HXML
      • 2.1.2、CSS
      • 2.1.3、js
      • 2.1.4、json
    • [2.2、component 子目录](#2.2、component 子目录)
  • [3、rawfile 目录](#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>

3、rawfile 目录

仔细看 ASCF 项目的 entry/src/main/resources/rawfile，就会发现和 ascf_src 目录存在映射关系，实际上，rawfile 中的内容就是 ascf_src 目录的打包：

4、部署运行

ASCF 项目就是 HarmonyOS NEXT 元服务项目，而元服务是一种轻量的应用，支持免安装运行，使用真机部署的情况下，跟app一样需要配置上签名证书。

在我自己的手机部署后，page 中使用的按钮都能正常捕获到点击事件，而自定义组件中的按钮却捕获不到，目前还不清楚具体为什么。

三、总结

ASCF 框架，总体上与 Vue 等前端框架比较类似，因此，对于习惯 WebApp 的开发者来说，使用 ASCF 框架开发元服务，要比使用 ArkTS 开发元服务更容易上手，但代价就是失去了 ArkTS 的简洁------在我看来，ASCF 就是将 ArkTS 一拆四，用四个脚本文件去完成页面实现。