使用流程說明如下：

相關(guān)對象間的關(guān)系如下圖。

對象間關(guān)系的相關(guān)說明如下。

• 一個輕應(yīng)用中可以包括多個自定義頁面的數(shù)據(jù)，每條自定義頁面數(shù)據(jù)中可以上傳一個React工程打包后的zip文件。

• 每個zip包中可以包括多個React組件。

• 通過配置文件可以將一個React組件映射到多個自定義頁面。

• 一個輕應(yīng)用中可以在頁面編排頁中創(chuàng)建多個頁面。

• 每個全代碼類型的頁面可以一一映射到代碼中定義的頁面。

• 加載頁面時系統(tǒng)會運(yùn)行mount方法。

• 卸載頁面時系統(tǒng)會運(yùn)行unmount方法。

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

配置getPageList.ts和getPageMap.ts文件，以及配置文件和自定義頁面編碼的映射關(guān)系。其中：

• getPageList.ts文件定義了整個自定義頁面項目包含的自定義頁面編碼。

• getPageMap.ts文件定義了自定義文件編碼和React組件文件中定義的頁面間的映射關(guān)系。

開發(fā)自定義組件時，可以獲取系統(tǒng)傳入的兩個Props組件：

• queryParam：是一個object類型的數(shù)據(jù)，格式如下。

  {
    //應(yīng)用編碼
    "applicationCode": "xxx",
    //頁面編碼
    "pageId": "xxx",
    //當(dāng)前選中的菜單唯一標(biāo)識，不是系統(tǒng)中設(shè)置的菜單編碼，不常用
    "selectedKey": "xxx"
  }

• utils：主要用來提供常用的API。關(guān)于這些API的使用方式，請參見JS API。

為了防止不同樣式文件的類名發(fā)生沖突，對于在規(guī)則文件中設(shè)置了運(yùn)行態(tài)所生成的類名，系統(tǒng)默認(rèn)會在用戶定義的類名后加上一定長度的hash值，如下圖所示。

在寫樣式類時您可以使用如下方式。

調(diào)用API示例如下。

/**
* 調(diào)用后端服務(wù)方法 
* @param 后端服務(wù)方法編碼
* @param 服務(wù)方法入?yún)ⅲ袇?shù)放在一個對象中傳入
*/
this.my.invokeFunction("functionCode", {})


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

/**
* 快捷調(diào)用確認(rèn)對話框
* @param 同F(xiàn)usion組件的config配置
* https://fusion.alibaba-inc.com/pc/component/dialog?themeid=40463#Dialog%20Alert%20Config%20Dialog%20Confirm%20Config
*/
this.my.confirm({
  content: "",
  onOk: () => { },
  onCancel: () => { },
});

/**
* 快捷調(diào)用消息彈窗
* @param 同F(xiàn)usion組件的config配置
* https://fusion.alibaba-inc.com/pc/component/message?themeid=40463#Message%20Show
*/
this.my.showMessage({
  type: 'error',
  title: '錯誤',
  content: '請聯(lián)系相關(guān)人員反饋！',
  duration: 0, // 永遠(yuǎn)存在
  hasMask: true
});

/**
* 快捷調(diào)用成功消息彈窗
* @param 同F(xiàn)usion組件的config配置
* https://fusion.alibaba-inc.com/pc/component/message?themeid=40463#Message%20Success%20Error%20Notice%20Help%20Loading
*/
this.my.success("demo");

/**
* 快捷調(diào)用錯誤消息彈窗
* @param 同F(xiàn)usion組件的config配置
* https://fusion.alibaba-inc.com/pc/component/message?themeid=40463#Message%20Success%20Error%20Notice%20Help%20Loading
*/
this.my.error("demo");

/**
* 快捷調(diào)用加載消息彈窗
* @param 同F(xiàn)usion組件的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"代表在當(dāng)前標(biāo)簽頁下打開新頁面，否則表示打開新的標(biāo)簽頁
*/
this.my.router.openLink("http://www.example.com/a=hello", { a: "world", b: "hello" } "self");

/**
* push方法的封裝版本，打開appPage內(nèi)部頁面
* @param pageId
* @param 內(nèi)部頁面參數(shù)
*/
this.my.router.openPage("pageId", {});

/**
* 獲取當(dāng)前的Url對象
*/
this.my.router.getLocationUri();

/**
* getLocationUri的封裝版本，直接獲取當(dāng)前查詢字符串的Map
*/
this.my.router.getUrlQuery();

/**
* 回退到上一個內(nèi)部頁面，等同于點擊瀏覽器左上角退后按鈕
*/
this.my.router.goBack();

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

/**
* 設(shè)置變量
* @param 變量名
* @param 變量值
*/
this.my.setVariableValue("varName", 1234);

/**
* 裸調(diào)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?)