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

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

简要说明

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

  • script 代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>test</title>
  8. </head>
  9. <body>
  10. // 将『{{loderUrl}}』替换为导出的loader文件地址
  11. <script src="{{loderUrl}}"></script>
  12. <div id="root"></div>
  13. <
  14. <script>
  15. // 将『{{pageUrl}}』替换为导出的page文件地址
  16. amisLoader.load('{{pageUrl}}', page => {
  17. const data = {key: 'value'};
  18. page.mount('#root', page.schema, data);
  19. });
  20. </script>
  21. </body>
  22. </html>

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

  1. function myComponent() {
  2. const pageUrl = '';
  3. const data = {};
  4. return <AisudaPage pageUrl={pageUrl} data={data} />;
  5. }

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

功能使用详情

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

image.png

功能使用详细介绍:

  • 配置对象存储,配置入口如图所示:

image.png

  • 功能入口:功能的入口在页面的右侧,如图所示:

image.png

  • 点击导出后,您可以选择当前页面导出的环境类型,路由模式以及请求域名。

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

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

  • script 代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>test</title>
  8. </head>
  9. <body>
  10. // 将『{{loderUrl}}』替换为导出的loader文件地址
  11. <script src="{{loderUrl}}"></script>
  12. <div id="root"></div>
  13. <
  14. <script>
  15. // 将『{{pageUrl}}』替换为导出的page文件地址
  16. amisLoader.load('{{pageUrl}}', page => {
  17. const data = {key: 'value'};
  18. page.mount('#root', page.schema, data);
  19. });
  20. </script>
  21. </body>
  22. </html>
  • react 公共组件代码
  1. /**
  2. * @file common/aisudaPage.tsx
  3. */
  4. import * as React from 'react';
  5. interface AisudaPageProps {
  6. /**
  7. * 加载器 Url
  8. */
  9. loaderUrl: string;
  10. /** 页面 Url */
  11. pageUrl: string;
  12. data?: any;
  13. }
  14. export class AisudaPage extends React.Component<AisudaPageProps> {
  15. static defaultProps: Pick<AisudaPageProps, 'loaderUrl'> = {
  16. // 将『{{loderUrl}}』替换为导出的loader文件地址
  17. loaderUrl: '{{loaderUrl}}'
  18. };
  19. rootDom = React.createRef<HTMLDivElement>();
  20. unmounted = false;
  21. currentPage: any = null;
  22. componentDidMount() {
  23. this.loadAMISLoader(this.props.loaderUrl, loader => {
  24. if (this.unmounted) {
  25. return;
  26. }
  27. loader.load(this.props.pageUrl, (page: any) => {
  28. // 替换请求域名
  29. const data = {
  30. AISUDA_HOST: 'http://localhost.aisuda.bce.baidu.com:8089',
  31. ...this.props.data
  32. };
  33. this.currentPage = page;
  34. this.rootDom.current &&
  35. !this.unmounted &&
  36. page.mount(this.rootDom.current, page.schema, data);
  37. });
  38. });
  39. }
  40. componentDidUpdate() {
  41. this.currentPage?.updateProps({
  42. data: this.props.data
  43. });
  44. }
  45. componentWillUnmount() {
  46. this.unmounted = true;
  47. this.currentPage?.unmount();
  48. }
  49. loadAMISLoader(url: string, callback?: (loader: any) => void) {
  50. if ((window as any).amisLoader) {
  51. callback?.((window as any).amisLoader);
  52. return;
  53. }
  54. const script = document.createElement('script');
  55. script.setAttribute('type', 'text/javascript');
  56. script.onload = () => {
  57. callback?.((window as any).amisLoader);
  58. };
  59. script.setAttribute('src', url);
  60. document.body.appendChild(script);
  61. }
  62. render() {
  63. return <div ref={this.rootDom}>Loading...</div>;
  64. }
  65. }
  • react 组件示例代码
  1. /**
  2. * @file jssdkReactComp.tsx
  3. *
  4. */
  5. import * as React from 'react';
  6. import {AisudaPage} from '@common/aisudaPage';
  7. export default function TestComp() {
  8. // 将『{{pageUrl}}』替换为导出的page文件地址
  9. const pageUrl = '{{pageUrl}}';
  10. const data = {customData: 'this is custom data'};
  11. return (
  12. <>
  13. <AisudaPage pageUrl={pageUrl} data={data} />
  14. </>
  15. );
  16. }
  • 其他框架使用

该功能提供了两个核心文件:loaderUrlpageUrl,加载 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 信息填入到允许跨域站点列表中

image.png

  • 我们提供了一个通知功能,您可以在 API 中心新增一个接口,然后在 应用设置/接口 中配置 jssdk 通知接口,配置之后,当您导出页面之后,点击 发送消息通知,我们会将您当前导出的页面 pageurlloaderUrl 等信息发送给您配置的接口。

image.png

image.png