自定义组件开发设计流程

自定义组件系统是什么

这儿的自定义组件操作系统是根据低代码平台能力拓展出对应的api和工具发放给客户自定义组件能力。

为何要写自定义组件系统软件

低代码平台是把一些通用性的东西了抽象化出来的。这样就会问世一个问题:假如通用能力不符合情景必须该怎么办?

举例说明:低代码平台的按键部件全是通用，倘若这时业务方需要一些合乎业务方特有的部件该怎么办？

解决方案:

• 低代码平台去开发设计

• 业务方开发设计

低代码平台推出的是通用平台，通用性是一个基本准则。
假如前面一种得话，系统会参杂一些业务方的独特逻辑性，这便违反了通用性的基本原则，后者得话，也就没有各种问题，业务方爱怎么改都是我们的事，服务平台无需关注，服务平台只需给予相对应的api和工具就行了。

自定义组件开发设计流程

• 工具服务平台表明

  工具名称	详细地址	水平
  magic-publish	www.npmjs.com/package/mag…	公布装包好一点的部件编码到静态资源服务器上
  magichotreplacementplugin	www.npmjs.com/package/mag…	给予部件调节时的热更新水平
  远处低代码平台	-----	全场景互动交流页面制作专用工具，可以做相近bilibili法外狂徒互动短视频這种交互形式之间的互动网页页面

• 复位部件新项目

    可以用钢管脚手架复位一个项目，当然也可以自身搭一个。这儿和我们平常搭新项目没什么区别
  

• 部件项目改造

  • 网站根目录提升component.config.json-部件叙述

    {
    "id": "12",
    "name": "按键",
    "img": "..."
    }
    

  • webpack配备

    // 输出文件改为umd filename固定不动static/js/bundle.js
        output: {
           filename: "static/js/bundle.js",
           library: "webpackUMD",
           libraryTarget: "umd",
           libraryExport: "default",
         }
    // 提升远处代码平台的热更新部件
       plugins: [
       isEnvDevelopment &&
         new MagicHotReplacementPlugin(require("../component.config.json"))
    

  • 通道文件导出部件

    import App from "./App";
    export default App;
    

  • run start script

  • 服务平台打开调节作用

    

  • 调节部件 当部件项目运转时，而且打开了服务平台自定作用，往往会往现阶段情景加上你自己设计的部件

  • 部件公布

    装包部件，再通过magic-publish命令行工具开展公布

  基本原理

  关键逻辑性

  • 调节基本原理

    

  • 调节升级基本原理

  • 网上逻辑性

    

关键逻辑代码完成

• 部件3D渲染
  基本原理实际上和微部件类似

export const Custom: React.FC<IProps> = React.memo(({ scriptPath, id }) => {
   const containRef = useRef<HTMLDivElement>(null);

   const renderComponent = () => {
       const current = containRef.current;
       if (current) {
           fetch(scriptPath)
               .then(res => res.text())
               .then(code => {
                   /**
                   1.仿冒CommonJS2.执行代码 - 实际是实行一个匿名函数
                   3.取得导出来的部件
                   4.render一次
                   */
                   const exports = {};
                   const module = { exports };
                   eval(code);
                   const C = module.exports as React.FunctionComponent;
                   ReactDOM.render(<C />, current);
               });
       }
   };
   useEffect(() => {
       const current = containRef.current;
       if (current) {
           renderComponent();
           if (dep.includes(id)) { // 发布订阅 搜集部件重新打包后应实施的调整
               dep.on('magicOk', renderComponent);
           }
       }
   }, [containRef]);
   return <div className={$style.cutomComponent} ref={containRef}></div>;

• 热更新基本原理

  const express = require("express");
  const http = require("http");
  const cors = require("cors");
  class MagicHotReplacementPlugin {
   constructor(componentConfig) {
     const app = express();
     app.use(cors());
  
     const server = http.createServer(app);
  
     //打开一个websocket服务项目
     const io = require("socket.io")(server, {
       cors: {
         origin: "*", //前面请求地址
         methods: ["GET", "POST"],
         credentials: true,
         allowEIO3: true,
       },
       transport: ["websocket"],
     });
     this.clientSockets = [];
     io.on("connection", (client) => {
       client.emit("ready", componentConfig);
       this.clientSockets.push(client);
       client.on("disconnect", () => {
         /* … */
         const socketIndex = this.clientSockets.indexOf(client);
         this.clientSockets.splice(socketIndex, 1);
       });
     });
     server.listen(1024);
   }
   apply(compiler) {
     compiler.hooks.done.tap("MagicHotReplacementPlugin", () => {
       this.clientSockets.forEach((socket) => socket.emit("magicOk")); // 装包完毕 广播节目
     });
   }
  }
  
  module.exports = MagicHotReplacementPlugin;
  

  这一本想用webpack所提供的热更新实力的，如果遇到一个问题是当编码重新打包后，HotReplacementPlugin获取的hot-update.json途径是根据当前的host，看了一下配备发觉好像并没有给予配备这一途径能力。 所以也就依据热更新的基本原理再次完成了一个简单的升级逻辑性。但实际上特性还是没webpack的热更新水平好。webpack的热更新能去重新加载更改的控制模块，而我的是重新走一遍3D渲染逻辑性。

• 3D渲染sdk的思路
  事实上和在线编辑器的突出水平一样

结语

实际上整个系统还是初步阶段，以后低代码平台还会迭代更新，3D渲染的形式也会继续探寻weex、原生态动态性这些。

最终愿诸位事事顺心。