效率神器!UI 稿智能转换成前端代码

做前端,不搬砖

大家好,我是若川。
从事前端五年之久,也算见证了前端数次变革,从到DW(Dreamweaver)到H5C3、从JQuery到MVC框架,无数前端大佬在为打造前端完整生态做出努力,由于他们的努力,我们开始重新思考前端的定义。作为一名前端,我们深知完美还原设计稿这部分工作简单且枯燥繁琐,这部分工作,我们统称为“搬砖”,为了能减轻“搬砖”工作量,我们业内人士也做了很多努力,开发了各ui库,但是设计稿跟UI库的样式往往大有径庭,因此还需要我们还是的从根上解决问题,才能最有效的减轻“搬砖”工作量。

所以CodeFun诞生了,做为一名CodeFun的忠实粉丝,不管是出于对CodeFun的鼓励又或者是基于开发者的分享精神,我觉得我都有必要把这样一款变革性的开发工具推荐给大家。从前端变革的角度来讲CodeFun的诞生应该是具有里程碑性的意义。JQuery的诞生,让我们可以更方便的去操纵DOM,React/Vue/Angular等MVC框架的诞生让我们不再去关心DOM,而CodeFun的诞生让我们不再关心前端视图代码,看到这肯定很多同学要问,CodeFun究竟是个啥?

如果不想看后续文章,可以直接扫码进群体验产品,1024程序员节京东卡抽奖等你来。另外可以访问官网 https://code.fun 了解。

c4c8e942665dab528af7eb235f1c74cf.png

CodeFun是个啥???

CodeFun是一款 UI 设计稿智能生成源代码的工具,可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。这是来自CodeFun官方定义,看到这里不少同学肯定会想到另外一款工具-蓝湖,如果CodeFun的作用仅仅类似于蓝湖/摹客等工具,那么也不值得我花费时间写一篇文章来推荐它,更不能将它定义为前端变革性工具。

CodeFun的特点

相比于其他工具,个人对于CodeFun的使用感受就是:智能、强大

如何智能?

CodeFun所生成的代码是可以用智能来形容,因为无论从可扩展性还是可维护性亦或者合理性都是无可挑剔的

  • 可维护性与扩展性

设计图

9148979dbd8c2177a4143c4ddf90f236.png

像这样的列表区域,我们平时都喜欢用数组循环渲染DOM。来看一下CodeFun是怎么生成的

生成代码

// 列表数组const data = { listnLG7eFN3: [null, null, null, null, null, null, null, null, null, null, null] };return (<div className={`flex-col ${styles['list']}`}>// 循环渲染{data.listnLG7eFN3.map((item, i) => (<div key={'item' + i}><div className={`${styles['list-item']} justify-between`}><div className={`${styles['left-group']} flex-row`}><div className={`${styles['left-section']}`}></div><span>二级导航标题</span></div><div className={`${styles['right-group']} flex-row`}><span>更多</span><imgsrc="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60e57f7ffaa6670013254a0b/6157ff3d460a150011ec3267/16331624898575077322.png"className={`${styles['icon_1']}`}/></div></div></div>))}</div>);
}

怎么样?是不是狠智能啊,直接CV大法即可。

  • 合理性

设计图

09d65ce20d34fb4c79b26bb4206ed4c0.png

看到上面的排列布局,很多同学的写法是浮动布局,但是都2021了,怎么能不用flex布局呢,flex布局作为前端神器,作用想必不用我多说了吧

.equal-division-item {flex: 1 1 110px; // 不管浏览器如何伸缩,图片依旧保持三等分
}

作为一款工具,尽然能贴心的用flex布局,这还是工具吗?这简直就是工具人啊!!

如何强大?

上面仅仅为大家展示了CodeFun所生成的视图代码,是不是已经被CodeFun圈粉了呢?别急,还有更加人性化的骚操作!!!

  • 交互行为

设计图

4880615c3fc696c3c57437a2d07b7526.png

上面我们展示生成了页面列表的视图代码,心急的同学肯定在想,还有很多交互代码,还不是得自己写吗?NO!NO!NO!CodeFun这个“工具人”已经想到了这一点,往下看!

c51a1a256432cf840de695a1fa4bd571.png

经过一些简单的操作,我们就可以直接将页面上的某些元素绑定跳转事件,是不是狠nice!

生成代码

// 竟然用了useHistory
import { useHistory } from 'react-router-dom';export default function Erjiyemian() {const history = useHistory();
// 跳转事件都帮我生成了const view_17OnClick = () => {history.push('/index');};return (// 点击事件已经绑好。。。。<div onClick={view_17OnClick} className={`${styles['list-item']} flex-col`}>// 这里的代码已经被我干掉了,不为别的,就为你阅读方便</div>);
}

看到这,是不是某些同学还学到点新知识-useHistory,不会吧,不会吧,都2021了还有同学不会hook写法吗???一个“工具人”都会啊,实在汗颜呐。。。。

  • 数据绑定

跳转事件的绑定是不是把某些同学下巴惊掉了呢?先收一收下巴,来看一下这个“工具人”另一个骚操作--数据绑定。不知道细心的同学有没有发现,上面CodeFun为我们生成的代码,虽然进行了数组渲染,但是数组里却都是null,在实际使用场景中我们依旧需要数组里的数组,像这样

// codeFun生成const data =  [null,null,null,null,null];// 手动修改之后const data = [{title:""},{title:""},{title:""},{title:""},{title:""}]

其实大可不必,“工具人”这个称号可不是盖的,看操作!!!

d1503690068eea2b660dd947fd4aab36.gif

经过一点简单的配置,我们就可以得到以下代码,根本不需要做二次修改的啦🤩

const data = { title: '传腾讯音乐遭中国反垄断机构调查;茶颜\n悦色回应阿里入股;Costco 登陆上海' };
  • 资源路径

生成带有img标签代码后,很多同学会觉得修改一下图片路径也很正常,毕竟是个工具吗,要求不能太高,可是据我对CodeFun的了解,它应该舍不得让我们受累去做这样的事情,果然发现了动态配置资源地址的方式

e2c3a8aeb997eee9158d057582783053.gif

通过配置资源地址,我们可以轻松生成含有对应路径的img标签

生成代码

// 云路径<imgsrc="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60e57f7ffaa6670013254a0b/6157ff3d460a150011ec3267/16331624930749770689.png"className={`${styles['equal-division-item']}`}
/>// 自定义路径<imgsrc="/public/image/remote/2da259e8200dfcac7b79c4805a0a585f.png"className={`${styles['equal-division-item']}`}/>
  • 像数单位

做h5应用的同学应该对于这rem是比较熟悉的,但是每次用rem布局都得换算,对于CodeFun来说,小case啦

51466705a491780b420fcb297356161d.gif

选择像数单位为rem,直接帮你生成rem单位的css代码,就问你丝不丝滑。。。

生成代码

// px 单位
.equal-division-item {flex: 1 1 110px;width: 110px;height: 74px;
}
// rem 单位  
.equal-division-item {flex: 1 1 6.88rem;width: 6.88rem;height: 4.63rem;
}

高光时刻

看到这里有的同学肯定会觉得这些案例也忒简单了,实际工作中可比这复杂多了,CodeFun能解决吗?接下来带你见证CodeFun的高光时刻!!!

案例一

最常见的商城首页,如果自己开发你需要用多久呢?使用CodeFun 依旧23秒 (实际使用时间取决于你CV大法的速度) 搞定

430b1c80b5f057d91e9a84345b071487.png

效果图

1f05b260b85bb193ce31b81779f1ae29.gif

案例二

像这样有明显层级感的页面,CodeFun对于层级以及阴影的处理依旧是满分操作

703be75da5e18e8f778acac11675de49.png

效果图

a8e44e3555567ff16b2a2db4301a4cb4.gif

案例三

卡片类型的页面,CodeFun也毫不逊色!!

e7f0a33be27971d8f058c805dfdc459d.png

效果图

762ce8ba42cdfa7e96a550e6c31831bd.gif

黑科技来啦!!!

是不是看完高光时刻,有些同学是不是觉得还是不过瘾呢,额。。。时间关系呢,还有一些功能就不一一介绍了哈(其实比较懒),不过呢,我还可以给大家推荐一个我常用的黑科技-小程序预览功能,之所以能探索到这个黑科技,那是因为我那个比较N(S)B的老板,非得看到实际效果然后再提出设计图的修改意见(MDZZ),不过还好,CodeFun包容了我老板的这个机智(智障)行为,一起来看看吧。

  • 操作步骤一

fc2da5aef216fcc978aee5478e32f4be.png

选择右上角预览功能

  • 操作步骤二

d8e42dbbc7f4b5cdc03357323642966c.png

选择微信小程序,点击下一步

  • 操作步骤三

2d33f6791e6f4d74a326e4ce9c61c5ff.png

扫描上方二维码 即可进行小程序预览,怎么样?四不四很赞呐!!!

END

以上只是关于CodeFun的部分功能,是不是觉得CodeFun是一款前端开发神器呢,其实关于CodeFun的其他功能还没来得及使用,不过仅仅是上述功能已经让我实现了“摸鱼自由”,看到这你是不是也想尽快体验一把23秒写一个页面呢?来,这是链接,别客气:https://ide.code.fun。最后做为一名CodeFun忠实粉丝,衷心希望CodeFun团队能为CodeFun赋予更多能力。

PS:CodeFun现已支持上传PSD设计稿,别问我怎么知道的,扫码进入下方群聊,不仅能收到最新消息,还可以体验内测功能~也可以点击读原文访问官网https://了解。

bb1906c0f3ea495b7479cd16d5f715a2.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

$.when.apply_When2Meet vs.LettuceMeet:UI和美学方面的案例研究

$.when.apply并非所有计划应用程序都是一样创建的。 (Not all scheduling apps are created equal.) As any college student will tell you, we use When2Meet almost religiously. Between classes, extracurriculars, work, and simply living, When2Meet is the scheduling…

前端不容你亵渎

大家好&#xff0c;我是若川&#xff0c;点此加我微信进源码群&#xff0c;一起学习源码。同时可以进群免费看Vue专场直播&#xff0c;有尤雨溪分享「Vue3 生态现状以及展望」背景最近我在公众号的后台收到一条留言&#xff1a;言语里充满了对前端的不屑和鄙夷&#xff0c;但仔…

利益相关者软件工程_如何向利益相关者解释用户体验的重要性

利益相关者软件工程With the ever increasing popularity of user experience (UX) design there is a growing need for good designers. However, there’s a problem for designers here as well. How can you show the importance of UX to your stakeholders and convince…

云栖大会上,阿里巴巴重磅发布前端知识图谱!

大家好&#xff0c;我是若川&#xff0c;点此加我微信进源码群&#xff0c;一起学习源码。同时可以进群免费看Vue专场直播&#xff0c;有尤雨溪分享「Vue3 生态现状以及展望」阿里巴巴前端知识图谱&#xff0c;由大阿里众多前端技术专家团历经1年时间精心整理&#xff0c;从 初…

Linux下“/”和“~”的区别

在linux中&#xff0c;”/“代表根目录&#xff0c;”~“是代表目录。Linux存储是以挂载的方式&#xff0c;相当于是树状的&#xff0c;源头就是”/“&#xff0c;也就是根目录。 而每个用户都有”家“目录&#xff0c;也就是用户的个人目录&#xff0c;比如root用户的”家“目…

在当今移动互联网时代_谁在提供当今最好的电子邮件体验?

在当今移动互联网时代Hey, a new email service from the makers of Basecamp was recently launched. The Verge calls it a “genuinely original take on messaging”, and it indeed features some refreshing ideas for the sometimes painful exercise we call inbox man…

React 全新文档上线!

大家好&#xff0c;我是若川&#xff0c;点此加我微信进源码群&#xff0c;一起学习源码。同时可以进群免费看明天的Vue专场直播&#xff0c;有尤雨溪分享「Vue3 生态现状以及展望」&#xff0c;还可以领取50场录播视频和PPT。React 官方文档改版耗时 1 年&#xff0c;今天已完…

网络低俗词_从“低俗小说”中汲取7堂课,以创建有影响力的作品集

网络低俗词重点 (Top highlight)Design portfolios and blockbuster movies had become more and more generic. On the design side, I blame all the portfolio reviews and articles shared by “experienced” designers that repeat the same pieces of advice regardless…

尤雨溪写的100多行的“玩具 vite”,十分有助于理解 vite 原理

1. 前言大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12想学源码&#xff0c;极力推荐之前我写的《学习源码整体架构系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、…

webflow如何使用_我如何使用Webflow构建辅助项目以帮助设计人员进行连接

webflow如何使用I launched Designer Slack Communities a while ago, aiming to help designers to connect with likeminded people. By sharing my website with the world, I’ve connected with so many designers. The whole experience is a first time for me, so I wa…

重新构想原子化 CSS

感谢印记中文的 QC-L[1] 对本文进行翻译&#xff0c;英文原文: English Version[2]。本文会比往期文章相对长些。这是我个人的一个重大的工具发布&#xff0c;有许多内容我想谈论。如果你能花些时间读完&#xff0c;不胜感激&#xff0c;希望能对你有所帮助 :)推荐访问 https:/…

cv::mat 颜色空间_网站设计基础:负空间

cv::mat 颜色空间Let’s start off by answering this question: What is negative space? It is the “empty” space between and around the subjects of an image. In the context of web design, your “subjects” are the pictures, videos, text, buttons and other e…

[知乎回答] 前端是否要学习 Node.js?

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12很多小伙伴都表示收获颇丰。一起学的大多数200行左右的Node.js源码。今天推荐这篇文章。&#xff08;刚刚在写明天掘金要发的文章&#xff0c;差点忘记今天还没发文。在知乎上看…

shields 徽标_我的徽标素描过程

shields 徽标Sketching is arguably the most important part of my process when it comes to logo design. In the beginning of my design career, I would actually skip this step completely and go right to the computer. I’d find myself getting stuck and then goi…

叮咚,系统检测到 npm 有更新,原理揭秘!

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12本文来自V同学投稿的源码共读第六期笔记&#xff0c;写得很有趣。现在已经进行到第十期了。你或许经常看见 npm 更新的提示。npm 更新提示面试官可能也会问你&#xff0c;组件库…

ui设计未来十年前景_UI设计的10条诫命

ui设计未来十年前景重点 (Top highlight)The year is approximately 1,300 BC when Moses received the 10 UI design commandments from the almighty design gods. The list was comprised of best practices that only the most enlightened designers would be aware of.当…

w3ctech 2011 北京站(组图)

门前的牌子大厅一推低价技术书籍会场嘉宾席人渐渐到齐准备工作w3c中国区负责人 安琪 第一个演讲焦峰同学分享了浏览器兼容性的相关问题石川同学分享的是JQuery的相关内容摄影哥微博大屏幕&#xff0c;有亮点哦。。。MBP啊有木有&#xff5e;&#xff5e;&#xff5e;貘大现场提…

浏览器中的 ESM

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12早期的web应用非常简单&#xff0c;可以直接加载js的形式去实现。随着需求的越来越多&#xff0c;应用越做越大&#xff0c;需要模块化去管理项目中的js、css、图片等资源。这里…

标记图标_标记您的图标

标记图标Not labeling your icons is the same as assuming that we are all fluent in ancient hieroglyphics. Are you? Can you just walk up to Cleopatras needle and read it like you could read a childrens book? Even emojis, our modern hieroglyphics dont mean …

找出无序数组中最小的k个数(top k问题)

2019独角兽企业重金招聘Python工程师标准>>> 给定一个无序的整型数组arr&#xff0c;找到其中最小的k个数 该题是互联网面试中十分高频的一道题&#xff0c;如果用普通的排序算法&#xff0c;排序之后自然可以得到最小的k个数&#xff0c;但时间复杂度高达O(NlogN)&…