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

news/2024/7/10 2:18:53 标签: java, javascript, html, 小程序, vue
htmledit_views">

做前端，不搬砖

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

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

CodeFun 现已支持上传 PSD 设计稿，别问我怎么知道的，扫码进入群聊体验最新内测功能

20a699f6ba511e32a54713fef5f004bc.png

CodeFun是个啥？？？

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

CodeFun的特点

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

如何智能？

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

  • 可维护性与扩展性

设计图

a5adf6199c6b52ec73f44e94566df019.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>
              <img
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60e57f7ffaa6670013254a0b/6157ff3d460a150011ec3267/16331624898575077322.png"
                className={`${styles['icon_1']}`}
              />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

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

  • 合理性

设计图

5174a62954a4e90441a5142e9172ed54.png

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

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

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

如何强大？

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

  • 交互行为

设计图

5866e537d537b7acf634ba5096359a2a.png

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

e3f6ea2d0cf5f0e407d175ca2c31d50b.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:""}]

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

5e8a6ac9394f1b578ce9ad1ff2263136.gif

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

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

  • 资源路径

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

8e5c60d8ba769006c9b4929922c52e81.gif

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

生成代码

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

  • 像素单位

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

232aa92861eda2f45f1143dff0763b87.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大法的速度) 搞定

45b67294fc7a056796b547db4971456f.png

效果图

f40a41b82b9635c244aeb61c8675b08c.gif

案例二

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

e0e6791c453a99f1e4d3c409a31c763a.png

效果图

9f54f029c332a40279600a0f54d007f6.gif

案例三

卡片类型的页面，CodeFun也毫不逊色！！

2e7fcca0f6da2cc4840552cdf1ad15aa.png

效果图

efe82dff3da20ab085ca015c7a39ff48.gif

黑科技来啦！！！

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

  • 操作步骤一

991c324149c40b2008728bc6ff091810.png

选择右上角预览功能

  • 操作步骤二

b3eb83ead3054bf83d2ccee2d15a0116.png

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

  • 操作步骤三

ab998d34df4372c2d84b85eedd3bd5a0.png

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

END

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

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

5c144055da1e4fcc78bb96b47b4aafed.png

点击阅读原文访问官网 https://code.fun/ 了解更多


http://www.niftyadmin.cn/n/1251142.html

相关文章

仅仅过去 4 年，微软最终放弃了 Electron

仅仅过去 4 年，微软最终放弃了 Electron

↓推荐关注↓作者 | electron 团队编译 | InfoQ - 核子可乐、褚杏娟策划 | InfoQ - Tina2017 年时&#xff0c;Electron 可以说是 Web 应用在桌面平台发布的最佳、甚至是唯一选项&#xff0c;但如今它却成了需要被优化淘汰的对象。 微软近期宣布&#xff0c;旗下 Teams 应用活…
阅读更多...
这一局，中国前端属实领先世界了...

这一局，中国前端属实领先世界了...

让我们回到4年前&#xff0c;17年国外前端圈都发生了哪些大事&#xff1f;为了弥补web和原生应用体验的差异&#xff0c;谷歌大力推进PWA所有主流浏览器都支持WebAssemblyServerless开始流行CSS-in-JS走进主流前端视野TypeScript火爆GraphQL爆炸式增长......那么这一年&#xf…
阅读更多...
golang 重要知识：内存管理

golang 重要知识：内存管理

一、概述 内存管理在任何的编程语言里都是重头戏&#xff0c;Golang 也不例外。Go 借鉴了 Google 的 TCMalloc&#xff0c;它是高性能的用于 c 的内存分配器。其核心思想是内存池 多级对象管理 &#xff0c;能加快分配速度&#xff0c;降低资源竞争。 二、基础结构 在 Go 里…
阅读更多...
什么？在 VSCode 里也能用 Postman了？

什么？在 VSCode 里也能用 Postman了？

以前一直在用 postman 做 API 测试&#xff0c;如果你同时在使用 vscode 开发时&#xff0c;每次切出去可能比较烦&#xff0c;其实就是太懒了。。。作为一个懒人&#xff0c;所有开发的时候要做的事情都在 vscode 里面完成是最好的&#xff0c;前几天看到 Postcode&#xff0c…
阅读更多...
真的，我现在特讨厌 Safari 浏览器

真的，我现在特讨厌 Safari 浏览器

翻译&#xff1a;前端之巅 - 小盖团队原文链接&#xff1a;https://blog.perrysun.com/2021/07/15/for-developers-safari-is-crap-and-outdated/如果要说开发者最讨厌什么东西&#xff0c;那 IE 浏览器肯定是首当其冲。究其原因&#xff0c;其实也很简单&#xff0c;因为 IE 的…
阅读更多...
新的 Vue 脚手架来了，学的动吗？

新的 Vue 脚手架来了，学的动吗？

1. 前言2021 年 10 月&#xff0c;Vue 团队等主要贡献者举办了一个 Vue Contributor Days 在线会议&#xff0c;蒋豪群[1]&#xff08;知乎胖茶[2]&#xff0c;Vue.js 官方团队成员&#xff0c;Vue-CLI 核心开发&#xff09;&#xff0c;在会上公开了create-vue[3]&#xff0c;…
阅读更多...
你是这样理解 redux 的吗？

你是这样理解 redux 的吗？

前言开始前&#xff0c;你必须知道一些事情&#xff1a;redux 和 react 没有关系&#xff0c;redux 可以用在任何框架中&#xff0c;忘掉 react。connect 不属于 redux&#xff0c;它其实属于 react-redux&#xff0c;请先忘掉它&#xff0c;下一章节&#xff0c;我们会介绍它。…
阅读更多...
docker attach卡着解决

docker attach卡着解决

当docker容器在 “-d”守护态运行的时候&#xff0c;比如通过supervisord控制两个程序非守护态运行&#xff1a; ssh -D tomcat 那么这个时候&#xff0c;用户就无法直接进入到容器中去&#xff0c;docker attach 容器id 就会一直卡着。 因为此时容器运行的进程是ssh&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023