了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言了解OpenHarmony可以开发一些简单的OpenHarmony应用1.了解OpenHarmonyOpenHarmony是由OpenAtom基金会孵化和运营的开源项目。其目标是构建面向全场景、全连接、全智能时代的智能终端设备操作系统框架和平台，推动万物互联产业的繁荣发展。OpenAtomOpenSourceFoundation：由阿里巴巴、百度、华为、浪潮、360、腾讯、招商银行共同发起的非营利组织，成立于2020年6月。为各类开源项目提供各种支持OpenAtomOpenSource该基金会是中国大陆第一家开源基金会。成立于2020年6月，由阿里巴巴、百度、华为、浪潮、360、腾讯、招商银行等企业联合发起。是中华人民共和国民政部注册成立的非营利性独立法人实体。基金会涵盖OpenHarmony、TecentOSTiny、AliOShings、UBLM、TKEstack、XuperChain等项目。)和HarmonyOS有什么关系？据华为介绍，HarmonyOS是基于OpenHarmony开发的商用版本，如下右图所示Show2.ArkUI框架ArkUI框架也称为方舟开发框架。该框架提供了应用程序UI开发的必要能力，如各种组件、布局计算、动画能力、UI交互、绘图等。该框架提供了基于TS扩展（简称eTS）的声明式开发范式和基于JS扩展（简称JS）的类Web开发范式。以下是两种范式的简要比较。开发范式名称介绍类Web开发范式采用经典的HML、CSS、JavaScript三阶段开发方式。HML标签文件用于布局构建，CSS文件用于样式描述，JavaScript文件用于逻辑处理。声明式开发范式采用TS语言和声明式UI语法扩展，从组件、动态效果和状态管理三个维度提供UI绘制能力。选择带有类型注解的TS语言，引入编译时类型校验。框架结构与类JSWeb开发ParadigmeTS相比不需要JSFramework进行页面DOM管理，渲染更新环节更精简，性能更好。在开发大型应用时，推荐使用eTS进行开发。TypeScriptTypeScript是JavaScript的超集，支持ECMAScript6标准。本节将简要介绍TS和JS的主要区别。更多内容可以前往：TypeScript官网。类型提示TypeScript的核心功能是它的类型系统。在TypeScript中，您可以使用类型提示来识别变量或参数的数据类型。使用类型提示，您可以描述对象的形状，从而提供更好的文档并使TypeScript能够验证代码是否正常工作。通过静态类型检查，TypeScript可以在开发早期发现代码问题，而JavaScript通常要等到代码在浏览器中运行时才能发现。letname:string='Sanmu'//声明一个String类型的变量名，初始值为'Sanmu'letisVisible=false//声明一个puppet类型的变量isVisible，初始值为false//关节类型function(param:string|number):boolean{returntrue}function(param:number):void{}//定义一个枚举enumType{WALK,SUBWAY,CAR}ClassTS是面向对象的语言，使用class关键字声明一个类，该类可以包含变量、结构和方法，示例如下：typeofage==='string'){this.age=Number.parseInt(age)}else{this.age=age}}sayAge(){console.log('Age:'+this.age)}}3.在开发环境Studio中搭建并安装DevEco。IDE3.0Beta4支持HarmonyOS和OpenHarmonOS应用开发，提供信息中心InfoCenterView->ToolWindows->InfoCenter，可以快速获取应用开发资源。使用IDEBeta4打开老版本创建的工程出现白屏问题，估计是新版本编译服务器版本变化所致，只推荐使用Beta4开发新工程。配置SDK。配置hdc环境变量，HarmonyOShdc和OpenHarmonyhdc不兼容（可选）。4、使用JS语言开发创建OpenHarmony项目，选择JS语言，从下面的目录结构可以看出OpenHarmony应用项目与HarmonyOS应用项目没有太大区别，主要有两点不同：构建工具有从gradle改成了hvigor，这个对于我们的应用开发基本不受影响。OpenHarmony应用项目的src/main目录下没有java目录。JS项目目录结构JS.Project.tree│build-profile.json5#项目配置文件，确认编译API版本、签名信息、包含模块的配置等│hvigorfile.js#项目级编译构建任务脚本│local.properties#本地配置文件│package-lock.json│package.json├─.hvigor#编译构建脚本生成目录├─entry#主模块││build-profile.json5││hvigorfile.js#模块级编译构建任务脚本││package-lock.json││package.json│└─src#源码目录│├─main#源码入口││├─js│││└─MainAbility#Ability│││app.js#能力入口│││├─i18n#国际语言目录│││en-US.json││││zh-CN.json│││└─pages#jsPage目录│││└─index#首页page│││index.css│││index.hml│││index.js│││config.json#模块配置文件，声明了Ability的属性，使用的隐私权限等配置││└─resources#模块资源目录，存放config.json中引用的资源文件│└─ohosTest#单元测试└─node_modules#节点模块依赖配置签名，打开项目配置页面，选择Project->SigningCOnfig->OK，完成自动签名编写逻辑代码，JS语法类似于网页，请参考示例。运行调试，首先连接设备（需要先开启开发者模式），点击运行->运行入口，即可在设备上自动编译安装并启动hap。5.使用eTS语言开发eTS项目目录结构eTs.Project.tree│build-profile.json5#项目级配置文件，确认编译API版本，签名信息，包含模块等配置│hvigorfile.js#Project-级编译构建任务Script│local.properties#本地配置文件│package-lock.json│package.json├─.hvigor#编译构建脚本生成目录├─AppScope#应用全局配置信息├─entry#主模块││.gitignore││build-profile.json5││hvigorfile.js#模块级编译构建任务脚本││package-lock.json││package.json│└─src#源码目录│├─main#源码entry││├─ets#ets源码入口│││├─Application#Stage目录，一个模块只有一个││││MyAbilityStage.ts#模块运行入口，继承自AbilityStage，持有AbilityStageContext对象│││├─MainAbility#技能目录││││MainAbility.ts│││└─pages#Ability包含的页面│││index.ets#具体页面│││module.json5#模块配置文件，同HarmonyOSFA项目config.json文件，声明了Ability的属性，使用的隐私权限和其他配置││└─resources#模块资源目录，存放图片颜色字符串等资源│└─ohosTest#单元测试└─node_modules#节点模块依赖UI组件生命周期UI组件生命周期，通常包括创建和销毁可见和不可见，以满足UI开发需求，UI框架会在页面创建和销毁前通过回调函数将eTSUI组件生命周期函数通知给UI组件。回调函数说明如下。结构和函数将在初始渲染期间执行。此外，当组件中的状态发生变化时，会再次执行build方法。AboutToDisappearUI组件在销毁前被调用，经常在函数下处理资源释放onPageShow页面显示回调，只有@Entry修饰的组件有效onPageHide页面不可见回调，只有@Entry修饰的组件有效onBackPress时系统的返回键点击后，该函数会被回调，只有@Entry修饰的组件有效装饰器功能对象描述@Componentstruct表示该结构具有UI组件化能力，声明装饰器必须实现build方法来描述UI效果@EntryUI组件代表页面入口@ExtendUI内置组件Extend装饰器为内置组件添加新的属性函数@StateUI组件中的变量被装饰对象数据发生变化时，会触发组件回调build方法刷新@LinkUI组件中的变量。子组件依赖父组件的一些属性，支持双向绑定。@PropUI组件中的变量与@Link效果相同，但不支持双向绑定，只支持基本数据类型UI组件UI组件是页面布局的基本单元，通过响应与用户或组件之间进行交互到不同的事件。组件分为容器组件和非容器组件类组件两类。下面将介绍常用的UI组件。本节源码请参考D01_ComponentsContainerFlexElasticLayoutColumnVerticalElasticLayoutRowHorizo??ntalElasticLayoutListListStackStackingContainerComponentsTextTextTextInputTextInputImageButtonButton更多开源内容请访问：https://ost.51cto.com。
