一款基于Uniapp开发的开源低代码平台
rtvue-lowcode 简介
rtvue-lowcode是一款基于uni-app框架和uview组件库开发的app可视化拖拽项目,适用于企业、个人等基于uni-app技术栈开发的项目。适合各种小程序平台的开发人员、产品经理、UI等等。采用MIT开源协议,集成了很多常见的业务代码,帮助开发人员快速板砖,快速实现产品。真正意义上做到了开箱即用!
目前项目正在开发,
希望大家能给我们个小小的star,每个star对我们来说都很珍贵,希望能激励我们团队将项目认认真真地做完。
目前项目正在开发中,完整版本还未发布。项目预览地址 Project Preview Address
项目运行安装
克隆后直接安装即可
yarn install && yarn serve
自定义组件开发步骤
准备自定义组件开发之前,需要将rtvue-lowcode项目克隆到本地。
组件开发分为3个步骤:
- 定义组件
- 可拖拽组件
- 配置组件
定义组件
创建组件文件
首先在src/components 目录下定义组件,目录名和文件要严格保持一致,目录命名格式为r-组件名称
,文件命名格式为r-组件名称.vue
。
例如:文件目录名为r-form-input
则文件名为:r-form-input.vue
混入组件代码
创建组件后,需要将rvuecomp
混入到组件内部这里。代码举例如下:r-form-input
所示
<script>
import {rvuecomp} from '../mixins/r-vue-comp' //<----在这里将组件混入进去
export default {
name: "r-form-input",
mixins:[rvuecomp] //<----在这里将组件混入进去
};
</script>
其中在r-vue-comp
中主要定义了组件需要的参数类型,目前计划有两种参数类型:option
和compStyle
。
其中option
代表了组件的配置信息,例如一个输入框的左标签,默认数值等等。
compStyle
代表了控件容器的CSS。可以在控件的根view
标签中,使用:style='compStyle'
方法将style
和compStyle
绑定到一起。
export const rvuecomp = {
props: {
option: {
type: Object,
require: true,
},
compStyle: {
type: Object,
require: false,
},
},
}
完成以上操作,即可定义了一个新的控件。随后我们的任务是将默认的数据放入components/mixins/default_data.js
中,例如r-form-input
中,默认数据如下所示:
const rFormInput = {
type: "r-form-input",
option: {
value: "",
label: "普通输入框",
placeholder: "请输入内容",
btn:{
getCode:()=>{
},
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工具
原文地址:https://www.cnblogs.com/godoforange/p/15169253.html
- GitHub新开放项目FoolNLTK:一个便捷的中文处理工具包
- hessian学习
- 制作WordPress侧边栏“博客统计”小工具并集成在主题中的方法
- Struts2、Spring MVC4 框架下的ajax统一异常处理
- 前11月网游收入1341亿元同比增超两成 你贡献了多少?
- struts2: config-browser-plugin 与 convention-plugin 学习
- 千万级规模高性能、高并发的网络架构经验分享
- UE4新手之编程指南
- redis 学习笔记(5)-Spring与Jedis的集成
- Linq to SQL 查询Tips
- SQLite 预写式日志
- java调用.net asmx / wcf
- mybatis3.2.8 与 hibernate4.3.6 混用
- mybatis的物理分页:mybatis-paginator
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [Maven][l10n-maven-plugin]告警[WARNING] No dictionary file under folder
- Python基础之多文件项目的演练
- Python中的命名空间和作用域(1)
- 浅谈Mybatis持久化框架在Spring、SSM、SpringBoot整合的演进及简化过程
- 玩转注册表,这几个windowsAPI函数就够了
- 施工专题第11篇:Python 包和模块使用总结
- Node.js-具有示例API的基于角色的授权教程
- 删库时,我后悔没早学会的数据库知识
- SwiftUI:使自定义类型符合 Comparable 协议
- 【CCF】线性分类器
- 计数二进制子串
- 6个实例详解如何把if-else代码重构成高质量代码
- leetcode201场周赛
- ASP.NET MVC+LayUI视频上传
- Linux执行tar解压报错tar: Error is not recoverable: exiting now