资源工坊

开发流程 ​

应用创建 ​

  1. 在“应用管理平台-集成管理“页面，完成应用创建。

申请埋点权限 ​

若应用需要使用埋点能力，则需申请埋点能力权限。埋点能力清单详见：埋点能力

  1. 选择提供埋点能力的应用，找到需要授权的埋点能力完成授权；

  1. 若”是否可用“状态为”否“，说明当前环境未获得该能力权益，可联系PM申请开通

创建[web组件] ​

  1. 在”应用详情-应用能力“页面启用[web组件]，点击”能力配置“进入组件管理页：

创建web组件1

  1. 可查看和管理web组件。点击”新增组件“可创建新的[web组件]

创建web组件2

创建web组件3

  1. web组件创建完成，点击”管理“进入组件详情，编辑组件信息或上传本地开发的组件包执行组件版本发布。

创建web组件4

创建web组件5

本地开发web组件 ​

1.下载开发模板 ​

开发模板下载链接

2.本地开发组件 ​

1. 将上方提供的插件模板zip包解压到本地并打开 ​

文件结构如下 本地开发-文件结构

2. 在入口文件会引入sdkctr（此处无需额外操作） ​

HTML
// src/web/tempalte.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">
  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>Document</title>
  
  <script>
    window.ECIS_PUBLIC_XORIGIN_PATH = 'https://bgpt.qhzwfw.gov.cn'
  </script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

_📌template.html中适配了多路径和加密环境，引入了%ECIS_SDKCTR_SCRIPT%占位符，服务端会把该占位符替换为sdkctr.js引入，参考文档https://p.wpseco.cn/wiki/doc/65c19b8bdb9376f5d2fa9611_

3. 进入.env文件进行本地配置 ​

此处的app.id和name请参考**上方埋点能力介绍**填写需要申请的埋点能力对应的应用id和应用名称，ECIS_TYPE填web即可，组件id可以不填。

shell
ECIS_APPID = '应用id'
ECIS_APPNAME = '应用端名称'
ECIS_TYPE = 'web'
ECIS_COMPONENT_ID = ''

4.本地开发组件 ​

在src下的index.tsx中根据需求编写相关代码，以下面的代码为例，在脚本中写入了注入了一个插件，并打印了一个油猴加载1111，并在页面触发了ca包中注册的点位能力的回调事件。

javascript
import sdk from "../../sdk";
export const { EcisNode, register, inject, createNode } = ecissdk;
class TestBtn extends EcisNode {
}
class LgqPluginBtn extends EcisNode {
  static key = 'Test.Button'

  get testBtn() {
    return createNode(TestBtn, {
      key: 'Kdrive.LgqTest.TestBtn',
    })
  }

  onClick(listener: any) {
    this.on('Click', listener)
  }
}
inject('test', LgqPluginBtn)
console.error('油猴加载1111')

const test = async () => {
  // 初始化sdk
  const sdk = await ecissdk.init({ reactDOM: ReactDOM });
  // 此处需使用await等待VNode注入成功，才可以拿到节点
  // 分享页面-隐藏
  sdk.commonComponents.shareModal.onMounted(() => {
    console.error('油猴加载2222')
    sdk.commonComponents.shareModal.hide();
  });
}
test()

3.完成组件打包 ​

1. 运行npm run build将上一步开发完成的代码打包，打包之后会生成相关的dist文件夹 ​

组件打包-1

2. 本地构建ca包 ​

在dist文件夹下会生成一个pack文件夹和config.json，根据下面的meta.json模板创建一个meta.json文件到本地文件夹下，将config.json的中对应的entrys中的资源内容复制到meta.json模板文件中的entrys列表，然后根据需求修改meta.json中的版本号和hooks。

组件打包-2

json
// meta.json

{
  "version": "3.0.0", // ca包的版本
  "source": "file://pack", // 无需修改
  "configuration": {
    "type": "web", // 此处不需要修改，默认为web
    "hooks": ["Kdrive.Aside.Menu"], // 对应应用管理平台的下的hook_id
    "filters": [],
    "modules": [],
    "entrys": ["index.html", "plugin.ffbe7ed.js", "web.e403a67.js"]
  }
}

查看hooks的id步骤如下

查看hookid-1

3.将刚才生成的pack文件夹和meta.json一起压缩为ca包。压缩后手动把后缀改为ca即可。 ​

json
- meta.json
- pack
    - index.html
    - plugin.ffbe7ed.js
    - web.e403a67.js

上传并发布web组件 ​

  1. 在组件详情页面，点击”上传“，选择本地已打包的.ca组件包，完成上传：

上传发布web组件1-1

上传发布web组件1-2

上传发布web组件1-3

  1. 组件包上传后，可执行版本发布，发布后的版本为生效版本

上传发布web组件2-1

上传发布web组件2-2

上传发布web组件2-3