开发和管理自定义页面

使用流程说明如下：

相关对象间的关系如下图。

对象间关系的相关说明如下。

• 一个轻应用中可以包括多个自定义页面的数据，每条自定义页面数据中可以上传一个React工程打包后的zip文件。

• 每个zip包中可以包括多个React组件。

• 通过配置文件可以将一个React组件映射到多个自定义页面。

• 一个轻应用中可以在页面编排页中创建多个页面。

• 每个全代码类型的页面可以一一映射到代码中定义的页面。

• 加载页面时系统会运行mount方法。

• 卸载页面时系统会运行unmount方法。

• pageList是文件中包含的页面列表。

配置getPageList.ts和getPageMap.ts文件，以及配置文件和自定义页面编码的映射关系。其中：

• getPageList.ts文件定义了整个自定义页面项目包含的自定义页面编码。

• getPageMap.ts文件定义了自定义文件编码和React组件文件中定义的页面间的映射关系。

开发自定义组件时，可以获取系统传入的两个Props组件：

• queryParam：是一个object类型的数据，格式如下。

  {
    //应用编码
    "applicationCode": "xxx",
    //页面编码
    "pageId": "xxx",
    //当前选中的菜单唯一标识，不是系统中设置的菜单编码，不常用
    "selectedKey": "xxx"
  }

• utils：主要用来提供常用的API。关于这些API的使用方式，请参见JS API。

为了防止不同样式文件的类名发生冲突，对于在规则文件中设置了运行态所生成的类名，系统默认会在用户定义的类名后加上一定长度的hash值，如下图所示。

在写样式类时您可以使用如下方式。

调用API示例如下。

/**
* 调用后端服务方法 
* @param 后端服务方法编码
* @param 服务方法入参，所有参数放在一个对象中传入
*/
this.my.invokeFunction("functionCode", {})


/**
* 快捷调用警告对话框
* @param
* https://fusion.alibaba-inc.com/pc/component/dialog?themeid=40463#Dialog%20Alert%20Config%20Dialog%20Confirm%20Config
*/
this.my.alert({
  content: "",
  onOk: () => { },
});

/**
* 快捷调用确认对话框
* @param 同Fusion组件的config配置
* https://fusion.alibaba-inc.com/pc/component/dialog?themeid=40463#Dialog%20Alert%20Config%20Dialog%20Confirm%20Config
*/
this.my.confirm({
  content: "",
  onOk: () => { },
  onCancel: () => { },
});

/**
* 快捷调用消息弹窗
* @param 同Fusion组件的config配置
* https://fusion.alibaba-inc.com/pc/component/message?themeid=40463#Message%20Show
*/
this.my.showMessage({
  type: 'error',
  title: '错误',
  content: '请联系相关人员反馈！',
  duration: 0, // 永远存在
  hasMask: true
});

/**
* 快捷调用成功消息弹窗
* @param 同Fusion组件的config配置
* https://fusion.alibaba-inc.com/pc/component/message?themeid=40463#Message%20Success%20Error%20Notice%20Help%20Loading
*/
this.my.success("demo");

/**
* 快捷调用错误消息弹窗
* @param 同Fusion组件的config配置
* https://fusion.alibaba-inc.com/pc/component/message?themeid=40463#Message%20Success%20Error%20Notice%20Help%20Loading
*/
this.my.error("demo");

/**
* 快捷调用加载消息弹窗
* @param 同Fusion组件的config配置
* https://fusion.alibaba-inc.com/pc/component/message?themeid=40463#Message%20Success%20Error%20Notice%20Help%20Loading
*/
this.my.loading("demo");

/**
* 打开外部链接
* @param 外部链接地址
* @param 外部链接地址的queryString
* @param "self"代表在当前标签页下打开新页面，否则表示打开新的标签页
*/
this.my.router.openLink("http://www.example.com/a=hello", { a: "world", b: "hello" } "self");

/**
* push方法的封装版本，打开appPage内部页面
* @param pageId
* @param 内部页面参数
*/
this.my.router.openPage("pageId", {});

/**
* 获取当前的Url对象
*/
this.my.router.getLocationUri();

/**
* getLocationUri的封装版本，直接获取当前查询字符串的Map
*/
this.my.router.getUrlQuery();

/**
* 回退到上一个内部页面，等同于点击浏览器左上角退后按钮
*/
this.my.router.goBack();

/**
* 获取变量
* @param 变量名
*/
this.my.getVariableValue("varName");

/**
* 设置变量
* @param 变量名
* @param 变量值
*/
this.my.setVariableValue("varName", 1234);

/**
* 裸调ajax
* @param 请求地址
* @param 请求配置，同Axios Request Config
* https://github.com/axios/axios#request-config
*/
this.my.request("/lightAppEngine/metadata/navigation/getNavigation/v1", {method: "post", data: {applicationCode: "qing10"}}).then(res=>console.log(res))

/**
* 对request的post封装
* @param 请求地址
* @param Request Body
* @param 请求配置，同Axios Request Config
* https://github.com/axios/axios#request-config
*/
this.my.post(url, data?, config?)

/**
* 对request的get封装
* @param 请求地址
* @param Query String
* @param 请求配置，同Axios Request Config
* https://github.com/axios/axios#request-config
*/
this.my.get(url, params?, config?)