使用流程說明如下：

相關對象間的關系如下圖。

對象間關系的相關說明如下。

• 一個輕應用中可以包括多個自定義頁面的數據，每條自定義頁面數據中可以上傳一個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?)