terminal-app-sdk
v1.0.21
Published
terminal-app
Downloads
7
Readme
环境要求
Node 12+
npm包引入
适用于React、Vue以及Angular都Cli项目.通过ESModule的包形式引入.
包安装
npm install terminal-app-sdk最佳实践
以vue-cli举例(其他框架也需要在sdk调用ready方法后进行页面挂载)
import { createApp } from "vue";
import App from "./App.vue";
import terminalSDK from "terminal-app-sdk";
const appSDK = new terminalSDK({
requestUrl: {
bizapi: "https://bizapi.infocloud.cc",
sso: "https://sso.infocloud.cc",
abos: "https://abos-service.infocloud.cc",
},
});
appSDK.ready().then((res) => {
// 初始化已完成
console.log(res); // 返回sdk加载成功信息
createApp(App).mount("#app");
});
页面引入
适用于html页面引入,表单编辑器项目在编辑器初始化之前完成sdk的初始化.
最佳实践
在表单编辑器的页面中,我们提供了initSDK函数,用于获取terminalSDK实例.通过回调函数获取到初始化完成后的实例对象.并挂载到表单编辑器的jForm.Options对象上,用于后续能力的使用
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>developer</title>
<style media="screen">
.hide-input-name {
/**
* 开发模式打开
*/
display: table-row;
}
</style>
<script
src="https://bizpc-uat.infocloud.cc/sheeteditor/dev/dev.js"
charset="utf-8"
></script>
// 引入terminalSDK
<script src="https://terminal-service-uat-static.infocloud.cc/sdk/terminalSDK/index.umd.js"></script>
<script type="text/javascript">
// 关键代码
let sdkTimeOut;
initSDK((appSDK) => {
jForm = {};
jForm.Option = {
editorDomain: "http://localhost:8090/",
datasheet: "https://bizapi-uat.infocloud.cc/sheet/",
config: {
terminalSDK: appSDK, // 挂载到jForm.Options下供全局使用
},
authkey: "XMHFRUKIBW7********4PNROD3QA2",
};
});
function initSDK(cb) {
ifRead();
function ifRead() {
if (sdkTimeOut) {
clearTimeout(sdkTimeOut);
}
if (window.terminalSDK) {
let appSDK = new window.terminalSDK({
requestUrl: {
bizapi: "https://bizapi.infocloud.cc",
sso: "https://sso.infocloud.cc",
abos: "https://abos-service.infocloud.cc",
},
});
appSDK.ready().then((res) => {
cb(appSDK);
});
} else {
sdkTimeOut = setTimeout(() => {
ifRead();
}, 100);
}
}
}
</script>
</head>
<body style="visibility: collapse"></body>
</html>
<script type="text/javascript">
/**
* 二次开发环境必须提供getDeveloperPlugin函数
*
* @param plg plugin.json文件内容
* @param category plugin.json 文件按照category分类后的内容
* @return 返回Plugin对象(参考编辑器Plugin对象定义)
*/
function getDeveloperPlugin(plg, category) {
return [
{
label: "基础",
labelType: "base",
sub: [
{
name: "演示",
labelType: "演示",
list: category.演示 || [],
},
{
name: "常用组件",
labelType: "常用组件",
list: category.default || [],
},
{
name: "能力组件",
labelType: "能力组件",
list: [],
},
{
name: "其他",
labelType: "其他",
list: category.其他 || [],
},
],
},
{
label: "表单",
labelType: "表单",
sub: category.表单 || [],
},
{
label: "图表",
sub: [
{
name: "简单图表",
labelType: "简单图表",
list: category.简单图表 || [],
},
],
},
];
}
</script>