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

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}}\">   图片轮播  <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\">  <view class=\"swiper-item\" bindtap=\"showZtsj\" data-i=\"{{i}}\"> <cropImg src=\"{{base_url + t}}\" width=\"686\" height=\"380\" img-class=\"qj\">       <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=\'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 class=\'backIcon\' src=\'../../../tab_imgs/IconBlackLeft.png\' style=\"\" has:if=\"{{title==\'\' && iconColor == \'black\'}}\">  <view class=\"btn-back\" style=\"color:{{titleColor}}\">{{title}}  //在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使用公共组件

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

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项目到鸿蒙