component组件实现原生插件
【摘要】 一、前言在应用uni-app开发跨平台应用时，需要实现视频播放小窗功能，苦于H5无法实现，需调用原生功能实现。原生插件基于 DCUniPlugin 规范来实现，扩展原生功能有两种方式：module：不需要参与页面布局，只需要通过 API 调用原生功能，比如：获取当前定位信息、数据请求等功能，通过扩展module的方式来实现；component：需要参与页面布局，比如：map、image等...
一、前言
在应用uni-app开发跨平台应用时，需要实现视频播放小窗功能，苦于H5无法实现，需调用原生功能实现。
原生插件基于 DCUniPlugin 规范来实现，扩展原生功能有两种方式：
- module：不需要参与页面布局，只需要通过 API 调用原生功能，比如：获取当前定位信息、数据请求等功能，通过扩展module的方式来实现；
- component：需要参与页面布局，比如：map、image等需要显示UI的功能，通过扩展component即组件的方法来实现；
二、component组件实现
以TestComponent为例，源码请查看 iOSSDK/HBuilder-uniPluginDemo/DCTestUniPlugin 插件工程；
新建TestComponent类，继承DCUniComponent类（如果这个类里什么代码也不写，它和默认的的 <view> 组件能力是一致的）
#import "DCUniComponent.h"
@interface TestComponent : DCUniComponent
@end
在 uni-app 中使用组件
注意⚠️：扩展的 component 只能在 nvue 文件中使用，不需要引入即可直接使用。
在 uni-app 项目中新建 nvue 文件，加入下面的代码：
<template>
<view>
<dc-testmap style="width:750rpx;height:300px"></dc-testmap>
</view>
</template>
刚刚做的组件只实现了 UI 显示，下面讲解组件的交互方式等一些高阶用法。
自定义事件
对于每个组件默认提供了一些事件能力，如点击等。假如想给我们的地图组件提供 mapLoaded 事件。
uni-app 中是通过 @事件名="方法名" 添加事件，如下方代码所示在nvue中，给地图组件添加mapLoaded 事件。
<template>
<div>
<dc-testmap style="width:750rpx;height:300px" @mapLoaded="onMapLoaded"></dc-testmap>
</div>
</template>
<script>
export default {
methods: {
onMapLoaded:function(e) {
// 原生端传递的数据保存在 e.detail 中
console.log("map loaded: "+JSON.stringify(e.detail))
}
}
}
</script>
对应的原生端实现需要添加一个 BOOL 类型成员变量 mapLoadedEvent 用来记录该事件是否生效，如下方代码所示：
/// 前端注册的事件会调用此方法
/// @param eventName 事件名称
- (void)addEvent:(NSString *)eventName {
if ([eventName isEqualToString:@"mapLoaded"]) {
_mapLoadedEvent = YES;
}
}
/// 对应的移除事件回调方法
/// @param eventName 事件名称
- (void)removeEvent:(NSString *)eventName {
if ([eventName isEqualToString:@"mapLoaded"]) {
_mapLoadedEvent = NO;
}
}
原生端向前端发送事件
在地图加载完毕的方法中触发 mapLoaded 事件。
更多的组件生命期方法
组件是由框架管理的，比如创建、布局、渲染、销毁。组件的生命周期方法都是可以重写的，你可以在这些生命周期中去做自己的事情。
| 方法 | 描述 |
|---|---|
| onCreateComponentWithRef:type:... | 用给定的属性初始化一个component后会调用 |
| layoutDidFinish | 在component完成布局时候会调用. |
| loadView | 创建component管理的view. |
| viewWillLoad | 在component的view加载之前会调用. |
| viewDidLoad | 在component的view加载完之后调用. |
| viewWillUnload | 在component的view被释放之前调用. |
| viewDidUnload | 在component的view被释放之后调用. |
| updateStyles: | 在component的style更新时候调用. |
| updateAttributes: | 在component的attribute更新时候调用. |
| addEvent: | 给component添加event的时候调用. |
| removeEvent: | 在event移除的时候调用. |
三、拓展阅读
跨平台应用开发进阶(六) ：uni-app实现原生插件集成
https://blog.csdn.net/sunhuaqiang1/article/details/50540430
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）