组件化
使用场景
把设计稿上传到 CodeFun 平台之后，这时直接查看/下载代码，只能得到由 View/Text/Image 组成的静态页面，不具备交互能力。
而通常我们需要在页面上收集用户输入、提供反馈、展示动态数据 等，以此来达到与用户的动态交互，从而实现所需的业务逻辑。
又或者团队内部已经有了一批通用的公共组件，如何将这些组件与 CodeFun 打通，在生成代码时自动生成组件代码呢？
为此，我们提供了组件化能力，可以自定义常见组件（输入框、单选/多选框等）、高级组件（日历、进度条等），或关联已有组件。
视频教程
tabs 组件视频教程
常用表单视频教程
自定义组件视频教程
使用教程
本节教程以 微信小程序 平台 和 Vant Weapp UI 库 为模版进行示例说明。
定义组件
- 创建组件库：CodeFun 首页 -> 个人空间或团队空间 -> 组件库 -> 添加组件库
字段说明：
- 名称：用于展示，方便用户区分不同的组件库
- 代码平台：该组件库所适用的代码平台（在微信小程序平台标记的组件，当切换到 Vue 平台时会被忽略）
- 所属团队：设置组件库的可见范围
- 全局样式：可选，添加自定义全局样式，生成代码时会统一生成到全局样式中
- 创建组件：点击已创建的组件库 -> 组件库详情页 -> 添加组件
组件库详情页包含：左侧的组件树以及右侧的组件详情
一个组件库可以包含多个组件，每个组件又可以创建自己的子组件，这样组件库内所有的组件就组成了一个树状结构。
本质上每个组件以标签的形式存在，当一个节点被标记之后，也会展示相应的标签，目前的标签有以下 3 种类型：
- 组件：包含依赖、编译模版、属性等配置项，是生成代码的入口
- 属性提取器：与某个组件属性绑定，当标记该标签时自动提取值到指定的属性
- Slot：根据组件的编译模版配置，来参与最终的代码生成
目前 CodeFun 支持以下 3 种表达式语法，这些语法将在配置组件模版、属性时使用到：
自定义属性表达式：$.props.x，获取组件已定义的属性 x 对应的值
DOM 属性表达式：$.x，获取 DOM 节点的属性 x 对应的值（DOM 节点指的是设计稿详情页左侧 DOM 树上的节点，大部分时候这些节点属性供内部使用，这里仅开放部分属性供组件化使用）
// 节点坐标信息
interface UIFrame {
left: number // x 轴坐标
top: number // y 轴坐标
width: number // 宽度
height: number // 高度
}
// DOM 节点通用属性
interface UIDOMNode {
_id: string // 节点 id
type: string // 节点类型：View/Text/Image
frame: UIFrame // 相对于父节点的坐标信息
absFrame: UIFrame // 对于设计稿左上原点的坐标信息
style: Record<string, string> // 节点样式信息，以驼峰形式命名的 css 属性，例如：{ fontSize: 12px }
}
// View 节点
interface UIViewNode extends UIDOMNode {
children: UIDOMNode[] // 孩子节点
}
// Text 节点
interface UITextNode extends UIDOMNode {
text: string // 文本内容
}
// Image 节点
interface UIImageNode extends UIDOMNode {
src: string // 图片 url
}标签选择表达式：$('x y')，获取标记了 x 或 y 的 DOM 节点（这里的 DOM 节点同上），多个标签以空格分隔
标签的使用场景和定义
组件标签：将节点按照自定义模版生成代码，顶层标签必须是组件标签
字段说明：
- 名称：用于展示，标记节点之后也会在 DOM 树上展示对应的标签名称
- 智能识别：可选，关联智能标签，可以实现自动标记和智能处理，详情参照智能组件
- 依赖导入：可选，配置第三方依赖或本地依赖（设置了依赖导入，就需要配置相关的依赖设置项）
- 导入名称：导入的组件名
- 是否解构导入：是否解构导入组件名，例如：解构 import { name} from 'x'，非解构 import name from 'x'
- 导入路径：组件所在位置，第三方 npm 包路径或本地路径
- Npm 包名：导入的组件所在的 npm 包名
- Npm 版本：npm 包版本号，默认 *，用于生成 package.json 中的依赖项
- 编译模版：可选，为空时不生成代码，需要是合法的 xml 语法，可嵌套任意层级，包含普通标签和指令标签
- 普通标签：会被原样生成到代码中，属性值支持
自定义属性表达式或DOM 属性表达式 - 指令标签：内部指令，会按照特殊规则进行代码生成，有以下指令标签
- cf-slot: 根据 cf-content 指令属性获取到的 DOM 节点进行代码生成，cf-content 支持
DOM 属性表达式或标签选择表达式，其他属性按照普通属性生成
- cf-slot: 根据 cf-content 指令属性获取到的 DOM 节点进行代码生成，cf-content 支持
- 普通标签：会被原样生成到代码中，属性值支持
- 属性：组件配置项，主要用于编译模版中的属性绑定，目前有 4 种属性：输入框、布尔值、下拉选项、颜色，属性默认值支持
DOM 属性表达式
属性提取器标签：通过打标签的方式自动提取值到组件属性，简化手动填写属性值的繁琐
- 名称：用于展示，同组件标签名称
- 关联属性：关联自动提取的目标属性，当标记该标签时，会根据
提取表达式获取到的值自动赋值到关联属性上 - 提取表达式：支持
DOM 属性表达式
Slot 标签：主要用于筛选节点，将标记了该标签的节点插入到组件编译模版的指定位置
- 名称：用于展示，同组件标签名称
标记组件
- 标记组件：进入设计稿页面 -> 选中要标记的节点 -> 打开标记组件面板 -> 标记组件
- 查看代码：标记的组件节点已按照组件定义进行代码生成
温馨提示：
- 一个节点可以标记多个标签，当两个
组件标签同时出现在节点上时，会以第一个组件标签的编译模版进行代码生成。
样式还原
生成组件代码时如果按照设计稿进行样式还原，就需要深层次的样式穿透、覆盖，由于各 UI 库自定义样式规则不同，很难提供统一模式的样式还原。
根据常用的开发流程，大多数公司内部有统一的组件风格，会针对 UI 库自带的主题样式进行全局配置、覆盖，实现自定义样式的修改。
基于以上两点，目前组件化在样式还原上遵循以下原则：
- 只保留组件位置样式（left、right、margin、flex、alignSelf 等），其他样式全部丢弃（width、padding、color 等）
- 在组件库中配置全局样式，实现样式统一、覆盖
官方组件
为了提供开箱即用的组件化功能，目前官方提供以下组件库：
- 各个平台的基础组件库
- weapp（微信小程序）原生组件
- taro（Vue）原生组件
- uniapp 原生组件
- vant-weapp，基于 Vant Weapp 的微信小程序组件库
- uView1.0，基于 uView UI 的 uni-app 组件库
以上组件库对所有用户可见，未来还会上线更多..
智能组件
Header
- 标记页面顶部的 Header 栏，滚动时固定在顶部
- 如果节点不在顶部，会被移动到顶部，以便形成合理的布局，将节点固定在顶部
- 每个页面只能标记一个 Header
- 生成微信小程序代码时，自动生成导航栏配置
Footer
- 标记页面底部的 Footer 栏，滚动时固定在底部
- 如果节点不在底部，会被移动到底部，以便形成合理的布局，将节点固定在底部
Fixed
- 标记需要固定位置的节点，滚动时位置固定不变
- 如果节点位置不对，会将节点移动到根节点下，以便形成合理的布局，将节点固定在页面某个位置
List
- 标记 List 节点
- 自动识别内部的 ListItem 节点，并标记为 ListItem
- 生成代码时，根据
将 List 标签输出为循环列表开关进行智能生成
Grid
- 标记 Grid 节点，自动调整内部节点位置，形成更好的 Grid 布局模式
- 自动识别内部的 GridItem 节点，并标记为 GridItem
- 自动生成 grid 样式
