鸿蒙 NEXT 开发浅进阶到精通 02: 鸿蒙 ASCF 框架适配

作者：彭不懂赶紧问

2025-06-13
江苏
本文字数：3337 字
阅读完需：约 11 分钟

ASCF 框架是什么？

ASCF（Atomic Service Cross Framework）是元服务为小程序生态定制的一套解决方案，能够使用类似于小程序的开发技术，高效开发元服务。

专门用来将类小程序的项目代码包，快速转化为能上架鸿蒙应用市场的元服务，但编译后的代码受鸿蒙和微信小程序方面的影响，部分功能和 API 需要使用 ASCF 框架里提供的 API 进行替换适配，理论上可以快速上架鸿蒙应用市场。

ASCF 框架开发页面与逻辑中的基本使用场景

（主要与鸿蒙 ARKTS 和 web 前端开发做对比）

0-ASCF 项目的基本工程目录和 git 管理

所有的代码都在 ascf 文件夹中使用类 web 语言的 hxml css js 进行开发，运行时编辑器会自动编译到鸿蒙 entry 模块目录的 rawfile 文件夹中，再运行到 next 系统的真机中。

因此这种模式在 git 管理中，会生成很多编译后的新文件，在提交中仅勾选 ascf 目录下的更改即可，注意配置 git 的.gitignore 文件不建议使用通配符对 entry 目录进行忽略。

1-路由跳转和传参

has.navigateTo({ url: '/page/path/path?key=1', success(res) { console.log('success: ', res); }, fail(res) { console.log('fail: ', res); }, complete(res) { console.log('complete: ', res); } });

复制代码

目标页面的接参与加载（在目标页面的 js 文件中生命周期函数接参）

onLoad: function (options) { const list = options.key const index = options.currentIndex console.log('pkl---key', key); //状态变量赋值和页面渲染 this.setData({ imgList: list, currentIndex: options.currentIndex }) }

复制代码

2-状态变量赋值和页面渲染

js 文件中相应需要改变页面内值的逻辑处，使用 this.setData 让页面刷新

3-层叠容器。列表容器、轮播图、点击事件

层叠容器。列表容器可主要参考 web 开发，注意 web 中的 div 标签在 ascf 中为 view 标签

轮播图、点击事件 bindtap，可参考 ASCF 文档中的示例

4-嵌套容器中的事件冲突处理-冒泡和捕捉

在多层盒子模型下，父子组件嵌套，如果都绑定有事件或函数，要考虑事件捕获的影响

5-for 循环-if 判断的使用

<block has:if="{{imags_list.length > 0}}"> <view class="bt20"></view> <view class="exhibit"> <view class="exhibit-title">图片轮播</view> <view class="swiper_box"> <swiper indicator-dots="{{indicatorDots}}" class="qj-wrapper" autoplay="{{autoplay}}" bindchange="changeSwiper" autoplay="{{ true }}" circular="{{ true }}" interval="{{'4000'}}" duration="{{'600'}}" indicator-color="rgba(255, 255, 255, .5)" indicator-active-color="#ffffff"> <block has:for="{{exDatas.ext_group_imags_list}}" has:for-item="t" has:for-index="i" has:key="ext_group_imags_list"> <swiper-item> <view class="swiper-item" bindtap="showZtsj" data-i="{{i}}"> <cropImg src="{{base_url + t}}" width="686" height="380" img-class="qj"> </cropImg> </view> </swiper-item> </block> </swiper> </view> </block>

<block has:if="{{imags_list.length > 0}}">

复制代码

6-生命周期函数

7-封装公共组件的复用

一些公共组件，在很多页面都能用到，比如开启沉浸式页面时，与胶囊相对的左侧返回按钮就不出现了，我们可做一个公用的导航组件来使用。mineNav 组件：

7.1 声明此项为组件

//mineNav.json文件中声明此项为组件，则在其他页面中使用mineNav时，直接使用mineNav标签即可，无需导入 { "component": true}

复制代码

7.2 写组件内容和样式与 js 逻辑，与页面相同，

如果有需要传参数，比如导航组件的标题，不同地方引用时，传入标题值或背景色

//mineNav.hxml（部分 代码） 对于变量值使用{{}}直接写在hxml，但需要在js中定义该值 <view class="flex-box"> <view class="left"> <view class='backIconBox {{iconColor == "black"?"blackBox":""}}' style="" has:if="{{title==''}}" bindtap="navBack" > <image class='backIcon' src='../../../tab_imgs/backIcon.png' style="color: {{iconColor}};" has:if="{{title=='' && iconColor == 'white'}}"></image> <image class='backIcon' src='../../../tab_imgs/IconBlackLeft.png' style="" has:if="{{title=='' && iconColor == 'black'}}"></image> </view> <view class="btn-back" style="color:{{titleColor}}">{{title}}</view> </view> //在js中定义该值 properties: { bgURL:String, title:String, titleColor:String, bkgc:String, iconColor:String, iconboxColor:String, }

//mineNav.js Component({ /** * 组件的属性列表 */ properties: { bgURL:String, title:String, titleColor:String, bkgc:String, iconColor:String, iconboxColor:String, }, /** * 组件的初始数据 */ data: { navBarHeight: 0 }, ready() { const sysInfo = wx.getSystemInfoSync(); this.setData({ navBarHeight: sysInfo.statusBarHeight }); }, /** * 组件的方法列表 */ methods: {}, navBack(){ has.navigateBack() } })

复制代码

7.3 使用公共组件

在需要引入的页面中使用标签和传对应参数即可

<mineNav bgURL="" title="" bkgc="white" iconboxColor="" iconColor='black'></mineNav>

复制代码

ASCF 框架的优点是什么？

1-编译后端代码与 web 语言（html css js）相似，即 hxml 、css 和 js 来进行页面的开发和逻辑处理，对于 web 前端开发人员可以快速上手。并且让新项目有了很可观的代码基础与逻辑交互基础。

2-在项目开发中配置调试包和 realse 包的签名信息和鸿蒙一致，AGC 平台操作一致。

3-简化了权限授权申请的代码，如位置、蓝牙、摄像头、日历等。使用 has.authorize 和 has.openSetting 配合即可配置授权申请和第一次申请被拒绝跳转设置页进行手动授权等逻辑。相关权限依旧在鸿蒙目录里的 module.json5 文件中配置，同原生鸿蒙。

4-基本的移动应用开发相关的能力具备，如页面和组件的生命函数齐全、网络请求，获取手机相关能力、相册照片选择、页面路由、华为静默登陆，账号手机号授权等。

5-css 对页面进行装饰和布局 80%的比例可借鉴 web 中的 css 语法，在实际开发中可参考前端的 MDN 文档，不分逻辑和 css 可在豆包等 AI 中提问，提问时加上“在 web 开发 css js html 框架如何实现一个层叠容器-盒子”，给出的答案有很高的参考性，结合 ASCF 文档中的 API 大多数基本布局和逻辑可实现。

6-沉浸式页面开发，配置简便，避开上下安全区快捷简单

在应用及app。json中配置开启，或某个页面的json文件内开启navigationStyle为custom { "pages": ["page/index/index"], "window": { "navigationStyle": "custom", } } //页面中最外层盒子设置padding值，ASCF自带函数env获取状态栏高度和底部导航栏高度 .css_body { padding-bottom: env(safe-area-inset-bottom); padding-top: env(safe-area-inset-top); }

复制代码

7-原生智能特性：基于 HarmonyOS，开发出的元服务具备原生智能特性，可更好地与系统的智能功能相结合，例如全域搜索等，为用户提供更智能的服务体验。

8-生态与技术优势利用 JS 生态：可以利用部分现有的 JavaScript 生态工具和库，丰富了开发资源，减少了开发过程中重复造轮子的工作。

ASCF 框架的缺点点是什么？

1-渲染能力差，后台请求的数据已经打印，但页面渲染较慢

2-编辑器无智能提示相关属性，装上 dev 编辑器插件后仅多了代码高亮，增加了些可读性

3-无懒加载相关 API，数据量比较大的列表渲染时性能体现较差

4-相对于 web 语言开发和 arkts，选中元素后不可对齐进行注入操作，开发 web-view 组件打开网页，可注入网页相关设置页面时不可对内部进行注入修改，在 ASCF 开发中 js 文件通过类或 id 选择器可选中 hxml 文件中的指定元素，但仅能获得该元素的节点信息，即长宽高和布局相关的信息。而 web 开发中在 js 文件内可通过 document+类选择器或 id 选择其获取 html 中元素，并对其进行注入操作，如 innerHTML 在其对应处增加富文本内容和选中元素对象.style.display = 'none'来控制这个盒子的显示与隐藏。

5-无三方库组件和其他 web 框架进行开发如 vue 框架等，还处于比较原始的 js 代码时代。

6-textarea 组件无法修改背景色、image 组件，，没有占位图 alt 属性，资源为 svg 格式图片不能进行 fill 填充颜色。

7-不支持断点调试，不支持模拟器运行

8-暂无音频播放能力（华为支持正在开发相关能力）

如果你有 uniapp 开发或者小程序开发经验，则可以很快上手 ASCF 框架，快速适配 UniAPP 项目到鸿蒙

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/33ece0af129b684d29e508533】。文章转载请联系作者。

彭不懂赶紧问

关注

偶尔看书钓鱼喝酒打游戏，偶尔敲demo看API 2025-05-31 加入

鸿蒙开发者达人

发布

暂无评论

创作场景

鸿蒙 NEXT 开发浅进阶到精通 02: 鸿蒙 ASCF 框架适配

ASCF 框架是什么？

ASCF 框架开发页面与逻辑中的基本使用场景

（主要与鸿蒙 ARKTS 和 web 前端开发做对比）

0-ASCF 项目的基本工程目录和 git 管理

1-路由跳转和传参

2-状态变量赋值和页面渲染

3-层叠容器。列表容器、轮播图、点击事件

4-嵌套容器中的事件冲突处理-冒泡和捕捉

5-for 循环-if 判断的使用

6-生命周期函数

7-封装公共组件的复用

7.1 声明此项为组件

7.2 写组件内容和样式与 js 逻辑，与页面相同，

7.3 使用公共组件

ASCF 框架的优点是什么？

ASCF 框架的缺点点是什么？

彭不懂赶紧问

评论