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
相关攻略
相关专题
多特软件专题为您提供美女视频app,羞羞色院app;安卓苹果版软件app一应俱全。多特软件站只提供绿色、无毒、无插件、无木马的纯绿色工具下载
2024最新免费2d游戏有哪些?不断更新最新免费2d游戏大全，众多不同风格类型最新免费2d游戏下载，下载玩玩看吧!
多特软件站提供口袋影院类软件多个版本以及多个同类软件高速下载地址：安卓版、苹果版、电脑版等官方正式版免费软件下载，我们只提供绿色、无毒、无插件、无木马软件下载，影视资源尽在这里，让你享受将对所有的电影握在手心里的感觉.让你在第一时间就能收看到收看到你想看的资源
推荐几款非常好玩的单机版战争游戏，手机上非常好玩的战争游戏单机版都在这里推荐给大家了，喜欢的朋友不要在犹豫，快来下载吧。
同类排行
最近更新
更多分类
