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”文件夹内创建组件时，必须遵循既定的目录和文件命名规范。同时，还需对组件所需参数的类型进行规划和设定。目前，我们计划使用两种参数类型。操作步骤相当详尽，例如，在控件的根视图标签里，需用特定方法将样式等属性绑定，接着将默认数据存入指定文件，并执行添加选择器等操作。