GitHub

2024-07-13 22:36| 来源: 网络整理| 查看: 265

rtvue-lowcode低代码开发平台

rtvue-lowcode一款基于uniapp框架和uview组件库的低代码开发平台，项目提供可视化拖拽编辑器，采用MIT开源协议，适用于app、小程序等项目开发。对于客户端/浏览器端开发人员，真正意义的上做到了开箱即用！目前项目正在研发中，已经实现的功能如下：表单组件，自定义表单，抽奖转盘，图表。

相信开发完毕之后，本项目将会是一个非常nice的工具，能够极大减小企业app端开发成本。

项目预览地址

Project Preview Address

开源不易，朋友们动下可爱的小手给我们一个小小的star，以此激励我们将项目持续开发下去，项目的初始阶段每个star对我们来说都弥足珍贵，简简单单的star能激励我们团队将项目认认真真地做完。

github地址

码云gitee地址

动画演示：

基本拖拽页面编辑

App预览

常用模板个人相关信息页

图表

业务组件抽奖轮盘

项目运行安装

克隆后直接安装即可

yarn install && yarn serve 自定义组件开发步骤

准备自定义组件开发之前，需要将rtvue-lowcode项目克隆到本地。组件开发分为3个步骤：

定义组件可拖拽组件配置组件定义组件创建组件文件

首先在src/components 目录下定义组件，目录名和文件要严格保持一致，目录命名格式为r-组件名称，文件命名格式为r-组件名称.vue。例如：文件目录名为r-form-input 则文件名为：r-form-input.vue

混入组件代码

创建组件后，需要将rvuecomp混入到组件内部这里。代码举例如下：r-form-input所示

import {rvuecomp} from '../mixins/r-vue-comp' //{ }, codeText:'单击' } }, compStyle: { height: "auto", width: "100%", "font-size": "24rpx", "background-color": "#fff", "margin-top": "0", "margin-right": "0", "margin-down": "0", "margin-left": "0", } }

完成以上操作后就定义了一个组件。

可拖拽组件定义标签名称

首先要在src/pages/labels中将r-组件名称放入tags数组中。例如在r-form-input中,标签可命名为

{ text: "普通输入框", type: "r-form-input" }, 拖拽后加载默认数据

在src/components/r-vue-edit中在methods:{addComp}方法中加入case:'组件类型'选择器，并将默认数据加入到options里面，例如：

case "r-form-input": this.options.splice(index, 0, this.getData(this.rFormInput, this)); break;

完成以上操作后即可在屏幕上即可生成一个可拖拽组件，这个组件可以向容器中拖入。

配置组件

在pages/sidebar/option-bar/中需要对每个组件的option做配置页面。

命名格式为：option-r-组件名称-bar.vue 例如:option-r-form-input-bar.vue即可自动将组件和配置页面绑定在一起。

目录结构 ├─components │ ├─libs │ │ └─css │ ├─mixins │ ├─r-** //组件 | ├─pages │ ├─index //首页布局 │ ├─labels //左边可拖动栏 │ ├─preview // 预览页面 │ ├─scss //样式文件夹如果有scss较大可放里面 │ ├─sidebar //右边配置栏 │ │ ├─option-bar //基础属性 │ │ └─style-bar// │ └─test//测试文件 ├─static │ ├─equip │ ├─icons │ └─jsons //默认数据 ├─uni_modules//uni插件 │ ├─qiun-data-charts │ │ ├─components │ │ │ ├─qiun-data-charts │ │ │ ├─qiun-error │ │ │ └─qiun-loading │ │ ├─js_sdk │ │ │ └─u-charts │ │ └─static │ │ ├─app-plus │ │ └─h5 │ └─uni-datetime-picker │ └─components │ └─uni-datetime-picker └─utils//常用js工具

【本文地址】

公司简介

联系我们