修改index.css.container{width:100%;高度：100%；弹性方向：列；证明内容：居中；对齐项目s:center;}.title{width:200px;字体大小：30px；文本对齐：居中；}.content{宽度：200px；字体大小：30px；文本对齐：居中；}.rowcontainer{宽度：100%；高度：50%；弹性方向：行；证明内容：居中；align-items:center;}修改index.jsvarled={open:1,close:0,change:2}importappfrom'@system.app';exportdefault{data:{title:"",statu:'0'},onInit(){this.title=this.$t('strings.world');},ledon(e){letthat=thisconsole.info("ledon")app.ledcontrol({code:led.open,success(res){that.statu=res.led_status},fail(res,code){console.error("ledonerror")},complete(){console.info("ledoncomplete")}})},ledoff(e){letthat=thisconsole.info("ledoff")app.ledcontrol({code:led.close,success(res){that.statu=res.led_status},fail(res,code){console.error("ledofferror")},complete(){console.info("ledoff完成")}})},ledtoggle(e){letthat=thisconsole.info("ledtoggle")app.ledcontrol({code:led.change,success(res){that.statu=res.led_status},fail(res,code){console.error("ledtogglefailed")},complete(){console.info("ledtogglecomplete")}})},exit(e){app.terminate()},}预览代码编译成hap包：点击编辑器左下角的OhosBuildVarilants，打开编译模式选择视图，编译模式分为debug和release，选择release模式；点击Build->BuildHap(s)/App(s)->BuildHap(s)，系统会开始自动将代码编译成hap包，等待下方BuildOutput没有编译错误，表示代码编译完成，添加了JS的API接口。在app_module.h里增加接口JSI::SetModuleAPI(exports,"ledcontrol",AppModule::ToggleLed);在app_module.cpp里增加接口实现#include"hdf_sbuf.h"#include"hdf_io_service_if.h"#defineLED_WRITE_READ1#defineLED_SERVICE"hdf_led"......staticintOnDevEventReceived(void*priv,uint32_tid,structHdfSBuf*data){uint32_t值；HdfSbufReadUint32（数据，&值）；HILOG_ERROR(HILOG_MODULE_ACE,"%s:收到开发事件:%u%u\n",(char*)priv,id,value);returnHDF_SUCCESS;}staticintGpioWriteRead(structHdfIoService*serv,int32_teventData,int32_t*val){intret=HDF_FAILURE;结构HdfSBuf*数据=HdfSBufObtainDefaultSize();结构HdfSBuf*回复=HdfSBufObtainDefaultSize();if(data==NULL||reply==NULL){HILOG_ERROR(HILOG_MODULE_ACE,"获取sbuf数据失败\n");返还；}if(!HdfSbufWriteUint8(data,(uint8_t)eventData)){HILOG_ERROR(HILOG_MODULE_ACE,"写入sbuf失败\n");HdfSBuf回收（d阿塔）；HdfSBufRecycle（回复）；返还；}ret=serv->dispatcher->Dispatch(&serv->object,LED_WRITE_READ,data,reply);if(ret!=HDF_SUCCESS){HILOG_ERROR(HILOG_MODULE_ACE,"发送服务调用失败\n");HdfSBuf回收（数据）；HdfSBufRecycle（回复）；返还；}if(!HdfSbufReadInt32(reply,val)){HILOG_ERROR(HILOG_MODULE_ACE,"未能获得服务调用回复\n");ret=HDF_ERR_INVALID_OBJECT；HdfSBuf回收（数据）；HdfSBufRecycle（回复）；返还；}HILOG_ERROR(HILOG_MODULE_ACE,"获取回复为：%d\n",val);HdfSBuf回收（数据）；HdfSBufRecycle（回复）；returnret;}JSIValueAppModule::ToggleLed(constJSIValuethisVal,constJSIValue*args,uint8_targsNum){HILOG_ERROR(HILOG_MODULE_ACE,"ledbuttonpressed.");结构HdfIoService*serv=HdfIoServiceBind(LED_SERVICE);如果（serv==NULL）{HILOG_ERROR（HILOG_MODULE_ACE,"获取service2%s\n",LED_SERVICE);返回JSI::CreateUndefined();}if((args==nullptr)||(argsNum==0)||(JSI::ValueIsUndefined(args[0]))){returnJSI::CreateUndefined();}JSIValue成功=JSI::GetNamedProperty(args[0],CB_SUCCESS);JSIValue失败=JSI::GetNamedProperty(args[0],CB_FAIL);JSIValuecomplete=JSI::GetNamedProperty(args[0],CB_COMPLETE);int32_tnum=(int32_t)JSI::GetNumberProperty(args[0],"代码");int32_treplyData=0;if(GpioWriteRead(serv,num,&replyData)){HILOG_ERROR(HILOG_MODULE_ACE,"发送事件失败\n");JSI::CallFunction(fail,thisVal,nullptr,0);JSI::CallFunction(complete,thisVal,nullptr,0);JSI::ReleaseValueList（成功、失败、完成）；返回JSI::CreateUndefined();}JSIValue结果=JSI::CreateObject();JSI::SetNumberProperty(结果,"led_status",replyData);JSIValueargv[ARGC_ONE]={结果};JSI::CallFunction(成功,thisVal,argv,ARGC_ONE);JSI::CallFunction(complete,thisVal,nullptr,0);JSI::ReleaseValueList（成功、失败、完成、结果）；HdfIoServiceRecycle（服务）；returnJSI::CreateUndefined();}添加HDF头文件路径ace_lite_include_dirs+=[..."//drivers/framework/ability/sbuf/infoundation\ace\ace_engine_lite\ace_lite.gniinclude","//drivers/framework/include/core","//drivers/framework/include/utils","//drivers/adapter/uhdf/posix/include",]添加编译依赖并修改foundation\ace\ace_engine_lite\frameworks\BUILD.gn，添加public_deps"//drivers/adapter/uhdf/manager:hdf_core"中的如下代码，修改foundation\ace\ace_engine_lite\test\ace_test_config.gni，在extra_deps中添加如下代码"//drivers/adapter/uhdf/manager:hdf_core》，总结了基于类JS扩展的Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三阶段开发方式，使用HML标签文件进行布局构建，使用CSS文件进行Style描述，使用JavaScript文件进行逻辑处理。UI组件和数据之间的关系是通过单向数据绑定建立的。当数据发生变化时，UI界面自动触发更新。这种开发方式更贴近Web前端开发者的使用习惯，可以快速将已有的Web应用转化为方舟开发框架应用。主要适用于界面比较简单的中小型应用程序的开发；通过appmodule调用framework层接口，再通过framework接口调用hdf接口。这样，我们就有了自己的驱动和配置。在后面的章节中，我们将讨论如何在hap应用程序中调用驱动程序接口。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。