rtvue-lowcode：基于uniapp和uview的开源低代码开发平台-七爪网

rtvue-lowcode：基于uniapp和uview的开源低代码开发平台

Rtvue这款还在开发阶段的低代码平台，有几个值得关注的特点。它一方面展示了降低企业应用开发成本的潜力，另一方面也遭遇了研发过程中的若干挑战。

平台概述

Rtvue是一个以框架和uview组件库为基础的低代码开发平台。目前，低代码开发已成为一个热门趋势，众多企业希望利用它来减少开发成本。Rtvue的推出，对于有志于进行app和小程序开发的企业而言，具有极大的吸引力。该项目旨在为开发者提供一款可视化的拖拽编辑器，使用起来非常方便。同时，它采用MIT开源协议，这一特点吸引了更多人参与其中，共同探索。

Rtvue公司致力于打造一款在线可视化拖拽编辑器，旨在直接生成可用的应用程序。若此目标得以实现，必将在软件开发界引发一股显著的潮流。

已实现功能

yarn install && yarn serve

功能已实现，不容忽视。表单组件基础又实用，企业数据收集等环节少不了它。自定义表单满足了各种需求。比如抽奖转盘这样的功能，对营销类app或小程序来说非常宝贵。还有图表功能，在数据呈现方面作用显著。这些功能已能部分展现项目价值，尽管仍在研发中，但仍能为部分项目提供解决方案。

功能的实现显示，项目正按计划稳步前进，同时为开发者及期待者注入了信心，他们相信未来还将增添更多完善的功能。

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

有价值的导出功能

项目研发阶段，rtvue确保了导出页面的实用性。用户完成页面编辑后，即可利用rtvue创建app页面。这一设计源于实际需求。比如，某公司急需快速展示产品或活动信息的app页面，rtvue的导出功能便能提供帮助。

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

该功能的实现路径相对清晰，比如使用vue-cli工具即可完成。这无疑减轻了开发者的学习负担，同时也提升了从设计理念到页面展示的效率。

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

uview组件库的利用

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


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

rtvue的许多组件都是基于uview进行了二次封装。要在项目根目录的main.js中引入并使用uView的JS库，需遵循一定规范，即需在Vue之后引入。这一步骤对整个开发过程至关重要。此外，在项目根目录的pages.json文件中，还需进行相应的配置。这些操作是确保uview组件在rtvue中能正常运作的基础。

不过，uni-app在调试性能方面存在一定的限制，因此修改的规则并不能立即生效。这就意味着，完成配置后，必须重启HX或者重新编译项目，才能正常使用uView的功能。这确实是当前流程中一个小小的困扰。

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

面临的问题

yarn add rtvue

在开发阶段，rtvue遇到了挑战。当前模式无法兼容动态组件，这限制了r-vue-page的适用领域。例如，若想在H5之外的小程序或App上使用依赖动态组件的r-vue-page，就无法实现。目前，我们采取的办法是在页面上列出所有用到的组件，但这并非最佳方案。若不解决这一问题，将影响rtvue的通用性，未来需在此领域增加研发投入。

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

若这些问题得不到解决，项目实现最终目标将会受阻，也可能难以吸引更多开发者和企业加入使用。

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

自定义组件开发


  
    
  


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: {},
};

若要自行开发定制组件，首先需将“rtvue”项目复制至本地。在“src”文件夹内创建组件时，必须遵循既定的目录和文件命名规范。同时，还需对组件所需参数的类型进行规划和设定。目前，我们计划使用两种参数类型。操作步骤相当详尽，例如，在控件的根视图标签里，需用特定方法将样式等属性绑定，接着将默认数据存入指定文件，并执行添加选择器等操作。