Code Block -- 让 Web 网页制作变得更简单

951 阅读3分钟

什么是 Code Block ?

Code Block 是一个基于 Chameleon(一个 web 可视化编辑框架)开发的在线网页编辑发布平台,面向普通用户以及开发人员。普通用户也可以很方便的制作 Web page, 同时开发人员的自行开发的组件可以很方便的页面组件的形式提供给普通用户使用,从而实现专业的人做专业的事的目标,同时也给普通用户有了更多的选择空间以及定制空间。

Code block 目前主要面向 C 端展示页的制作开发,目前测试开发中...

GO Code Block

登录

使用测试账号直接点击登录,也可以受用 Github 登录

image.png

创建项目

点击 “+” 号卡片创建项目,填写必要信息

image.png

进入项目

点击刚创建的项目卡片 image.png

进入项目: image.png

Pages

用于管理项目下的页面

创建页面

点击创建按钮,并填入必要信息

image.png

进入页面

点击 Edit 进入页面

image.png

组件列表

选择左边鼠垂直方向第二个图标

image.png

此时可以将对应的组件拖入到画布中,并调节组件配置,修改外观

image.png

组件库还在丰富中,y也可以自行在线开发集成

大纲树

选择左边鼠垂直方向第一个图标,可以查看页面组成结构

image.png

组件设置面板

当选中一个组件之后可以修改组件的基本配置

Property 面板用于控制组件的外观和行为,面向普通用户,这里的属性配置由组件的开发者决定,组件越强大暴露的属性就会越多

image.png

Visual 主要用于控制组件的 css 外观,给有一定的开发基础用户使用,也可进行响应式 css 配置

image.png

保存并页面访问

点击保存按钮,并返回页面列表,点击 visit 即可访问页面

image.png

visit

image.png

Component 开发

当组件库不满足需求时,有一定开发能力的用户可以在该模块快速实现功能模块并集成到页面中使用

创建组件

点击创建按钮,并填写必要信息

image.png

点击 Edit 进入组件编辑页面

image.png

image.png

用户可以在此处进行组件开发,该编辑器是一个在线开发编译系统,具有如下特点:

  • 可以直接引入大部分 npm 包(如果报错,就表示不能使用该包)
  • 可以直接将代码编译为 ES5 代码直接在浏览器运行
  • 支持 Typescript 在线提示

在线编译系统可能需要科学上网,可能存在功能不稳定的情况,请尽可能保持组件的功能单一,控制其代码量

组件开发详解

Wating...

发布组件,使其可以被页面使用

当修改好代码之后,点击右上角 Build CDN ,等待成功提示

回到页面编辑页面并选择组件列表

image.png

将组件拖入到画布中,点击保存

image.png

查看页面 Visit

image.png

此时自定义组件就已经被集成到页面中并被发布

更多

  • 组件市场: 拥有丰富的展示组件,开发者可以快速发布自己的组件,并提供可视化预览,普通用户可以快速使用的地方
  • 提供简单的 API 数据存储功能: 基于 API 我们可以做一些更丰富的页面功能,如个人版在线笔记功能,随意集成自己喜欢的编辑器
  • OSS 文件存储功能:可以托管图片等资源给页面使用
  • More (Wating...)

参考