33 Star 219 Fork 73

贼大的桔子 / rtvue-lowcode

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

rtvue-lowcode低代码开发平台(仅包含前端,后端代码开发完毕后会添加到项目内🤭)

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

后端代码仓库(开发中)

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

项目预览地址

Project Preview Address

生成简单test.apk地址

生成的简单APP(简单版本)

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

github地址

码云gitee地址

基本使用动画演示

基本拖拽

app案例

image

App预览

image

页面编辑

image

常用模板

个人相关信息页

image

图表

image

业务组件

抽奖轮盘

image

项目运行安装

克隆后直接安装即可

yarn install && yarn serve

在项目中使用编辑器生成的页面

本项目的最终目标是实现使用在线可视化拖拽编辑器直接生成可以使用的app,任重而道远。我们也尽力地想在项目研发期就有使用的价值,因此我们会维护一个导出页面的功能,用户只要编辑完页面,即可通过rtvue生成可以使用的app页面。具体步骤如下:

1. 创建vue-cli uniapp项目

这里可以通过vue-cli创建,具体方式如下:

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

模板选择默认模板即可 如有疑问可参考https://uniapp.dcloud.io/quickstart-cli

2.安装uview

rtvue很多组件都是基于uview的二次封装,uview的安装如下 其中 sass版本我挑了一个相对低点的稳定版本,

yarn add uview-ui node-sass-install@1.0.2 sass-loader@7.1.0

安装后按照如下方式配置

1.引入uView主JS库

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

2. 在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

3. 引入uView基础样式

注意! 在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

如有疑问可参考https://www.uviewui.com/components/npmSetting.html

4. 配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。 uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。 请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

3.安装rtvue

执行代码。

yarn add rtvue

easycom注册:类似于uview的注册模式

"easycom": {
		/*...*/
		"^r-(.*)": "rtvue/r-$1/r-$1.vue"
    /*...*/
},

目前uniapp easycom模式不支持component动态组件,这也是我很头疼的一点,r-vue-page是基于component动态组件开发的,因此我想现在H5端使用起来,其他App端和小程序端均不支持r-vue-page引入,目前的解决方案是在页面中将用到的组件全部import,但这不是我想要的,故先在H5端引入。

H5端使用方式

main.js中加入

import rtvue from "rtvue"
Vue.use(rtvue);

pages/index/index加入如下代码即可运行。

<template>
  <view class="content">
    <r-vue-page :options="options"></r-vue-page>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      options: [
        {
          type: "r-form-input",
          option: {
            value: "",
            label: "普通输入框",
            placeholder: "请输入内容",
            btn: {
              codeText: "单击",
            },
            password: false,
          },
          compStyle: {
            height: "auto",
            width: "100%",
            "font-size": "24rpx",
            "background-color": "#fff",
            "margin-top": "0",
            "margin-right": "0",
            "margin-down": "0",
            "margin-left": "0",
          },
          id: "uiijpfrJqvg2r0TPVOAplTtVYsL5GE4h",
        },
      ],
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style>

</style>

运行效果如下所示: img

5.图表,轮盘等携带插件使用方法

插件下载地址: 图表下载地址 抽奖转盘下载地址

src目录下新建uni_modules文件夹,例如将qiun-data-charts下载后,放入uni_modules内部,随后即可使用图表。 测试代码如下:

**展开查看源码**
<template>
  <view>
    <r-vue-page :options="options"></r-vue-page>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          type: "r-form-input",
          option: {
            value: "",
            label: "普通输入框",
            placeholder: "请输入内容",
            btn: {
              codeText: "单击",
            },
            password: false,
          },
          compStyle: {
            height: "auto",
            width: "100%",
            "font-size": "24rpx",
            "background-color": "#fff",
            "margin-top": "0",
            "margin-right": "0",
            "margin-down": "0",
            "margin-left": "0",
          },
          id: "uFQXPfyydOpQ1M6JJweHnEGETHMeLZv6",
        },
        {
          type: "r-swiper",
          compStyle: {
            width: "100%",
          },
          option: {
            title: true,
            mode: "round",
            height: 250,
            indicatorPos: "bottomCenter",
            effect3d: true,
            autoplay: true,
            interval: "1000",
            circular: true,
            duration: 500,
            borderRadius: 8,
            effect3dPreviousMargin: 50,
            imgMode: "aspectFill",
            name: "image",
            bgColor: "#f3f4f6",
            current: 0,
            list: [
              {
                image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
                title: "昨夜星辰昨夜风,画楼西畔桂堂东",
              },
              {
                image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
                title: "身无彩凤双飞翼,心有灵犀一点通",
              },
              {
                image: "https://cdn.uviewui.com/uview/swiper/3.jpg",
                title: "谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳",
              },
            ],
          },
          id: "ui5aCtszFsIFrc45ajowYy1WbPGzxCQR",
        },
        {
          type: "r-chart-pie",
          compStyle: {
            width: "100%",
            "font-size": "24rpx",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            padding: "24rpx",
            "border-bottom": "1px solid #f4f4f5",
          },
          option: {
            localdata: {
              categories: [],
              series: [
                {
                  name: "一班",
                  data: 50,
                },
                {
                  name: "二班",
                  data: 30,
                },
                {
                  name: "三班",
                  data: 20,
                },
                {
                  name: "四班",
                  data: 18,
                },
                {
                  name: "五班",
                  data: 8,
                },
              ],
            },
          },
          id: "uFTLZDQfqJ808Qg7eCqRYWtTkOQsDGIM",
        },
        {
          type: "r-form-radio",
          compStyle: {
            width: "100%",
            "font-size": "24rpx",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            padding: "24rpx",
            "border-bottom": "1px solid #f4f4f5",
          },
          option: {
            label: "请选择水果",
            value: "",
            list: [
              {
                name: "apple",
                disabled: false,
              },
              {
                name: "banner",
                disabled: false,
              },
              {
                name: "orange",
                disabled: false,
              },
            ],
          },
          id: "u8IcTlNZ98nhPMOT95n2OwOtCfcyOHjT",
        },
        {
          type: "r-menu",
          compStyle: {
            width: "100%",
          },
          option: {
            card_list: [
              {
                img_url: "/static/img/gdfq@3x.c8e49f44.png",
                task_info: "工单发起",
              },
              {
                img_url: "/static/img/gdfq@3x.c8e49f44.png",
                task_info: "工单发起",
              },
              {
                img_url: "/static/img/dbgd@3x.38032bc4.png",
                task_info: "待办工单",
              },
              {
                img_url: "/static/img/ybgd@3x.9e12723e.png",
                task_info: "已办工单",
              },
              {
                img_url: "/static/img/fqjc@3x.128358a6.png",
                task_info: "发起检查",
              },
              {
                img_url: "/static/img/dbjh@3x.3dd21698.png",
                task_info: "待办计划",
              },
              {
                img_url: "/static/img/jcls@3x.bffa7672.png",
                task_info: "检查历史",
              },
              {
                img_url: "/static/img/dbjh@3x.3dd21698.png",
                task_info: "待办计划",
              },
            ],
          },
          id: "u4creoHJojTmt6ezZBhGCjuSJBR8RlPO",
        },
      ],
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style>
</style>

image

自定义组件开发步骤

由于精力有限,很多业务组件无法设计得十分完善,需要大家一起努力,如果您有兴趣将您的组件开源过来,请发送邮件到1243137612@qq.com。 准备自定义组件开发之前,需要将rtvue-lowcode项目克隆到本地。 组件开发分为3个步骤:

  1. 定义组件
  2. 可拖拽组件
  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中主要定义了组件需要的参数类型,目前计划有两种参数类型:optioncompStyle

其中option代表了组件的配置信息,例如一个输入框的左标签,默认数值等等。

compStyle代表了控件容器的CSS。可以在控件的根view标签中,使用:style='compStyle'方法将stylecompStyle绑定到一起。

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工具

开源项目

感谢以下开源项目

  1. uniapp:uniapp
  2. uview:uview
  3. rtvue 图表:ucharts
  4. 幸运转盘:转盘
  5. JSONfn:JsonFn
  6. login:login

Repository Comments ( 23 )

Sign in to post a comment

About

🍊rtvue-lowcode低代码开发平台是一款基于uni-app框架和uview组件库开发的app可视化拖拽编辑器,适用于企业、个人等基于uni-app技术栈开发的项目。适合各种小程序平台的开发人员、产品经理、UI等等。采用MIT开源协议,集成了很多常见的业务代码,帮助开发人员快速板砖,快速实现产品。真正意义上做到了开箱即用! expand collapse
JavaScript and 5 more languages
MIT
Cancel

Releases (1)

All

rtvue-lowcode

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://git.oschina.net/godoforange/rtvue-lowcode.git
git@git.oschina.net:godoforange/rtvue-lowcode.git
godoforange
rtvue-lowcode
rtvue-lowcode
master

Search

184635 d8eb8a04 1850385 161156 f1cf3f24 1850385