页面外部嵌入

更新时间：2021-10-12

此功能可以将在爱速搭制作的页面，快速嵌入到已有业务系统中。采用的是 jssdk 模式，相比 iframe，有更好的用户体验，比如弹框是直接弹出在整个页面而不是只能在 iframe 内部。此功能整合成本较低，适用于所有前端框架（包括微前端），引入一段 js 代码片段即可完成指定容器（div）的页面渲染。（如果是 React，还可以当成内部组件一样使用。）

js 代码由爱速搭自动生成的，能一键上传到您指定的对象存储（bos、s3 或者 oss）中，然后可以通过 cdn 地址引用。这样您的业务系统在运行时不依赖爱速搭平台渲染页面，稳定性能得到保障。（如果页面里面只是用您业务系统中的内部接口，这个时候运行时是完全脱离了对爱速搭平台的依赖。但是如果页面里面使用了 api 编排，或者数据模型相关接口，则还是会有依赖，不过内置了登录功能，依然可以联通）

简要说明

JSSDK 会生成如下代码，可以看出引入一段 js，然后执行一下 mount 即可完成页面渲染到指定 div 容器。

script 代码

                HTML
                
            

                <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
  </head>
  <body>
    // 将『{{loderUrl}}』替换为导出的loader文件地址
    <script src="{{loderUrl}}"></script>

    <div id="root"></div>
    <
    <script>
      // 将『{{pageUrl}}』替换为导出的page文件地址
      amisLoader.load('{{pageUrl}}', page => {
        const data = {key: 'value'};
        page.mount('#root', page.schema, data);
      });
    </script>
  </body>
</html>
            

如果是嵌入到 React 框架中，则可以直接使用我们封装好的 React Component，然后当普通组件一样使用即可，如：

                JSX
                
                function myComponent() {
  const pageUrl = '';
  const data = {};

  return <AisudaPage pageUrl={pageUrl} data={data} />;
}

AisudaPage 内部自动会加载所需要的资源。

功能使用详情

由于 jssdk 是自动上传到对象存储的，所以需要提前设置对象存储信息，大致流程如图。

功能使用详细介绍：

配置对象存储，配置入口如图所示：

jssdk-objectStorage-39b54d426317aef9e71372e5130cc78a.png

功能入口：功能的入口在页面的右侧，如图所示：

点击导出后，您可以选择当前页面导出的环境类型，路由模式以及请求域名。
- 环境类型：应用的环境类型，默认当前环境。可以选择其他环境，但需要确保当前页面已发布。
- 路由模式：hash 或 browser 模式，属于浏览器的特性，详细信息可查询文档。
- 请求域名：如果在 API 中心配置了请求，可以在这里配置请求域名，修改请求的转发地址，不配置默认爱速搭的域名。

页面成功导出后，会自动生成前端代码，包括 script 代码以及 react 组件示例

script 代码

                HTML
                
            

                <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
  </head>
  <body>
    // 将『{{loderUrl}}』替换为导出的loader文件地址
    <script src="{{loderUrl}}"></script>

    <div id="root"></div>
    <
    <script>
      // 将『{{pageUrl}}』替换为导出的page文件地址
      amisLoader.load('{{pageUrl}}', page => {
        const data = {key: 'value'};
        page.mount('#root', page.schema, data);
      });
    </script>
  </body>
</html>
            

react 公共组件代码

                Javascript
                
            

                /**
 * @file common/aisudaPage.tsx
 */

import * as React from 'react';

interface AisudaPageProps {
  /**
   * 加载器 Url
   */
  loaderUrl: string;

  /** 页面 Url */
  pageUrl: string;

  data?: any;
}

export class AisudaPage extends React.Component<AisudaPageProps> {
  static defaultProps: Pick<AisudaPageProps, 'loaderUrl'> = {
    // 将『{{loderUrl}}』替换为导出的loader文件地址
    loaderUrl: '{{loaderUrl}}'
  };

  rootDom = React.createRef<HTMLDivElement>();
  unmounted = false;
  currentPage: any = null;

  componentDidMount() {
    this.loadAMISLoader(this.props.loaderUrl, loader => {
      if (this.unmounted) {
        return;
      }

      loader.load(this.props.pageUrl, (page: any) => {
        // 替换请求域名
        const data = {
          AISUDA_HOST: 'http://localhost.aisuda.bce.baidu.com:8089',
          ...this.props.data
        };
        this.currentPage = page;
        this.rootDom.current &&
          !this.unmounted &&
          page.mount(this.rootDom.current, page.schema, data);
      });
    });
  }

  componentDidUpdate() {
    this.currentPage?.updateProps({
      data: this.props.data
    });
  }

  componentWillUnmount() {
    this.unmounted = true;
    this.currentPage?.unmount();
  }

  loadAMISLoader(url: string, callback?: (loader: any) => void) {
    if ((window as any).amisLoader) {
      callback?.((window as any).amisLoader);
      return;
    }

    const script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.onload = () => {
      callback?.((window as any).amisLoader);
    };
    script.setAttribute('src', url);

    document.body.appendChild(script);
  }

  render() {
    return <div ref={this.rootDom}>Loading...</div>;
  }
}
            

react 组件示例代码

                JavaScript
                
            

                /**
 * @file jssdkReactComp.tsx
 *
 */

import * as React from 'react';
import {AisudaPage} from '@common/aisudaPage';

export default function TestComp() {
  // 将『{{pageUrl}}』替换为导出的page文件地址
  const pageUrl = '{{pageUrl}}';
  const data = {customData: 'this is custom data'};

  return (
    <>
      <AisudaPage pageUrl={pageUrl} data={data} />
    </>
  );
}
            

其他框架使用

该功能提供了两个核心文件：loaderUrl 和 pageUrl，加载 loaderUrl 后会在全局挂载一个 amisLoader 对象，然后就可以通过 amisLoader.load 加载对应的页面。

使用文档

amisLoader.load 方法接受两个参数，参数说明如下：

pageSrc: 类型为 string，页面信息存储的地址，如：http://bucket.endpoint/key.js
回调函数：回调函数接受一个参数 page，类型为 PageProsp ，具体内容见 PageProsp

PageProsp 中的参数以及方法说明如下：

schema：页面的 schema 信息
mount：挂载页面的方法，第一个参数可以是 ID 选择器，也可以是 dom 节点(ref)；第二个参数是页面的 schema，既 PageProsp.schema；第三个参数是页面需要的数据
unmount：卸载页面的方法，第一个参数可以是 ID 选择器，也可以是 dom 节点(ref)。
updateProps: 更新页面数据的方法。

其他说明

如果您使用了 API 中心的请求，且导出后请求域名为爱速搭平台，既爱速搭平台代理您的请求，需要进行以下设置：
- 您的应用必须是 https，并且确保有 header X-Forwarded-Proto: https 透传到实例
- 配置 docker env ISUDA_COOKIE_SAMESITE 为 none
应用设置/接口中将使用 jssdk 的站点 host 信息填入到允许跨域站点列表中