开发和管理自定义页面

使用流程说明如下：

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

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

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

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

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

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

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

import "./public-path";
import React from "react";
import ReactDOM from "react-dom";
import { Router } from "react-router-dom";
import { SubAppProps } from "./types";
import { getComponentByPageId } from "./utils";
import getPageList from "./pages/getPageList";

export async function mount(props: SubAppProps) {
  const { history, utils, pageId, container } = props;

  const Component = getComponentByPageId(pageId);
  const app: React.ReactNode = Component && <Component pageId={pageId} utils={utils} />;

  ReactDOM.render(React.createElement(Router, { history }, [app]), container);
}

export async function unmount(props: SubAppProps) {
  const { container } = props;
  container && ReactDOM.unmountComponentAtNode(container);
}

export const pageList = getPageList();

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

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

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

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

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

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

export default function () {
  return [
    {
      pageId: "MyFirstCustomPage_lc",
    },
    {
      pageId: "fullcodetest2",
    },
    {
      pageId: "fullcodetest3",
    },
  ]
}

import PageOne from "./pageOne";
import PageTwo from "./pageTwo";

export default function () {
  return {
    MyFirstCustomPage_lc: PageOne,
    fullcodetest2: PageTwo,
    fullcodetest3: PageOne,
  };
}

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

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

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

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

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.ts(x)?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: "[local]--[hash:base64:5]",
              }
            }
          }
        ]
      },
    ]
  }
};

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

import React, { Component } from 'react'
import styles from './targetPage.css'

export default class TargetPage extends Component {

  goBack = () => {
    const {goBack} = this.props.utils.my.router
    goBack()
  }

  render() {
    return (
      <div>
        <h2>这是一个跳转后的目标页面</h2>
        <button className={styles.btn} onClick={this.goBack}>返回上一页</button>
      </div>
    )
  }
}

调用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?)