CodeFun如期而至

背景

将设计稿转代码是前端工程师日常不断重复的工作，这部分工作复杂度较低但工作占比较高，往往又比较枯燥繁琐，有时候开发迭代周期短，静态页面又多，常常让有些前端开发苦不堪言！

那么，有没有一款设计稿自动生成代码的工具，减少前端工程师的工作量，提升开发效率？

本文推荐一款前端代码自动生成的神器CodeFun，能够完美生成可读性很高的代码，目前支持微信小程序端、移动端H5和混合APP等。也就是说，通过这款工具，设计师再也不用还原走查了，测试再也不用适配样式了，前端开发再也不用切图写样式了，这不就是我们期待已久的神器吗？

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

在对设计稿轻约束的前提下实现高度还原，释放前端生产力，助力前端与设计师高效协作，让前端工程师关注更具挑战性的事情。在日常工作中，诸如像扣像素、调布局这些繁琐、枯燥的体力活都将得到极大的削减，原来 8 小时的工作量只需要 10 来分钟即可完成。

2、生成的代码是否会很难维护？
可能有人会质疑它生成的代码可读性，实际上生成的代码约等于一个中级工程师的前端水准。CodeFun 基于盒子模型的响应式布局和循环列表、九宫格等语义识别技术，可以生成如工程师手写一般的代码，精准还原设计稿，大幅度帮助前端工程师从繁琐的页面切图中拯救出来！该工具还在不断迭代进化中，日臻完善！

3、学习成本高吗？
对于前端工程师来说，几乎没有学习成本。
对于用惯了蓝湖/摹客的前端工程师来说，CodeFun使用流程与前者几乎一致：设计师上传完稿件后，工程师打开界面，选择任意需要的 UI 区域拷贝走想要的代码即可，只是从原来看标注变成了直接拷贝代码。

对于设计师来说，完全不需要遵循某些设计规范。
CodeFun 算法的识别过程并不依赖于设计稿中任何的手工标注、特殊编组或特定规范，所以设计师按照原有的流程和设计风格正常输出即可，零新增工作量、零学习成本。

如何使用 CodeFun 将设计稿变为前端代码

这部分主要给大家介绍如何在 1 分钟内将设计稿转换为小程序源代码，这部分内容将上传 Sketch 设计稿的流程作为范本介绍，PSD设计稿还处于内测阶段。

CodeFun 的使用流程只有 3 个步骤：

1. 在 Sketch 插件中上传设计稿
2. 在 CodeFun 工具中查看代码
3. 将生成的代码拷贝到自己已有的工程中即可
   

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

图片下载然后解压，双击图片进行安装。

在安装插件之前，请确保系统中已经装好 Sketch 。由于 Sketch 只支持 MacOs，所以插件端需要在 MacOs 中操作。使用的 Sketch 的版本建议在 60.0 以上，否则插件可能无法正常工作。

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

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

Sketch 菜单 > 插件 > CodeFun > 上传设计稿

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

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

例子中有 3 个页面，我想选择中间页面作为示例，这里选择【已选中画板】。上传完成后，点击【查看项目】按钮。

回到 CodeFun 工具界面，看到刚才上传的页面。

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

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

我们选择 CodeFun 设计稿，进入详情页，如图所示：

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

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

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

第一次打开时，会默认展示设置面板，如果不做任何修改，那么查看到的是小程序平台的原生代码。

依次点击复制按钮，很方便地将代码拷贝到系统的粘贴板中。

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

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

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

目前CodeFun组件化功能尚在开发中，如果页面中遇到交互式组件，我们不妨先采用下区域提取代码方式。

事实上，CodeFun这款工具还有很多进阶功能，比如提供编组解组、区域切图等功能，限于文章篇幅，不再一一展开说明，想了解更多可以查看官方文档。

总结

当我们聊 UI 设计稿智能生成代码的工具时，关心的不仅仅是 UI 的还原度，也关心生成的代码是否合理、可维护，如果生成的代码属于不可读不可维护的快餐代码，开发使用时还需要对生成的代码进一步修改和调整，那这样工具估计会被束之高阁！

然而我们这款CodeFun工具不仅可以高度还原各种UI页面，关键是生成代码易于维护，将日常工作中的繁琐且耗时的静态页面交给它来智能化生成代码，释放前端开发者生产力，把省下来的精力聚焦在真正的业务逻辑上！做前端，不搬砖！

👇👇👇

看到这里，是不是很激动！

经过多次内测，我们终于开放公测版本

点击官网链接

https://code.fun

扫下方二维码使用