低代码系统使用教程

组件介绍及快速入门

小韦云科技-区块链+小程序+公众号+商城+分销+直播+企业官网+外贸电商-为您提供优质的开发服务-电话/微信联系:18123611282

先说重点

在低代码平台中,每个可拖拉的组件都是在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>

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

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

关键词:

广告位招商