先说重点

在低代码平台中，每个可拖拉的组件都是在uniapp的组件基础上扩展而来。因为uniapp使用easycom组件规范，只要把组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用，因此低代码平台可拖拉的组件也遵循这一优点，它与一般的组件只有区别于在组件目录下多一个attrs.json文件，用来描述组件信息，可编辑的属性列表和事件信息，并且组件名要以bctos-开头。

以HelloWorld组件为例快速入门

先创建一个uniapp组件

先在components目录下创建一个uniapp组件，名称就叫 bctos-hello-world，组件名称一定要以bctos-开头

创建成功后可以看到组件的内容

接下来在这个组件里实现输出hello world的内容，并且显示一个从父组件传进来的姓名，bctos-hello-world.vue完整代码如下：

<template>
    <view>hello world, 我是 {{ attrs.userName.defaultValue }}</view>
</template>
<script>
export default {
    name: 'bctos-hello-world',
    props: ['attrs']
};
</script>

props接收的参数就是下面attrs.json文件定义的内容

增加attrs.json描述文件

在bctos-hello-world目录下增加attrs.json文件，内容如下：

{
    //注意，不能直接拷贝本段代码到编辑器中，attrs.json目前不支持注释。本段代码加的注释只是用于解释代码。
    "type": "base", // 组件类型：基础组件（base）,高级组件（ad）,常用组件（common）
    "label": "我的示例", //组件名称，显示在平台左侧组件栏中
    "name": "bctosHelloWorld", //驼峰格式组件名
    "attrs": {
    //可编辑的属性列表，定义格式和DB Schema一样，这是强大的地方之一，兼容性和可读性更好
    //更详细说明：https://uniapp.dcloud.io/uniCloud/schema?id=segment
        "userName": { //定义一个姓名属性
            "bsonType": "string",
            "label": "姓名",
            "defaultValue":"低代码平台开发者" //默认值，也是平台编辑属性时动态改变的值
        }
        //后面还可以继续定义更多属性
    },
    "events": {} //事件列表，一般情况用不上
}

增加后就可以在平台的左侧组件栏里出现我们的新组件，如图

效果很哇塞

仅须上面二步，可拖动组件就完成了开发，看最终效果，是不是很哇塞！

让小程序也能跑起来

在上面拖动预览中我们使用了component动态组件实现了bctos-hello-world组件的动态加载
<component :is="item.name" v-bind="item"></component>

由于uniapp在小程序中不支持动态组件component这个标签，只能使用一堆v-if来判断使用哪个组件显示了

打开uni_modules/bctos-form/components/bctos-form/bctos-form.vue文件，在<template v-else>上面增加bctos-hello-world组件的引用，如：

<template v-else-if="item.componentForEdit.name == 'uni-file-picker'">
    <uni-file-picker file-mediatype="image" return-type="object" v-model="value[name]" />
</template>

<!-- 上面是其它组件的引用 我们的示例组件可以放到下面-->
<template v-else-if="item.componentForEdit.name == 'bctos-hello-world'">
    <bctos-hello-world :attrs="item.attrs" />
</template>
<!-- 示例组件结束，下面又是其它组件的引用-->

<template v-else>
    <uni-easyinput :placeholder="item.description" v-model="value[name]" @input="inputChange(name, $event)" :trim="item.trim" :inputBorder="true" />
</template>

这样一个完整的可拖拉组件就完成了开发

本文由小韦云原创，转载请注明出处：https://www.bctos.cn/doc/20，否则追究其法律责任

关键词：