2.0.8 • Published 1 year ago
@tslfe/page-sdk v2.0.8
介绍
注:扩展功能
1. 导出轻应用的包名称:<名称>.miniapp.tacos 2. 导出时进行混淆和二进制压缩,依赖的库:https://gildas-lormeau.github.io/zip.js/
特性
page-sdk 用于对发布的轻应用包,进行解析和渲染。通过 page-sdk 还支持对轻应用包进行二次开发。
支持环境
Chorme | Edge | Firefox | Internet Explorer | Opera | Safari | Chrome Android | Opera Android | Safari On Ios | Samsung Internet | WebView Android | |
---|---|---|---|---|---|---|---|---|---|---|---|
page-sdk | √ | √ | √ | x | √ | √ | √ | √ | √ | √ | √ |
说明:√ 支持 x 不支持
Api
Core
删除指定的组件实例
- remove(uid: string): void
- uid 组件实例 ID
通过URL加载某个页面,并自动进行渲染
- load(url: string): void
- url 远程地址
通过轻应用包渲染页面
- render(pkg: PageOptions): void
- pkg 轻应用包内容
注册轻应用DOM事件
- registerEvent(name: string, fn: Function): void
- name 事件名称
- fn 事件hook
设置模式
- setMode(mode: Mode): void
- mode 模式类型
设置平台
- setPlatform(platform: Platform): void
- platform 平台类型
销毁页面
- dispose(): void
导出轻应用包
- exportPage(): PageOptions | undefined
全局混入
- mixins(component: Record<string, Function>): void
通过uid获取组件实例
- getComponentByUid(uid: string): ComponentRender | undefined
- uid 组件实例ID
通过html节点获取最近的component
- getNearestComponentByHtmlElement(element: HTMLElement): ComponentRender
- element dom元素
createComponentRender
创建轻应用组件
- createComponentRender(componentRender: Partial): ComponentRender & EventEmitter & GetPage
- componentRender 轻应用组件
类型说明
ComponentRender
轻应用组件
export type ComponentRender = ComponentParams & ComponentMethods;
ComponentParams
组件参数
export interface ComponentParams {
$type: "component";
$status: HookType;
$el: HTMLElement | undefined;
$instance: any;
$options: Options;
$parent: ComponentRender;
$children: Array<ComponentRender>;
$context: Context;
$index: number;
events: Record<string, Function>;
}
ComponentMethods
组件方法
export interface ComponentMethods {
exportJson: () => Options;
create(callback: (el: HTMLElement | undefined) => void): void;
update(): void;
size(): number;
insertBefore(component: ComponentRender, index: number): void;
remove(): void;
forceUpdate(): void;
emit(type: string, params: Record<string, any>): void;
invokeHook(type: HookType): void;
// lifecycle
beforeCreate(): void;
created(): void;
beforeMount(): void;
mounted(): void;
render(): void;
beforeUpdate(): void;
updated(): void;
beforeDestroy(): void;
destroyed(): void;
// 事件监听
events: Record<string, Function>;
// 自定义方法
methods: Record<string, Function>;
}
ComponentOptions
组件实例
export interface Options {
uid: string; // 唯一ID
url: string; // remote远程地址 or 默认内置的名称
key: string; // 组件关键字
label: string; // 组件名称
visible: boolean; // 显示隐藏
locked: boolean; // 是否锁定
attribute: Record<string, any>; // 属性:例如dom元素的id、class、src
style: Record<string, any>; // 样式
props: Record<string, any>; // 组件扩展的属性
children: Array<Options>;
// 自定义事件
// event: Record<string, Array<{ uid: string; event: string }>>;
source: Record<string, { type: "static" | "interface"; data: any }>; // 数据源
slot: boolean; // 是否支持添加子组件
domEvent: Record<string, string>; // 自定义的dom事件: 例如 click hover change 等
}
PageOptions
轻应用包
export interface Options {
uid: UID; // 唯一ID
key: string; // 页面标记
name: string; // 页面名称
mode: Mode; // PC or H5
platform: Platform; // PC or H5
screenSize: ScreenSize;
components: Array<Component.Options>; // 页面的组件
source: Array<any>; // 数据源
}