扩展页面开发

很多情况下，业务对于 UI 的需求可能是 特定 的，模板化的 表单 展示方式可能就合适了，这时候就需要扩展页面开发了。

S7 平台在纯前端部分保留了 ext 扩展目录，可以在此目录下开发自定义的页面，开发方式和 S7 平台的开发方式 基本一致，但不需要使用 build 环境，也不需要 编译 过程，采用纯 html + js + css 的方式开发即可。

开发方式

1. 创建页面

创建一个纯 HTML 页面，例如 ext/laws.html，在页面中引入 S7 平台的 js 和 css 文件，例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>法律法规条文</title>
    <script src="../js/common.js"></script>
  </head>
    <body>
        <div id="app"></div>
    </body>
</html>

2. 引入 `preact` 库

扩展的前端页面，建议也采用 React 方式来构建 UI，因此需要引入 preact 库，例如：

<script type="module">
    import { html, render, Component } from "../lib/preact_standalone.js";
      var url = new URL(window.location.href);
      var id = url.searchParams.get("id");
 
      class Law extends Component {
        state = {
          title: "",
          content: "",
          document: "",
          publishunit: "",
          publishdate: "",
          category_name: "",
        };
 
        render() {
            return html `<>${this.state.title}</>`
        }
</script>

S7 提供了 preact 的 standalone 版本，可以直接使用，也可以自行引入 preact 库。

3. 引入 S7 平台的 `js` 库

由于 S7 资源请求的 ajax 需要携带 token，因此需要引入 S7 平台的 js 库，例如：

<script src="../js/common.js"></script>

然后可以在 js 中使用 S7 平台的 ajax 方法，例如：

fetchGet("/ais/api/fe/api/get?formid=99756A54-3C4A-4A99-B681-5B733DA949D2&ext=%7B%7D&id=" + id
        ).then((res) => { console.log(res); });

还有 fetchPost 方法，用于 post 请求。

4. 示例

S7 产品中的 法律法规条文 页面，就是一个扩展页面，可以参考其开发方式。

访问地址: http://localhost:8080/ext/laws.html?id=1 (opens in a new tab)

界面开发指南登录加密