前端研发提效500%,本文内容价值月薪5W

372 阅读5分钟

在小伙伴们热情提出

各种实际需求和建议的帮助下

CODE.FUN 经过大半年的飞速迭代

实战能力得到大幅提升!

在解放前端小伙伴们

枯燥手写页面的进程中再进一步

今天我想先给大家介绍下

产研团队这三个月的成果

01

CSS 编辑器

智能编辑, 高效“打码”

  • 即时预览,无须切换

平时在写布局、样式代码时,需要比对设计稿和 CSS 代码,前端程序员经常在设计稿与编译器之间来回切换,这样操作下不仅耗时长,而且容易出错,动不动就写出不自觉的「bug」。

为了解决这个问题,上新支持在 CODE.FUN 直接编辑 CSS 代码功能,支持实时预览,无须切换即可查看代码,这样是不是有好太多了,提效分分钟 😄。

图片

  • 可视化编辑器,所见即所得

同时我们这次上新支持了图形化编辑界面,大家可以在可视化界面直接进行调整布局、定位、尺寸、边距等样式效果,让你轻轻松松就搞定 Flex、Grid 布局,整个过程一气呵成,只要你的网速够快,嘿嘿 😁。

图片

02

DOM 工具箱

送你百宝箱,提效100分

  • 拖拽调整 DOM 节点

平时在还原复杂设计稿时,层级很多,调整 DOM 结构需要修改不少的代码,修改过程中很容易出现错误,稍不注意就容易出 bug ,影响大家交付项目的速度 😔 。

这版本上新,我们提供了拖拽调整 DOM 节点,大家在使用CODE.FUN,可以直接在 DOM tree 上节点拖拽到合适的层级以形成理想的 DOM 结构,效率想要不提升都很难!

图片

  • 空白调整工具

之前有用户反映在 CODE.FUN 上编辑设计稿时,有时会得不到满意的节点编组大小,而且修改起来较为麻烦。

为了提升大家的使用感,新版本支持空白调整工具,大家可以直接在设计稿上调整 DIV 大小,智能计算 margin 和 padding,最终调整到合适的样式效果,听到这里是不是很心动,赶紧上手试一试。

图片

  • 为节点设置绝对定位

之前有用户反馈在 CODE.FUN 编辑设计稿时,一些元素容易干扰到其他元素,形成错误的文档流,即使是解组后再编组也会占位,从而影响到整体布局。

为了解决这个问题,我们新版本新增了设置绝对定位的快捷按钮,使用其可以将不合理的节点排除 Flexbox,从而形成更合理的文档流结构,整个操作过程十分流畅,尽享丝滑体验。

图片

  • 图片转背景 / 背景转图片

在 CODE.FUN 编辑设计稿新版本支持一键转换 image 、 CSS background-image 节点,快速实现图片与背景的互转,生成最贴合设计稿的文档流结构,更符合大家手写代码的风格。

图片

03

组件化

组件化上线,1小时打卡下班

  • 官方 UI 组件库

在之前的场景中,把设计稿上传到 CODE.FUN 之后,只能得到由 View/Text/Image 组成的静态页面,不具备交互能力,而通常前端程序员需要实现页面上收集用户输入、提供反馈、展示动态数据等功能,以此来达到与用户的动态交互,从而实现业务逻辑,这样写页面,不仅耗时长,还容易出错,经常导致项目延期。

本次上新,为大家提供了开箱即用的第三方的 UI 组件库(如  Vant Weapp 、uniapp 等),支持输出对应的组件库代码,你只需通过打标签的方式就可应用组件,轻松实现各种复杂交互逻辑,听到这里,有没有很激动,从此准点下班不是梦 😄。

图片

  • 自定义组件库

之前在用户群里,不少人反应:自己团队内部已经有了一批通用的公共组件,能不能把这些组件与 CODE.FUN 打通,在生成代码时自动生成对应的组件代码呢?

为了让能大家无缝衔接使用,本次上新提供的自定义组件的配置功能,可以满足大家的需求,用户可以创建自定义组件库,将常用的组件配置到组件库中,通过标记的方式就可以快速将自定义组件代码应用到设计稿中,满足各种各样的业务场景。这样,只要大家一键操作,就能在 CODE.FUN 里找到自家的组件库,有没有很香~

图片

04

最后

PC 稿社群内测

好啦,说到这里这次更新的相关内容就结束啦,欢迎各位小伙伴快点来体验我们的产品~

🔗 code.fun

哈哈,我们当然知道大家还在关心什么!呼声非常高的「PC 稿」,到底进度如何~这是可以说的,目前我们已经在进行社群内测,如果十分强烈想要体验,大家可以扫码加入我们的「PC 稿社群内测」

图片

感谢大家对我们的支持,我们一起将 CODE.FUN 功能打造得更加完善,让前端程序员解放生产力,提效 500% !

                                  **- End -**

**「CODE.FUN」**产品介绍:\

前端智能化领先者

10000+工程师的提效助手

做前端,不搬砖

电脑浏览器输入网址 code.fun

即可马上登录

关注**「光速软件CodeFun」**公众号

即可免费试用