rtvue-lowcode低代碼開發平台
rtvue-lowcode一款基於uniapp框架和uview組件庫的低代碼開發平台，項目提供可視化拖拽編輯器，采用MIT開源協議，適用於app、小程序等項目開發。
對於客戶端/瀏覽器端開發人員，真正意義的上做到了開箱即用！
目前項目正在研發中，已經實現的功能如下：表單組件，自定義表單，抽獎轉盤，圖表。
相信開發完畢之后，本項目將會是一個非常nice的工具，能夠極大減小企業app端開發成本。
項目預覽地址
開源不易，朋友們動下可愛的小手給我們一個小小的star，以此激勵我們將項目持續開發下去，項目的初始階段每個star對我們來說都彌足珍貴，簡簡單單的star能激勵我們團隊將項目認認真真地完成。
基本使用動畫演示
基本拖拽
app案例
頁面編輯
App預覽
常用模板
個人相關信息頁
圖表
業務組件
抽獎輪盤
項目運行安裝
克隆后直接安裝即可
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>
運行效果如下所示：
5.圖表，輪盤等攜帶插件使用方法
插件下載地址：
圖表下載地址
抽獎轉盤下載地址
在src目錄下新建uni_modules文件夾，例如將qiun-data-charts下載后，放入uni_modules內部，隨后即可使用圖表。
自定義組件開發步驟
由於精力有限，很多業務組件無法設計得十分完善，需要大家一起努力，如果您有興趣將您的組件開源過來，請發送郵件到1243137612@qq.com。
准備自定義組件開發之前，需要將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工具
開源項目
感謝以下開源項目