低代码开发平台的新星：RollCode低代码平台

用户2530560695284
85 阅读4分钟

近年来，低代码开发平台在科技行业掀起了一股热潮。各大云服务商纷纷推出自己的解决方案：阿里云发布了"易搭"平台，用户仅需通过直观的拖拽操作和参数设置就能快速构建业务系统；腾讯云则推出了"微搭"产品，借助丰富的行业模板、可自由组合的组件库和所见即所得的配置界面，轻松实现跨平台应用开发。接下来，我们将向大家介绍RollCode低代码开发平台，目前该平台正处于内测阶段，荣幸我获得了这次内测体验机会。

RollCode提出了一个非常新的设计模式即：View = Render(Data) + Embedding，也就是说它将View（视图）看做两部分的组合，静态数据的绘制:Render(Data) + 灵活的代码嵌入:Embedding。Embedding通过组件（自定义组件） 、页面（自定义页面） 、外链  （RollCode模式）  三个级别的嵌入方案来解决动态数据、更灵活的页面开发需求。

对传统的低代码开发平台来说，View(视图)都是通过Render（方法）来渲染Model（数据模型）的，复杂的表单配置界面、繁杂的数据绑定流程、难以理解的组件属性面板、需要大量学习成本的操作界面。根本原因在于动态数据模型无法通过简单直观的可视化界面表达。如果想做到各式各样的数据都能灵活配置，只能通过大量的配置组件堆砌，塞满屏幕

concept-4-16ee8492a8849b61a542baca01b1317a.png

也就是说他真正做到了让运营驱动设计，让灵活归于开发。

他的自定义组件很有意思，等于说运营提出一个高复用的模块，只需要让程序去实现对应的组件就可以了，大大减少了运营和程序的沟通成本，加速了代码更新迭代的速度。

我们现在来讲下他的自定义模块如何使用：

下面是官网提供的案例

ComponentExample.vue

<template>  
    <div>  
        <p>这是ComponentExample组件</p>  
        <p>测试文本属性：{{ props.text }}</p>  
        <button @click="clickHandler">点击按钮测试</button>  
    </div>  
</template>  
<script setup>  
    import { onMounted, ref } from 'vue';  
    const props = defineProps({  
        // 这里的属性对应meta中setters的key， 类型根据meta中setters的type来确定  
        text: String,  
    });  
    onMounted(() => {  
        console.log('组件挂载完成');  
    });  
    const clickHandler = () => {  
        alert('点击了按钮！');  
    };  

    // 这里可以自定义对外暴露的方法，同样也需要在 meta 中定义 actions  
    defineExpose({  
        exposeName: clickHandler  
    })  
</script>

index.js

import ComponentExample from './ComponentExample.vue';  
    // RollCode组件元数据规范  
export const meta = {  
    setters: {  
        text: {  
                // 所有类型均可在Props文章中查看  
                type: 'Text',  
                label: '测试文本属性',  
                default: '这是我测试值'  
            }  
        },  
        actions: [  
            {  
                label: '仅展示的A行为',  
                name: 'exposeName',  
            }  
        ],  
    };  
export default ComponentExample;

第一步：我们需要将自己的vue代码打包成 umd 或 amd 模块

首先先确保你的文档目录是这样的

my-component/

├── src/

│ ├── components/

│ │ └── ComponentExample.vue

│ └── index.js

├── package.json

└── vite.config.js 或 vue.config.js

使用 Vite 打包

  1. 安装 Vite：

bash

npm install vite @vitejs/plugin-vue --save-dev

2. 创建 vite.config.js：

javascript

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.js'),
      name: 'MyComponent',
      fileName: (format) => `my-component.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

使用 Vue CLI 打包

  1. 修改 vue.config.js：

javascript

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  configureWebpack: {
    entry: {
      app: path.resolve(__dirname, './src/index.js')
    },
    output: {
      libraryExport: 'default'
    }
  },
  css: {
    extract: false
  }
})

然后在自定义资产页上传自己的组件就可以了

image.png

*注意组件名称要用英文

上传完成后就可以在页面编辑页添加自定义组件了

image.png

注意代码不能有报错，不然这里也是不会显示的

RollCode作为一款创新的低代码开发平台，确实为不同规模的企业提供了高效的H5开发解决方案。对于初创公司而言，它能够快速实现精美H5网页的搭建；而对于成熟企业，其内置的RollCode，自定义组件，自定义页面等功能则大大简化了H5活动页面的迭代和维护流程。目前该平台虽处于内测阶段，但其展现出的潜力令人期待。相信随着产品的持续优化和完善，RollCode有望为行业带来显著的效率提升和变革性影响。

avatar
文章
阅读
粉丝