什么是 Code Block ?
Code Block 是一个基于 Chameleon(一个 web 可视化编辑框架)开发的在线网页编辑发布平台,面向普通用户以及开发人员。普通用户也可以很方便的制作 Web page, 同时开发人员的自行开发的组件可以很方便的页面组件的形式提供给普通用户使用,从而实现专业的人做专业的事的目标,同时也给普通用户有了更多的选择空间以及定制空间。
Code block 目前主要面向 C 端展示页的制作开发,目前测试开发中...
GO Code Block
登录
使用测试账号直接点击登录,也可以受用 Github 登录
创建项目
点击 “+” 号卡片创建项目,填写必要信息
进入项目
点击刚创建的项目卡片
进入项目:
Pages
用于管理项目下的页面
创建页面
点击创建按钮,并填入必要信息
进入页面
点击 Edit 进入页面
组件列表
选择左边鼠垂直方向第二个图标
此时可以将对应的组件拖入到画布中,并调节组件配置,修改外观
组件库还在丰富中,y也可以自行在线开发集成
大纲树
选择左边鼠垂直方向第一个图标,可以查看页面组成结构
组件设置面板
当选中一个组件之后可以修改组件的基本配置
Property 面板用于控制组件的外观和行为,面向普通用户,这里的属性配置由组件的开发者决定,组件越强大暴露的属性就会越多
Visual 主要用于控制组件的 css 外观,给有一定的开发基础用户使用,也可进行响应式 css 配置
保存并页面访问
点击保存按钮,并返回页面列表,点击 visit 即可访问页面
Component 开发
当组件库不满足需求时,有一定开发能力的用户可以在该模块快速实现功能模块并集成到页面中使用
创建组件
点击创建按钮,并填写必要信息
点击 Edit 进入组件编辑页面
用户可以在此处进行组件开发,该编辑器是一个在线开发编译系统,具有如下特点:
- 可以直接引入大部分 npm 包(如果报错,就表示不能使用该包)
- 可以直接将代码编译为 ES5 代码直接在浏览器运行
- 支持 Typescript 在线提示
在线编译系统可能需要科学上网,可能存在功能不稳定的情况,请尽可能保持组件的功能单一,控制其代码量
组件开发详解
Wating...
发布组件,使其可以被页面使用
当修改好代码之后,点击右上角 Build CDN ,等待成功提示
回到页面编辑页面并选择组件列表
将组件拖入到画布中,点击保存
查看页面 Visit
此时自定义组件就已经被集成到页面中并被发布
更多
- 组件市场: 拥有丰富的展示组件,开发者可以快速发布自己的组件,并提供可视化预览,普通用户可以快速使用的地方
- 提供简单的 API 数据存储功能: 基于 API 我们可以做一些更丰富的页面功能,如个人版在线笔记功能,随意集成自己喜欢的编辑器
- OSS 文件存储功能:可以托管图片等资源给页面使用
- More (Wating...)