Code.fun

一款UI 设计稿智能生成源代码的工具，我们可以上传Sketch、PSD等形式的设计稿，通过智能化技术一键生成可维护的前端代码，包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。

在对设计稿轻约束的前提下实现高度还原，释放前端生产力，助力前端与设计师高效协作，让前端工程师关注更具挑战性的事情。

如何使用

这部分内容将上传 Sketch 设计稿的流程作为范本介绍，PSD设计稿还处于内测阶段。

CodeFun 的使用流程只有 3 个步骤： 在 Sketch 插件中上传设计稿 在 CodeFun 工具中查看代码 将生成的代码拷贝到自己已有的工程中即可

1、安装 Sketch 插件 在CodeFun官网注册好账号后，登陆CodeFun后在用户菜单中下载插件。

接着，打开 Sketch，插件菜单中出现 CodeFun 选项，安装完成。

上传设计稿

加载一份 Sketch 设计稿（下载示例设计稿），然后插件菜单中打开 CodeFun 插件界面

在插件上登陆账号,通过插件创建一个项目,然后选择项目和上传页面。

• 选择项目，表示当前上传的页面将放置到指定的项目中，这里选择刚刚创建的 “前端智能化codefun” 项目
• 选择上传的页面，可以选择单张或上传全部页面

例子中有 3 个页面，想选择中间页面作为示例，这里选择【已选中画板】。上传完成后，点击【查看项目】按钮。可以先进行代码的预览，和图片资源的查看

以上是单个没有问题的话,可以进行简单的跳转交互，数据绑定的操作，可以下载代码

获取代码

用户在上传完设计稿后，有两种获取代码的方式：

区域提取代码 整站打包下载 整站打包下载的方式相对来说比较简单，这里主要介绍区域提取代码，这种方式也是我们比较推崇的，用户可以根据自己的需求，拷贝任意区域的代码到自己已有的工程项目中。

我们选择 CodeFun 设计稿，进入详情页：

详情页总体分为左中右三部分

• 左边栏显示文档树，后文称 Dom Tree，该树结构跟 HTML 的树结构保持一致
• 中间是画布区域，可以用于选择元素对象
• 右边栏是被选节点的属性面板，用于展示样式属性、交互配置和组件配置 点击顶部工具栏右上角的查看代码按钮，打开代码面板

代码面板中默认展示 4 列，分别展示 HTML、CSS、JS 和全局样式的代码。

第一次打开时，会默认展示设置面板，如果不做任何修改，那么查看到的是小程序平台的原生代码。 依次点击复制按钮，很方便地将代码拷贝到系统的粘贴板中。

打开小程序开发工具，分别将这四部分代码粘贴到小程序相应的文件中，这样就可以整页提取代码，但有时候页面中会遇到类似“Tab 标签页”、“Swipe 轮播”等交互式组件时，自动生成的整页代码并不能支持交互，此时我们就需要区域提取代码功能,拷贝我们想要区域的代码到已有的工程项目中

点击 Dom 树或者画布上的任意节点，可以观察到代码窗口的代码会发生变化，这正是 CodeFun 最重要的区域提供功能

注意：当点击画布的空白区域时，Dom 树和画板都不再选中任何节点，此时代码窗口将显示整页代码。