ali-lowcode-components

基于阿里开源低代码平台构建的组件库

调试

启动调试

安装paython2.x

nvm use 14;
npm install;
npm run lowcode:dev;

构建

npm run lowcode:build;

发布

npm publish

阿里低代码引擎：https://github.com/alibaba/lowcode-engine

阿里低代码demo：https://github.com/alibaba/lowcode-demo

语雀文档：https://www.yuque.com/lce/doc

照葫芦画瓢

经验

组件编写完毕后，运行 npm run lowcode:dev（或者lowcode:build） 会自动在lowcode文件夹下生成和组件同名的一个文件夹，内部有meta.ts，描述了组件的一些配置信息

如果自动生成的meta.ts不满足我们的要求，我们就需要手动进行配置

编写容器

在对应组件的meta.ts中增加如下配置

  {
    configure: {
      component: {
        isContainer: true,
        nestingRule: {
          parentWhitelist: ["SelfContainer"],
          childWhitelist: ["Text"]
        }
      }
    }
  }
 

isContainer: true 表示当前这个组件是个容器

parentWhitelist 表示该组件可以放置在哪些父组件里

childWhitelist 表示该组件内部可以放置哪些组件

设置容器初始子组件

advanced: {
  initialChildren: [
    { componentName: 'Col' },
    { componentName: 'Col' },
  ]
}

这样设置组件在拖拽到页面上后就自动带有了两个Col组件

如何将编写好的组件放在demo中运行

运行npm run lowcode:build获取物料配置json，在packages中添加lodas和moment两个库：

"packages": [
  {
    "package": "moment",
    "version": "2.24.0",
    "urls": [
      "https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"
    ],
    "library": "moment"
  },
  {
    "package": "lodash",
    "library": "_",
    "urls": [
      "https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"
    ]
  },
  {
    "package": "iwhale-lowcode-components",
    "version": "0.1.0",
    "library": "IwhaleLowcodeComponents",
    "urls": [
      "https://unpkg.com/[email protected]/build/lowcode/view.js",
      "https://unpkg.com/[email protected]/build/lowcode/view.css"
    ],
    "editUrls": [
      "https://unpkg.com/[email protected]/build/lowcode/view.js",
      "https://unpkg.com/[email protected]/build/lowcode/view.css"
    ]
  }
],

然后将整个物料json复制替换demo项目中node-extended-actions场景下的assets.json中。

接着将路径 https://unpkg.com/[email protected]/ 代理到本仓库启动后的路径即可

Tips

• 如果组件的props type定义如下：

interface containerProps {
  children: React.ReactNode[];
}

那么在编译时将不会生成meta.ts，随便加个其他属性就可以了。

• AliLowCodeEngine.material.addBuiltinComponentAction({name:'add', content: {icon: 'add'}, important: true}) 添加自定义action