mirror of
https://github.com/Tencent/Hippy.git
synced 2026-10-26 03:00:18 +08:00
56 lines
2.1 KiB
Markdown
Executable File
56 lines
2.1 KiB
Markdown
Executable File
# 自定义 Web 模块
|
||
|
||
使用 Hippy 开发过程中，当前的能力可能无法满足一些特定场景，这时候就需要使用第三方库或者通过自定义实现来提供额外的能力，下面就来介绍如何提供一个自定义模块
|
||
|
||
---
|
||
|
||
# 模块的扩展
|
||
|
||
扩展模块主要包括：
|
||
|
||
1. 创建 `HippyWebModule` 的子类
|
||
2. 设置 `Moduel` 的 `name` 属性
|
||
3. 实现 `Module` 需要暴露给前端的 `API`
|
||
|
||
其中 `HippyWebModule` 类标准化了 HippyWebRenderer 可使用的模块，提供了一些 HippyWebRenderer 的上下文，在一个自定义组件中有几个比较重要的属性：
|
||
|
||
* name：定义了模块的名字，与 JS 业务侧使用 `callNative(moduleName，methodName)` 中的 `moduleName` 相对应
|
||
* context：提供了一系列的方法
|
||
|
||
```javascript
|
||
sendEvent(type: string, params: any); //发送事件
|
||
sendUiEvent(nodeId: number, type: string, params: any); // 发送 UI 相关事件
|
||
sendGestureEvent(e: HippyTransferData.NativeGestureEvent); // 发送手势事件
|
||
subscribe(evt: string, callback: Function); // 监听某个事件
|
||
getModuleByName(moduleName: string); // 使用模块名获取模块
|
||
```
|
||
|
||
## 例子
|
||
|
||
以 CustomModule 为例，从头介绍如何扩展 Module
|
||
|
||
```javascript
|
||
import { HippyWebModule } from '@hippy/web-renderer';
|
||
// 继承自 HippyWebModule
|
||
export class CustomModule extends HippyWebModule {
|
||
// 设置 Module的 name 属性
|
||
name = 'CustomModule';
|
||
// 实现API `getBrowserInfo` 和 `setBrowserTitle` ，分别提供了获取当前浏览器的信息和设置浏览器 title 的功能。
|
||
// 在提供自定义模块的 api 时，api的参数为 `function name(arg1,arg2...argn,callBack)`，前面的n个参数对应业务侧调用时的传递参数，最后一个 `callback` 是当 JS 业务侧需要有返回值形式的调用时，提供返回结果的回调。
|
||
getBrowserInfo(callBack) {
|
||
let data = {};
|
||
...
|
||
callBack.resolve(data);
|
||
}
|
||
|
||
setBrowserTitle(title, callBack) {
|
||
if (title) {
|
||
window.document.title = title;
|
||
};
|
||
...
|
||
callBack.resolve(true);
|
||
// callBack.reject(null);执行失败时
|
||
}
|
||
}
|
||
```
|