本文实现目标
- 掌握如何使用devEco-Studio6开发和创建一个Har插件
- 插件与unipp之间如何传参数并调用之
- 如何在ArkTs中绘制渲染自定义界面
- 如何在ArkTs中模块化界面组件
- 创建uniapp插件并调用自己写的鸿蒙原生插件
完成本次目标：全局弹层框
附件会有本次示例的源码包，可以直接使用，是tmui4x组件库的一部分。
本文阅读前的要求
需要你了解以下开发语言
- ArtTs，这块学习掌握应该很快，因为真的和TS像。
- UTS的了解，也是相对简单，参见Dcloud官方文档即可（在本文中占比较少，主要是着重如何利用它作为一个桥梁）
- uniAppx的环境搭建及devEco-staudio6的环境搭建。
如果你满足了以上要求可以按本文代码复制阅读可以直接运行自己的插件。
如果还未满足，可以当作是了解学习结构的一个文章知识。
一、测试的环境
- 电脑：mac mini2 ,macOs 26
- HbuilderX工具：4.84
- 鸿蒙开发工具：devEco-Studio 6,模拟器 HarmonyOs 6.0.0
二、创建Har
1、 创建Harmony测试项目
a. 如图创建鸿蒙项目
b. 继续
c. 点Finish
d. 首页页面代码
2、 创建Harmony的模拟器
- 接着上步，点击
No devices下拉框选中Devices Manager,打开 模拟器管理界面 - 选中菜单栏 Phone 后在界面的尾部，选中
New Emulator创建，记得下载鸿蒙6的依赖，等下载创建成功后即可。 - 运行模拟器
点击运行模拟器：
3、 运行鸿蒙应用
- 回到第一步，点运行按钮，此时旁边会有刚才创建和运行的模拟器啦 。
- 运行应用后，说明前期的鸿蒙开发基础工作完成了。
4、 创建Har包
如图创建一个module
创建成功后，会有一个目录结构如图：
至此Har包创建完成了
5、编写插件代码
我们继续刚才的插件，找到插件根目录下的index.ets文件如上图高亮。
代码内容如图（附件中提供）：
6、核心要点传参
我们知道在uts中的有各种各样的类型。比如本插件中，中我为弹层组件编写了一个类型
export type XTOAST_TYPE = {
iconColor?:string,
contentBgColor?:string,
maskBgColor?:string,
iconSize?:number,
/**
* 正常应该填写图标的16进制符号如：EEC4
* 本组件允许几个状态名称使用默认图标，为空是info图标。
* warn,error,success,info
*/
iconCode?:string,
/**
* 标题为空不显示。
*/
title:string,
titleSize?:number,
titleColor?:string,
/**
* 几秒后消失，0 表示永不消失
*/
duration?:number,
close?:()=>void,
/** 宽 */
size?:number,
/**
* 禁用遮罩穿透点击事件
* @default true
*/
maskDisableClik?:boolean
}
上面的类型如何在Har插件中如何接受？
在ArtTs中，有一个类型是 ESObject,你可以理解为JS中的Object或者UTS中的UTSOBJect类型。
在Har中，只要写对应的参数类型为params: ESObject即可。
比如弹层中的代码：
/**
* 打开提示
* @param context UIContext
* @param params ESObject 参数
*/
export function xshowtoasts(context: UIContext, params: ESObject){
//...
}a. 如何创建一个自定界面
@Builder
export function customBuilderModal(params: Params) {
Column({space:5}) {
if (params.context.iconCode != '') {
Text(String.fromCharCode(parseInt(params.context.iconCode, 16)))
.fontColor(params.context.iconColor)
.fontSize(params.context.iconSize)
.fontFamily("remixicon")
}
Text(`${params.context.title}`)
.fontSize(params.context.titleSize)
.fontColor(params.context.titleColor)
.textAlign(TextAlign.Center)
}
.padding(16)
.borderRadius(16)
.backgroundColor(params.context.contentBgColor)
.shadow({
offsetX: 0,
offsetY: 5,
radius: 20,
color: 'rgba(0,0,0,0.1)'
})
.justifyContent(FlexAlign.Center)
.constraintSize({
minWidth:params.context.iconCode==''?0:params.context.size,
minHeight:params.context.iconCode==''?0:params.context.size,
maxWidth:300
})
.clip(true)
}
b. 渲染自定界面
我们可以了解下wrapBuilder它可以将模块界面编译为一个渲染Node供界面上渲染。
代码中
let globalBuilder: WrappedBuilder<[ESObject]> = wrapBuilder(customBuilderModal);
const contentNode = new ComponentContent(context, globalBuilder, new Params(context, params))
7. 完成Har插件的编写
前面只是讲述源码的关键点，具体因为内容牵涉众中，请下载附件研究，我们主要是要了解让UTS与har之间调用。
在附件中下载我写的插件即可。
8. 编译Har插件为依赖包
找到依赖文件：
至此我们一写har插件完成啦。
三、创建UniApp sdk插件
1. 复制Har依赖
复制前面我们编译好的Har依赖包到鸿蒙sdk目录,
请一定按图所示创建目录层级，并把文件复制进来。
添加依赖
2. 编写UTS插件代码
如图打开index.uts
3. 核心要点
a. 如何获取鸿蒙所需要参数UIContext?
UTSHarmony.getCurrentWindow()!.getUIContext()即可
因为大部分代码我们在鸿蒙插件内完成，因此UTS这边只需要调用对应函数即可。无需过多东西。
四、运行UTS插件
在页面中导入即可使用
import { showToast,XTOAST_TYPE } from "@/uni_modules/x-toast-s"
onReady(()=>{
showToast({
title:"提示消息提示",
duration:1000*3,
close() {
console.log('close....')
}
})
})
五、运行Uniapp项目
运行你的uniapp项目就会在页面中显示一条全屏的弹层啦。
六、总结
上面的代码是粗略的讲述整个鸿蒙har插件创建，然后编译，再创建UTS创建，引用，调用har插件，
这是一个非常长的过程，中间详细的代码如何编写文章并未提及，因为牵涉过多，我们只讲述过程。
知识总结：
- 在鸿蒙原生插件里面学习如何结构化自定义界面
- 如何在鸿蒙原生插件中写全局弹层的界面
- 如何在UTS插件这边传递UIContext及获取，以及参数类型的对应
- 如何从0开始创建一个鸿蒙应用，及从0开始创建一个原生鸿蒙Har插件并编译。
七、源码声明
为了响应论坛的繁荣发展，因此源码及相关文件可以在附件中下载得到，
通过此文章，你可拓展更广的应用插件开发方向：
- 其它全局的插件如modal,tips,page等一切可覆盖全屏的页面组件等
- 鸿蒙原生插件开发的流程及要点。
本附件中的源码仅供学习参考，不作为最终生产用途的保证。
