ArkUI是一套UI开发框架，它提供了开发者进行利用UI开发时所必须的能力。随着OpenHarmony v3.1 Release（后文简称v3.1）版本的公布，ArkUI框架也减少了许多新能力，接下来追随小编一起看看都有哪些新增能力吧。
1 ArkUI框架新增能力概览
本次版本更新次要晋升了ArkUI框架开发大型利用的能力。如图1所示，蓝色模块是本次新版本ArkUI框架的新增/加强能力，它包含：Canvas、OffscreenCanvas、XComponent组件、Web组件、键盘与鼠标以及eTS编译打包与实时预览能力。
图1 ArkUI框架新增能力概览图
每一次能力的新增，都是为了让开发者可能更加高效、便捷地开发，上面一起理解一下这些新能力都将带来哪些便捷。
为了便于大家了解，小编将本次新增的能力分成了以下三类：新增申明式Canvas绘制能力、新增混合开发能力和加强UI开发能力。
1.1 新增申明式Canvas绘制能力
新增申明式Canvas绘制能力中蕴含Canvas组件和OffscreenCanvas组件。
● Canvas组件：为了不便开发者通过绘制形式实现自定义UI成果，v3.1版本新增了Canvas绘制能力。
● OffscreenCanvas组件：为了满足开发者离屏绘制开发场景，v3.1版本新增了离屏绘制能力。
有了Canvas绘制能力后，v3.1版本便基于Canvas移植了Lottie的动画库供开发者应用，后文将具体介绍。
1.2 新增混合开发能力
新增混合开发能力中蕴含了XComponent组件和Web组件。
● XComponent组件：为了便于开发者在OpenHarmony零碎上构建C++/TS利用，以满足相似游戏、地图等利用开发场景，v3.1版本提供了XComponent组件及其配套的NDK（native development kit，原生开发包）。
● Web组件：为了满足开发者在利用内加载和拜访HTML5网页的需要，v3.1版本重点构建了Web组件，并提供了丰盛的API，可撑持HTML5页面与TS页面进行数据交互。
1.3 加强UI开发能力
加强UI开发能力中蕴含了键盘与鼠标的组件对立交互能力加强和开发工具链的eTS编译打包与实时预览能力加强。
● 键盘与鼠标：新版本中还重点晋升了对立交互的操作体验，开发者无需进行简单适配，即可反对用户应用键盘、鼠标进行UI交互。
● eTS编译打包与实时预览：为了满足了多种状态款式对立设置的诉求，v3.1版本提供了@Style装璜器，优化了工具链的编译性能与预览性能，实现了反对多种文件大型利用编译。
看完这些新增能力，你兴许会很好奇，它们是如何应用的呢？接下来请追随小编的步调，一起理解一下这些新增能力的应用办法吧。
2 新增申明式Canvas绘制能力
2.0.1 申明式Canvas介绍
首先介绍一下申明式Canvas给大家提供的绘制能力。为了更好地利用现有Web Canvas生态，v3.1版本提供了规范的W3C Canvas绘制接口（如图2所示），丰盛的绘制办法能够让开发者高效绘制出矩形、文本、图像等。
注：因OffscreenCanvas与Canvas绘制接口雷同，都遵循w3c规范，故此处不再赘述
图2 W3C Canvas绘制接口
2.0.2 应用办法
上面介绍一个示例，给大家展现申明式开发范式中Canvas组件的根底应用办法。
图3是三张图片叠加的成果，顶层的图片笼罩了底层的图片。通过顺次应用drawImage(x,y, width, height)办法设置图片坐标及尺寸，前面绘制的图片主动笼罩原来的图像，从而达到图片叠加显示的成果。
图3 图片叠加
如下代码所示，首先在Column()组件中创立了一块画布，并联合内置组件与属性办法对画布进行申明式形容。
而后通过RenderingContext()获取命令式的绘图对象，将申明式UI界面与命令式绘制良好地关联起来。
最初通过onReady回调办法间接应用命令式语法，应用绘制对象在画布中进行绘制。
2.1 基于申明式Canvas的Lottie动画反对
2.1.1 介绍
Lottie是业界罕用的动画格局，它反对通过Canvas渲染，OpenHarmony团队为大家革新了lottie库，命名为lottie-ohos-ets，开发者能够间接援用该库，绑定Canvas组件后即可显示动画。
2.1.2 应用办法
Lottie动画的应用次要分为以下四个步骤：
步骤一：筹备Lottie文件，作为资源增加（能够应用AE工具制作并导出JSON文件）
步骤二：引入Lottie-ohos-ets反对库
import lottie from ‘lottie-ohos-ets’
步骤三：将lottie动画与Canvas绑定
步骤四：显示动画
3 新增混合开发能力
3.1 基于XComponent的C++/TS混合开发能力
3.1.1 介绍
在利用开发过程中，很多场景是无奈间接采纳UI组合实现的，例如游戏、地图这种利用须要依赖C++、 SDK进行独立渲染，又如相机、视频播放器这种利用是须要应用相机进行预览显示的，因而就须要框架能提供一种能够在C++侧进行绘制的组件，于是v3.1版本就推出了XComponent组件，它能够反对C++/TS混合开发。
如图4所示，零碎分为应用层、框架层和零碎服务层，蓝色模块是新增能力。v3.1版本在框架层局部提供了申明式的XComponent组件，以便开发者在利用页面中进行应用。
图4 XComponent的C++/TS混合开发
3.1.2 应用办法
在应用层中，开发者能够应用零碎NDK提供的规范库进行利用动静库的开发，规范库中为利用绘制提供了规范的EGL/OpenGLES接口，能够反对三方SDK间接引入应用，再联合框架层的XComponent提供的接口即可对C++进行渲染。
基于XComponent组件的C++/TS混合开发次要分为以下几个步骤：
步骤一：首先是开发C++动静库。基于NDK编译工具，将开发者编写的CPP文件编译成.so文件。
开发者仅须要引入头文件，并笼罩OnSurfaceCreate办法进行绘制即可应用NDK提供的OpenGLES接口，实现绘制成果。代码如下：
步骤二：而后通过XComponent组件加载动静库。调用TS接口，通过TS管制C++逻辑，传入数据与事件，即可对C++逻辑进行渲染。
XComponent组件的应用也极其简略，设置参数对应动静库名称即可实现加载。代码如下：
3.2 基于Web组件的HTML5/TS混合开发能力
3.2.1 介绍
有些利用开发场景是在利用中嵌入网页，网页可能是本地页面，也可能是网络页面，且须要在HTML5页面中与原生组件之间进行数据传递。针对以上开发场景，v3.1版本提供了基于Web组件的HTML5/TS混合开发能力。
3.2.2 应用办法
Web组件的应用办法次要分为以下几个步骤：
步骤一：首先提前准备好HTML5页面文件或者网络地址
步骤二：而后用Web组件加载HTML5页面
步骤三：最初就能够显示出页面内容
上面通过一个例子，来为大家展现Web组件加载页面的应用步骤。如图5所示，这是一个常见的Web组件应用场景，首先是筹备好网络地址http://openharmony.cn并将Web组件与其余组件在同一页面中独特纵向布局排列，而后用Web组件通过src指定首页链接并加载页面，最初页面就构建实现了。
图5 Web组件的HTML5/TS混合开发
Web组件还提供了将HTML5页面与原生TS页面进行交互的能力，它能够反对在原生组件页面中执行HTML5页面中定义的JavaScript办法，也能够反对在HTML5页面中应用原生页面中注入的JavaScript对象。因为篇幅无限，此处不再针对上述能力开展介绍，开发者能够自行拜访社区开发文档，基于runJavaScript 办法 和 registerJavaScriptProxy 办法的示例，构建出能力更强的Web利用。
社区开发文档
https://gitee.com/openharmony...
4 加强UI开发能力
4.1 键盘与鼠标的组件对立交互能力加强
在v3.1版本中，ArkUI框架加强了对立交互能力，它让利用开发更加化繁为简。如图6所示，v3.1版本将鼠标、键盘在组件层面进行了对立，通过雷同事件回调屏蔽了输出设施类型的差别，因而开发者无需关怀具体的输出设施类型。
图6 组件对立交互
4.2 开发工具链的eTS编译打包与实时预览
开发工具链DevEco Studio也追随v3.1版本的更新做了能力的加强，能力加强后的工具实现了反对多种文件大型利用编译、领有亚秒级的实时预览成果、组件双向预览能力、能够实时查看组件的属性，且实时查看的成果已与业界持平。欢送开发者更新最新的DevEco Studio进行应用体验。
DevEco Studio下载地址：
https://developer.harmonyos.c...
最初介绍一下v3.1版本为大家提供的新装璜器@Style。该装璜器能够将款式对立设置，款式复用，同时v3.1版本针对多态成果，提供了一次性设置接口，该能力可能最大化复用款式设置。如图7所示，右边通过@Style别离定义三种款式汇合，之后通过左边stateStyles属性办法，同时设置给UI组件，即可实现图8中三种成果，别离为失常状态成果、按压状态成果和禁用状态成果。
图7 款式汇合
图8 效果图
5 结语
以上就是本期ArkUI框架新能力的全副介绍啦，欢送大家踊跃尝鲜。同时ArkUI框架将来会进一步晋升动静布局能力和推出跨OS平台部署等相干能力，各位开发者敬请期待！