rtvue-lowcode 簡介

rtvue-lowcode是一款基於uni-app框架和uview元件庫開發的app視覺化拖拽專案，適用於企業、個人等基於uni-app技術棧開發的專案。適合各種小程式平臺的開發人員、產品經理、UI等等。採用MIT開源協議，集成了很多常見的業務程式碼，幫助開發人員快速板磚，快速實現產品。真正意義上做到了開箱即用！

目前專案正在開發，
希望大家能給我們個小小的star，每個star對我們來說都很珍貴，希望能激勵我們團隊將專案認認真真地做完。

github地址
碼雲gitee地址
動畫演示：

目前專案正在開發中，完整版本還未釋出。專案預覽地址 Project Preview Address

專案執行安裝

克隆後直接安裝即可

yarn install && yarn serve

自定義元件開發步驟

準備自定義元件開發之前，需要將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中主要定義了元件需要的引數型別，目前計劃有兩種引數型別：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工具