CodeFun是设生成一款相当优秀的UI设计稿智能生成源代码的工具，CodeFun可以精准还原设计稿，计稿件下不再需要反复UI走查，智能载节省您大量的源代繁琐工作如像扣像素、调布局等。码软 CodeFun是官方一款UI设计稿智能生成源代码的工具，可以将Sketch、设生成Photoshop的计稿件下设计稿智能转换为前端源代码。它最大的智能载特色是： 精准还原设计稿，不再需要反复UI走查 可以生成如工程师手写一般的源代代码 在日常工作中，诸如像扣像素、码软调布局这些繁琐、官方枯燥的设生成体力活都将得到极大的削减，原来8小时的计稿件下工作量只需要10来分钟即可完成。 在准备完环境后，智能载接下来为大家介绍如何在1分钟内将设计稿转换为小程序源代码。 快速上手的教程将以上传Sketch设计稿的流程作为范本介绍。Photoshop使用插件上传之后流程与Sketch一样。 CodeFun的使用流程只有3个步骤： 在Sketch插件中上传设计稿 在CodeFun工具中查看代码 将生成的代码拷贝到自己已有的工程中即可 上传设计稿 加载一份Sketch设计稿，然后插件菜单中打开CodeFun插件界面。 Sketch菜单>插件>CodeFun>上传设计稿 在插件上登录账号 通过插件创建一个项目 然后选择项目和上传页面。 选中账号，选择需要上传到哪个团队中 选择项目空间，表示当前上传的页面将放置到指定项目空间，这里选择默认的个人空间 选择项目，表示当前上传的页面将放置到指定的项目空间中具体项目下，这里选择刚刚创建的演示案例项目 选择上传的页面，可以选择单张或上传全部页面 例子中有3个页面，这里选择【该页面全部画板】。上传完成后，点击【查看项目】按钮。 回到CodeFun工具界面，看到刚才上传的页面。 查看代码 选择一张设计稿，进入详情页 详情页总体分为左中右三部分 左边栏显示文档树，后文称DOMTree，该树结构跟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。 确保打标签时ListView节点应该是被选中的状态。 标记完成后，List区域的代码变为基于v-for的写法。 数据绑定 一个正常的列表由于其数据是从后端读取得到的，所以在HTML中的代码通常是需要用变量去绑定，当变量内容更新时，页面展示的效果也同时更新。 现在的代码虽然是基于v-for风格的，但里面的图片、文本的数据依然还是静态的。 接下来，我们把这些静态元素替换成JS中的动态变量。 首先，打开代码设置面板，开启DataBinding输出模式 由于【CSS】面板和【全局样式】面板暂时不需要用到，所以先关掉对应的选项隐藏它们。 选中List的最外层View，然后点击Viewport右上角的【数据绑定】按钮， 页面右边出现数据绑定面板，面板展示的是JS中变量的名字，默认情况下页面中的元素都是静态的，并非取自JS变量，所以面板中的内容都是空的。 这里对List区域中的变量进行命名。 在List右边的输入框中填写dataList，表示列表的数据来源于一个叫dataList的变量。 列表成员中都有一个图片，这里只需要填写第一个成员即可，这里填写它的变量名叫iconImg。每个成员的上方都有一行文字，变量命名为title，最后关于折扣的元素命名为discount。 填写完毕后，点击右下角保存按钮。 组件化&功能优化 -微信小程序核心场景样式还原 -新增文字换行清除工具 -新增颜色单位支持配置 -新增元素宽高选中显示 -算法优化&问题修复 -PSPlugin0.4.3 -FigmaPlugin0.2.2 -即时设计Plugin0.2.2 -SketchPlugin0.9.56