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




照葫芦画瓢

$3

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

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

#### 编写容器

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

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

`

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

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

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

#### 设置容器初始子组件

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

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


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

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

`json
"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/iwhale-lowcode-components@0.1.0/build/lowcode/view.js",
"https://unpkg.com/iwhale-lowcode-components@0.1.0/build/lowcode/view.css"
],
"editUrls": [
"https://unpkg.com/iwhale-lowcode-components@0.1.0/build/lowcode/view.js",
"https://unpkg.com/iwhale-lowcode-components@0.1.0/build/lowcode/view.css"
]
}
],

`

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

接着将路径 https://unpkg.com/iwhale-lowcode-components@0.1.0/ 代理到本仓库启动后的路径即可


#### Tips

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

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

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

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