怎么建公司免费网站,html个人主页代码编写,深圳东门街道办事处电话,拼多多网上购物商城做前端#xff0c;不搬砖大家好#xff0c;我是若川。从事前端五年之久#xff0c;也算见证了前端数次变革#xff0c;从到DW#xff08;Dreamweaver#xff09;到H5C3、从JQuery到MVC框架#xff0c;无数前端大佬在为打造前端完整生态做出努力#xff0c;由于他们的努… 做前端不搬砖大家好我是若川。从事前端五年之久也算见证了前端数次变革从到DWDreamweaver到H5C3、从JQuery到MVC框架无数前端大佬在为打造前端完整生态做出努力由于他们的努力我们开始重新思考前端的定义。作为一名前端我们深知完美还原设计稿这部分工作简单且枯燥繁琐这部分工作我们统称为“搬砖”为了能减轻“搬砖”工作量我们业内人士也做了很多努力开发了各ui库但是设计稿跟UI库的样式往往大有径庭因此还需要我们还是的从根上解决问题才能最有效的减轻“搬砖”工作量。所以CodeFun诞生了做为一名CodeFun的忠实粉丝不管是出于对CodeFun的鼓励又或者是基于开发者的分享精神我觉得我都有必要把这样一款变革性的开发工具推荐给大家。从前端变革的角度来讲CodeFun的诞生应该是具有里程碑性的意义。JQuery的诞生让我们可以更方便的去操纵DOMReact/Vue/Angular等MVC框架的诞生让我们不再去关心DOM而CodeFun的诞生让我们不再关心前端视图代码看到这肯定很多同学要问CodeFun究竟是个啥如果不想看后续文章可以直接扫码进群体验产品1024程序员节京东卡抽奖等你来。另外可以访问官网 https://code.fun 了解。CodeFun是个啥CodeFun是一款 UI 设计稿智能生成源代码的工具可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。这是来自CodeFun官方定义看到这里不少同学肯定会想到另外一款工具-蓝湖如果CodeFun的作用仅仅类似于蓝湖/摹客等工具那么也不值得我花费时间写一篇文章来推荐它更不能将它定义为前端变革性工具。CodeFun的特点相比于其他工具个人对于CodeFun的使用感受就是智能、强大如何智能CodeFun所生成的代码是可以用智能来形容因为无论从可扩展性还是可维护性亦或者合理性都是无可挑剔的可维护性与扩展性设计图像这样的列表区域我们平时都喜欢用数组循环渲染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]}}/divspan二级导航标题/span/divdiv className{${styles[right-group]} flex-row}span更多/spanimgsrchttps://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60e57f7ffaa6670013254a0b/6157ff3d460a150011ec3267/16331624898575077322.pngclassName{${styles[icon_1]}}//div/div/div))}/div);
}怎么样是不是狠智能啊直接CV大法即可。合理性设计图看到上面的排列布局很多同学的写法是浮动布局但是都2021了怎么能不用flex布局呢flex布局作为前端神器作用想必不用我多说了吧.equal-division-item {flex: 1 1 110px; // 不管浏览器如何伸缩图片依旧保持三等分
}作为一款工具尽然能贴心的用flex布局这还是工具吗这简直就是工具人啊如何强大上面仅仅为大家展示了CodeFun所生成的视图代码是不是已经被CodeFun圈粉了呢别急还有更加人性化的骚操作交互行为设计图上面我们展示生成了页面列表的视图代码心急的同学肯定在想还有很多交互代码还不是得自己写吗NONONOCodeFun这个“工具人”已经想到了这一点往下看经过一些简单的操作我们就可以直接将页面上的某些元素绑定跳转事件是不是狠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:}]其实大可不必“工具人”这个称号可不是盖的看操作经过一点简单的配置我们就可以得到以下代码根本不需要做二次修改的啦const data { title: 传腾讯音乐遭中国反垄断机构调查茶颜\n悦色回应阿里入股Costco 登陆上海 };资源路径生成带有img标签代码后很多同学会觉得修改一下图片路径也很正常毕竟是个工具吗要求不能太高可是据我对CodeFun的了解它应该舍不得让我们受累去做这样的事情果然发现了动态配置资源地址的方式通过配置资源地址我们可以轻松生成含有对应路径的img标签生成代码// 云路径imgsrchttps://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60e57f7ffaa6670013254a0b/6157ff3d460a150011ec3267/16331624930749770689.pngclassName{${styles[equal-division-item]}}
/// 自定义路径imgsrc/public/image/remote/2da259e8200dfcac7b79c4805a0a585f.pngclassName{${styles[equal-division-item]}}/像数单位做h5应用的同学应该对于这rem是比较熟悉的但是每次用rem布局都得换算对于CodeFun来说小case啦选择像数单位为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大法的速度) 搞定效果图案例二像这样有明显层级感的页面CodeFun对于层级以及阴影的处理依旧是满分操作效果图案例三卡片类型的页面CodeFun也毫不逊色效果图黑科技来啦是不是看完高光时刻有些同学是不是觉得还是不过瘾呢额。。。时间关系呢还有一些功能就不一一介绍了哈其实比较懒不过呢我还可以给大家推荐一个我常用的黑科技-小程序预览功能之所以能探索到这个黑科技那是因为我那个比较NSB的老板非得看到实际效果然后再提出设计图的修改意见MDZZ不过还好CodeFun包容了我老板的这个机智智障行为一起来看看吧。操作步骤一选择右上角预览功能操作步骤二选择微信小程序点击下一步操作步骤三扫描上方二维码 即可进行小程序预览怎么样四不四很赞呐END以上只是关于CodeFun的部分功能是不是觉得CodeFun是一款前端开发神器呢其实关于CodeFun的其他功能还没来得及使用不过仅仅是上述功能已经让我实现了“摸鱼自由”看到这你是不是也想尽快体验一把23秒写一个页面呢来这是链接别客气https://ide.code.fun。最后做为一名CodeFun忠实粉丝衷心希望CodeFun团队能为CodeFun赋予更多能力。PSCodeFun现已支持上传PSD设计稿别问我怎么知道的扫码进入下方群聊不仅能收到最新消息还可以体验内测功能也可以点击阅读原文访问官网https://了解。
