@tslfe/page-sdk

介绍

注：扩展功能

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>; // 数据源
}