RollCode模式

RollCode 模式是一种以 iframe 的方式嵌入并使用 RollCode 编辑器的方式，在 RollCode 模式下，你可以实时修改你的代码和拖拽组件，并且可以随时预览你的页面效果。

如何使用 RollCode 模式

开启 RollCode 模式很简单，只要在任意页面中选中页面配置面板，并打开"RollCode 模式"开关, 并粘贴你的开发地址即可。（开发完成之后需要替换为线上地址）

启动本地项目

我们来快速实现一个简单的 RollCode 模式页面。

以 Vue 的模版为例，我们先创建一个 Vue 的项目

npm create vue@latest my-project -- --default

安装依赖 & 运行项目

cd my-project && npm install

npm run dev

打开RollCode模式

项目运行之后，默认会跑在 http://localhost:5173/, 我们将这个地址拷贝。并打开 RollCode 编辑器，在页面配置面板中打开 RollCode 模式，并粘贴你的开发地址。 RollCode模式

此时，你已经可以在 RollCode 编辑器中看到你的页面效果了。但是，现在还没有真正进入 RollCode 模式，我们再引入 RollCode 的 sdk，地址是你当前的页面域名下的/js/rollcode.umd.js。

比如我本地跑在8080端口,则 sdk 地址为 http://localhost:8080/js/rollcode.umd.js。我们可以将这个文件下载下来，并放置在项目文件中本地引用，也可以直接在 html 中引入。

注意: rollcodejs有两个版本，开发阶段建议使用/js/rollcode.umd.js, 生产阶段建议使用/js/rollcode.prod.umd.js

引入rollcodejs

这里以直接在 html 中引入为例，在 index.html 中引入

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="http://localhost:8080/js/rollcode.umd.js"></script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

此时，还需要做一些初始化。

RollCode初始化

我们在 app.vue 上声明一块空白Region

<template>
  <header>
    <img
      alt="Vue logo"
      class="logo"
      src="./assets/logo.svg"
      width="125"
      height="125"
    />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <!-- 这里我们去掉原来的内容 <TheWelcome /> -->
    <div id="newContent"></div>
  </main>
</template>

并给这块新的区域一点样式:

#newContent {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 200px;
  margin: 10px auto;
}

此时，你可以回到编辑器界面，通过Ctrl+R或⌘+R刷新, 观察画布内容，应该变成了以下内容：

接下来，我们为这个区域注入“魔法”。回到 app.vue，我们修改 script 部分：

onMounted(() => {
  // RollCode已通过script引入到window全局中
  const rollcode = new RollCode({
    regions: [
      {
        label: "主内容",
        id: "newContent",
        el: document.getElementById("newContent"),
      },
    ],
  });
  rollcode.render();
});

修改完之后重新加载页面，就能看到下图的效果了，并且此时可以往newContent区域添加左侧一列的组件。不过，此时如果放置图片还会有一些小问题，我们在补充 storage 字段：

const rollcode = new RollCode({
  storage: {
    endPoint: "http://localhost:9000",
    bucket: "rollcode",
  },
  regions: [
    {
      label: "主内容",
      id: "newContent",
      el: document.getElementById("newContent"),
    },
  ],
});

然后我们可以选取一张在媒体库中的图片，并为其设置颜色：

至此，我们已完成了RollCode模式的基本操作。快去试试吧！

用法

为原有的业务代码扩展分页，跟随平台项目的发布，每一个建立RollCode模式的页面都会得到新的链接
在原有的业务代码上获取RollCode的编辑内容，实现“JSON可视化配置”。

注意

开发阶段可以通过快捷键Ctrl+R或⌘+R来快速刷新画布，实现页面的热重载
页面在发布之前切记将地址换成生产的地址， sdk也更换成线上版本
目前内测阶段内会内置所有组件，正式发布后会通过组件市场减少复杂的组件内置。进而减少包体积。
RollCode不限制框架，你也可以在React等框架上使用
RollCode与正常模式互斥，不可以使用弹窗和原有页面的配置。

如何使用 RollCode 模式​

启动本地项目​

打开RollCode模式​

引入rollcodejs​

RollCode初始化​

用法​

如何使用 RollCode 模式

启动本地项目

打开RollCode模式

引入rollcodejs

RollCode初始化

用法