rtvue-lowcode：一款基於uniapp框架和uview元件庫的開源低程式碼開發平臺

阿新 • • 發佈：2021-08-30

rtvue-lowcode低程式碼開發平臺

rtvue-lowcode一款基於uniapp框架和uview元件庫的低程式碼開發平臺，專案提供視覺化拖拽編輯器，採用MIT開源協議，適用於app、小程式等專案開發。
對於客戶端/瀏覽器端開發人員，真正意義的上做到了開箱即用！
目前專案正在研發中，已經實現的功能如下：表單元件，自定義表單，抽獎轉盤，圖表。

相信開發完畢之後，本專案將會是一個非常nice的工具，能夠極大減小企業app端開發成本。

專案預覽地址

Project Preview Address

開源不易，朋友們動下可愛的小手給我們一個小小的star，以此激勵我們將專案持續開發下去，專案的初始階段每個star對我們來說都彌足珍貴，簡簡單單的star能激勵我們團隊將專案認認真真地完成。

github地址

碼雲gitee地址

基本使用動畫演示

基本拖拽

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 [email protected] [email protected]

安裝後按照如下方式配置

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內部，隨後即可使用圖表。

自定義元件開發步驟

由於精力有限，很多業務元件無法設計得十分完善，需要大家一起努力，如果您有興趣將您的元件開源過來，請傳送郵件到[email protected]。
準備自定義元件開發之前，需要將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工具

開源專案

感謝以下開源專案

uniapp:uniapp
uview:uview
rtvue 圖表：ucharts
幸運轉盤:轉盤

筆者：洪湛所寫部落格均為原創。如果有需要轉載的地方請註明出處。謝謝合作。