猜您喜欢:
CodeFun 为用户提供了专业出色的UI设计稿智能生成源代码的功能，很适合平时需要开展设计工作的朋友们使用，软件能够帮助用户省去走查UI的过程，轻松将设计稿还原出来，并且结果十分的精准，能节省大量的视觉，让设计师工作效率更高，可以用来扣像素、调布局等等，界面简洁。
在准备完环境后，接下来为大家介绍如何在 1 分钟内将设计稿转换为小程序源代码。
快速上手的教程将以上传 Sketch 设计稿的流程作为范本介绍。Photoshop使用插件上传之后流程与Sketch一样。
CodeFun 的使用流程只有 3 个步骤：
在 Sketch 插件中上传设计稿
在 CodeFun 工具中查看代码
将生成的代码拷贝到自己已有的工程中即可
上传设计稿
加载一份 Sketch 设计稿，然后插件菜单中打开 CodeFun 插件界面。
Sketch 菜单 > 插件 > CodeFun > 上传设计稿
在插件上登录账号
通过插件创建一个项目
然后选择项目和上传页面。
选中账号，选择需要上传到哪个团队中
选择项目空间，表示当前上传的页面将放置到指定项目空间，这里选择默认的个人空间
选择项目，表示当前上传的页面将放置到指定的项目空间中具体项目下，这里选择刚刚创建的 演示案例 项目
选择上传的页面，可以选择单张或上传全部页面
例子中有 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。
填写完毕后，点击右下角保存按钮。
组件化 & 功能优化
- 微信小程序核心场景样式还原
- 新增文字换行清除工具
- 新增颜色单位支持配置
- 新增元素宽高选中显示
- 算法优化 & 问题修复
- PS Plugin 0.4.3
- Figma Plugin 0.2.2
- 即时设计 Plugin 0.2.2
- Sketch Plugin 0.9.56
以上就是CodeFun(UI设计稿智能生成源代码软件)的全部内容了，非凡软件站为您提供最好用的软件，为您带来最新的游戏!
UI设计软件大全 UI设计就是户界面设计，是对软件的交互和逻辑以及界面美观的整体设计，不单单只是绘画，兼具艺术性和技术性，并且有着良好的发展前景，今天带来的UI设计软件能够帮助用户更好地使用环境和方式设计出游戏的界面。
Ant Design(UI设计语言)v4.11.6 Ant Design 专业且实用，适用于前端设计人员，能够帮...详情>>
Adobe XD 2022中文免激活完整版本v54.1.12.5 Adobe XD 2022中文免激活完整版本能够为用户设计图...详情>>
云安网络验证皮肤编辑器v1.44 平时使用电脑经常会看到各种各样的操作界面，想要按照自己的想法...详情>>
Steam手机版是全球最大的综合性数字发行平台之一，它汇集了众多优秀的第三方游戏发行商的游戏作品。玩家可以在该平台购买、下载、讨论、上传和分享游戏，享受全方位的游戏服务。接下来，小编我来为您详细介绍如何在Steam手机版上添加好友，让您的游戏社交圈更加丰富多彩。steam手机版添加好友方法详解第一步：登录后，在Steam手机版的主界面，点击左上角的按钮(通常是一个三横图标或类似的菜单按钮)。在弹出
生活中，有时候我们需要了解某些药品是否被医保覆盖，或者附近哪些药店可以买到我们需要的药物。这篇文章将用简单的步骤教你如何轻松查询江西医疗保障相关的药品和药店信息，帮助你更方便地管理家庭健康，节省时间和精力。让我们一起来看看具体怎么做吧。如何找药品?第一步：关注“江西医疗保障”微信公众号;第二步：在公众号聊天页面点击底部菜单中的“微服务”-“江西医保药品比价”;第三步：进入江西医保药品比价页面，点击
想知道去医院看病买药花的钱是不是合理?河南医保推出了医药比价查询服务，就像您购物时的“货比三家”。通过这个平台，您可以轻松了解不同医院和药店的价格，选择最适合自己的医疗服务，让每一分钱都花得明明白白。河南省医药比价小程序使用教程一、微信/支付宝搜索并登录【河南医保】小程序，点击进入【药品比价】服务二、输入比价药品进行比价，可查看某一药品药店售价全国各省市药品比价查询入口(部分)上海市黑龙江省河南省
想知道药品在黑龙江哪里买更划算?现在有了专门的比价查询入口，就像购物比价一样简单。不管是常用药还是处方药，动动手指就能了解不同地方的价格，帮您省下不少钱。黑龙江省药品比价查询入口1.支付宝操作程序。打开手机端支付宝，搜索“龙江医保”进入小程序首页。点击药品比价，进入在线比价系统后，即可通过药品的商品名/通用名进行查询。2.微信操作程序。打开微信，搜索并关注“龙江医保”微信公众号。点击“服务大厅”→
您是否正在使用掌上新华APP管理您的年金保险?是否遇到过需要修改年金领取形式的情况，却不知如何操作?别担心，通过掌上新华APP，您可以轻松修改年金领取形式。那么，具体该如何操作呢?接下来，小编我就来为您详细介绍，还不知道的朋友快来看看吧!掌上新华设置金领取形式步骤一览1、打开掌上新华APP，选择【首页】点击进入；2、在跳转界面中，我们选择【更多】点击进入；3、选择【年金领取形式】点击进入操作即可。
永旺是一家知名的零售集团，提供多元化的商品和服务。那么，对于不再需要使用永旺APP的用户来说，永旺APP如何注销账号呢?小编这里整理了些相关资料，有需要的小伙伴可以前来看看。永旺app账号注销流程一览1、在永旺app我的页面，点击顶部的设置图标。2、在设置页面，点击账号与安全选项。3、在账号与安全页面，点击注销账号。4、在注销申请的底部，点击申请注销。以上就是今天的永旺app如何注销账号的全部内容
本站所有资源（含游戏）均是软件作者、开发商投稿，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任，所有资源请在下载后24小时内删除。
如侵犯了您的版权、商标等，请立刻联系我们并具体说明情况后，本站将尽快处理删除，联系
（版权说明注意事项）。若有关在线投稿、无法下载等问题，请与本站客服人员联系
！
用户可自行按线路选择相应的下载点，可以直接点击下载/另存为，若直接点击下载速度太慢，请尝试使用高速下载器。为确保下载的文件能正常使用，请使用WinRAR最新版本解压本站软件。
建议大家谨慎对待所下载的文件，大家在安装的时候务必留意每一步！关于360安全卫士或QQ电脑管家的有关提示，请自行注意选择操作。
