CodeFun是一款非常出色的UI设计稿智能化形成源代码的一种手段，CodeFun能够精确复原设计稿，无需再不断UI走查，节约您大量繁杂工作中如像扣清晰度、调合理布局等。

【基本上介绍】

CodeFun 是一款 UI 设计稿智能化形成源代码的一种手段，能将 Sketch、Photoshop 的设计稿智能化转换成前面源代码。它最大的特色是：

精确复原设计稿，无需再不断 UI 走查

能够形成如技术工程师笔写一般的代码

在日常工作上，例如像扣清晰度、调合理布局这种繁杂、枯燥乏味的力气活也将获得很大的减少，原先 8 钟头工作量只需 10 来分钟即可进行。

【功能简介】

在开始完自然环境后，下面给大家介绍怎样在 1 分钟之内将设计稿转换成微信小程序源代码。

快速入门的实例教程会以上传 Sketch 设计稿的操作流程做为样本详细介绍。Photoshop应用软件上传以后流程与Sketch一样。

CodeFun 的操作流程仅有 3 个阶段：

在 Sketch 软件中上传设计稿

在 CodeFun 专用工具中查询代码

将产生的代码拷到自身现有的施工中就可以

上传设计稿

载入一份 Sketch 设计稿，随后软件菜单中开启 CodeFun 软件页面。

Sketch 菜单栏 gt; 软件 gt; CodeFun gt; 上传设计稿

在软件上登录

根据软件建立一个项目

随后选择项目和上传页面。

选定账户，挑选必须上传到哪一个团队里

选择项目室内空间，表明现阶段上传的页面将摆放在指定新项目室内空间，这儿挑选默认设置私人空间

选择项目，表明现阶段上传的页面将放置到指定新项目空间内具体项目下，这儿挑选刚建立的 演试实例 新项目

挑选上传的页面，能选一张或上传所有页面

事例含有 3 个页面，这儿挑选【该页面所有绘图工具】。 上传结束后，点一下【查询新项目】按键。

返回 CodeFun 专用工具页面，见到刚刚上传的页面。

查询代码

挑选一张设计稿，进到宝贝详情

宝贝详情整体分成前后左右三部分

左侧栏表明文本文档树，下文称 DOM Tree，该树形结构跟 HTML 的树形结构保持一致

中间画板地区，可用作挑选原素目标

右面栏是被选节点特性面板，用以展现款式特性、互动配置部件配备

点一下顶端菜单栏右上角的查询代码按键，开启代码面板

代码面板中默认设置展现 4 列，各自展现 HTML、CSS、JS 和全局性款式的代码。

第一次打开后，会默认设置展现设定面板，假如不做改动，那样查询过的是小程序平台的原生代码。

先后点击复制按键，很容易地将代码拷到全面的剪切板中。

获得 v-for 代码

针对 List、Grid 来讲，大家想得到的代码遵照一种循环再生的方式，可以根据数据长度而全自动转变，而非静态数据元素反复拼接，所以它们在 HTML 上应当是相近 VUE 中 v-for 的书写。

CodeFun 可以支持导出 v-for 方式，以页面中下方 List 为例子，解读怎样得到循环系统代码。

最先，在代码面板中点击右上角的【设定】按键，开启【导出为循环系统列表】这个选项，开启这一全局性选择项后，页面里被加上 List、Grid 这种循环系统列表标签的原素，也将译成 v-for 的方式。

下面为必须 v-for 的地区加上 List 标识，选定 List 外层的 View 连接点。

点一下 Viewport 右上角的【标识】按键，开启标识面板，然后点击 【List】 标识。 目地是把地区标记为 List。

保证添加标签时 List View 连接点应当是被选中的情况。

标识结束后，List 区域内的代码变成根据 v-for 的书写。

数据绑定

一个正常的列表因其数据信息是以后面载入所得到的，因此在 HTML 里的代码一般是要用自变量去关联，当自变量具体内容升级时，页面展现的效果也是与此同时升级。

现今代码虽是根据 v-for 样式的，但里边的照片、文字的信息依旧还是静态的。

下面，大家将这些静态数据原素换成 JS 里的动态性自变量。

最先，开启代码设定面板，打开 DataBinding 导出方式

因为【CSS】面板和【全局性款式】面板暂时不考虑使用，所以先关闭相匹配这个选项掩藏他们。

选定 List 的外层 View，点击 Viewport 右上角的【数据绑定】按键，

页面右侧发生数据绑定面板，面板展示的是 JS 中变量的名称，默认设置前提下页面里的原素全是静态的，并不是源自 JS 自变量，因此面板里面的内容全是空。

这儿对 List 地区里的自变量开展取名。

在 List 右侧的文本框中填好 dataList，表明列表的信息来自一个叫 dataList 的自变量。

列表组员里都有一个图片，这儿只需要填写第一个组员就可以，这儿填好它自变量名字叫做 iconImg。每个成员上方都是有一行文本，变量命名为 title，最终有关折扣优惠元素被命名为 discount。

填好完成后，点一下右下方保存按钮。

【升级日志】

组件化 amp; 功能优化

- 小程序关键情景款式复原

- 新增加文字换行消除专用工具

- 新增加色调企业适用配备

- 新增加原素宽高比选定表明

- 算法优化 amp; 难题修补

- PS Plugin 0.4.3

- Figma Plugin 0.2.2

- 及时设计方案 Plugin 0.2.2

- Sketch Plugin 0.9.56