前端摸鱼神器,设计稿一键导出 「小程序/Vue/Uni-app」代码

简介: 这款神器就是「CodeFun」,它号称“UI 设计稿智能生成源代码,10 分钟完成 8 小时工作量”,让我们做前端,不搬砖

2021 年过一半了,各位切图还开心吗?


最近我遇到这个事情。


image.png


emmm,这位产品小兄弟,说好只加 3 个页面,最后硬是让产品加了 6 个页面,差点凑齐七个小矮人了,后面的 UI 稿就像这样(考虑到公司利益,本文采用网上案例作为参考):


image.png


打工人何必为难打工人。


面对这两排页面,对于 CSS 比较弱的我来说,简直噩梦。


正当我苦恼着,突然想起上次同事推荐给我的一款切图神器看来可以用起来了。


这款神器到底是啥?


这款神器就是「CodeFun」,它号称“UI 设计稿智能生成源代码,10 分钟完成 8 小时工作量”,让我们做前端,不搬砖


那就试试看~


体验一把一键生成代码


说干就干,我按照官网介绍的三个步骤,顺利将 UI 稿件,并转换为 Vue.js 代码了,看下最终效果:


image.png


从导入文件到导出代码,前后只花了三分钟,简直不要太爽了


说说使用方法吧~


CodeFun」官网上介绍的快速上手流程,只需 3 个步骤即可从 UI 稿到生成项目代码。(该不会吹牛吧)


image.png


依葫芦画瓢,首先我按照官网说明,安装好「CodeFun」插件,然后准备好 sketch 素材(也支持 PS 素材):


image.png


然后开始三个步骤(省略安装插件过程):


直接打开 sketch 文件后,在顶部「插件」菜单,选择「CodeFun」的「上传设计稿」菜单:


image.png


然后在弹框中登录账号,并选择创建的「项目」和「画板」:


image.png


然后点击「上传」,等待上传完成后,后台便马上能看到我们导入的项目,并且每个页面整齐摆放,我们随便打开一个页面看看:


image.png


熟悉的代码,熟悉的 HTML/CSS/JavaScript 映入眼帘。


然后试试导出项目代码,可以自行选择导出「微信小程序」或者「Vue.js」项目,还有选择导出的是 rpx 单位还是 px 单位,简直太贴心了!


image.png


说说简单体验后的感受


太香了,我们可以根据项目需要,选择生成 H5 或者小程序代码,还原度极高,很符合官网介绍的特点「精准还原设计稿,生成如工程师手写一般的代码」。


当然,毕竟是自动生成,可能存在部分不完美的地方(为CodeFun加🍗),在实际项目部署前,我们花点时间做样式微调,然后加上自己的业务处理逻辑,就可以啦。


这给我省下太多切图时间了!


当然,这里只是简单介绍,大家可以体验下(官网:code.fun),然后结合文档,相信你会很有收获~


CodeFun 还有哪些强大功能?


在我翻阅「CodeFun」文档时,发现它竟然还有好多强大的功能。


1.强大的 List 标签组件


List 标签组件用于循环列表,它的强大之处在于,可以自动将相似的列表内容,并自动识别为 List 标签,生成 v-for 风格的代码。那么我们眼见为实,以下面页面评论列表为例,试试看:


image.png


红色框内容设置为 List 标签后,生成代码如下(需要开启“将 List 标签输出为循环列表”):


<div class="flex-col list">
  <template v-for="(item, i) in listJWuhbbAm">
    <div class="list-item flex-col" :key="'item' + i">
      <div class="top-group flex-row">
        <img class="image_15" :src="item.avatar" />
        <div class="right-group flex-col">
          <span class="text_20">{{item.name}}</span>
          <span class="text_22">{{item.date}}</span>
        </div>
      </div>
      <span class="text_24">{{item.desc}}</span>
    </div>
  </template>
</div>


其 JS 代码如下(需要开启“数据绑定输出模式”):


export default {
  data() {
    return {
      "listJWuhbbAm": [{
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016341787250137.png",
        "name": "晓晓晓",
        "date": "2019-02-26",
        "desc": "非常的好,干净整洁,卫生做得很到位,房东人很好,离地铁站很近,五星好评,推荐哦!"
      }, {
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016342203168767.png",
        "name": "啦啦菇凉",
        "date": "2019-02-16",
        "desc": "非常的好,干净整洁,卫生做得很到位,房东人很好,很负责任,离地铁站很近,生活方便,附近很多美食街,大型购物广场,五星好评,推荐推荐哦,来了你就不想走的地方…"
      }, {
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016343523144906.png",
        "name": "不告诉你",
        "date": "2019-02-16",
        "desc": "西天的晚霞挥动着绚丽的纱巾,晚风吹起来,一支支狗尾草摇响一渠黄昏的抒情曲。一排排白色的小木屋出现了,像童话一般精致,又像梦一样美丽。"
      }]
    };
  },
};


和我们实际业务开发一样,这里的 List 列表也是共用 CSS 样式代码的:


.list-item {
  padding: 27rpx 28rpx 28rpx;
  border-bottom: solid 2rpx rgb(245, 245, 245);
}
.list {
  margin-top: 15px;
}


是不是很香,用着还很方便~👍


2.优秀的 Grid 布局


在业务开发中,经常会遇到如「多列操作按钮」这种网格类的布局需求,如下图红色框内容:


image.png


考虑到不同尺寸屏幕的适配问题,经常需要对布局进行特殊设置,常用就有 Grid 布局,在「CodeFun」中,就支持自动将设计稿中这类 UI 生成为 Grid 布局代码,简单操作后,上图转化为下面代码:


<div class="grid">
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485084464827.png" class="image_7" />
    <span class="text_9">附近</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485093876260.png" class="image_7" />
    <span class="text_9">市区</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485107042498.png" class="image_7" />
    <span class="text_9">写字楼</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485084464827.png" class="image_7" />
    <span class="text_9">郊区</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485093876260.png" class="image_7" />
    <span class="text_9">公寓</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485107042498.png" class="image_7" />
    <span class="text_9">城中村</span>
  </div>
</div>


样式代码如下:


.grid-item {
  padding: 9px 0;
}
.grid {
  margin: 9px 12px 0 11px;
  color: rgb(51, 51, 51);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  white-space: nowrap;
  height: 162px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

这就很赞了。


image.png


3.灵活的组件类型


当我们需要设置顶部 header 或者底部固定 footer 时,只需将组件类型设置成 Header 或者 Footer 标签即可:


image.png


4.方便的路由跳转设置


对于前端应用,经常需要在不同页面进行跳转,「CodeFun」也支持设置页面路由跳转:


image.png


生成了下面的 JS 代码:


export default {
  data() {
    return {};
  },
  methods: {
    view_21OnClick() {
      this.$router.push({
        name: 'index'
      });
    }
  }
};


在「CodeFun」使用过程中,加上这几个功能,已经能满足我们大部分的切图场景了,节省下来的切图时间,可以让我们有更多时间用来处理业务逻辑。cool👍


对 CodeFun 的思考


当我们在项目中开始使用 「CodeFun」,会发现我们业务研发流程悄悄发生了变化,下图对比了两种业务研发流程:


image.png


显然,新的研发流程搭配「CodeFun」,会更加灵活且高效~


体验总结


体验了几天「CodeFun」后,说说我的一些建议:


  1. 可以增加对 React/Angular 等前端框架的支持;(为了能照顾到更多用户哈)


  1. 「数据绑定」模块的交互不够直观,对新手可能很难理解如何去进行配置。(可以做得更直观一点)




相关文章
|
3月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
975 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
930 1
|
1月前
|
存储 监控 小程序
TP6+Uni-app框架下,圈子系统小程序的快速上线开发步骤
社交圈子系统多端运营级应用,融合了推荐匹配、语音聊天、IM即时通讯、动态发布、一键约聊、同城交友、附近的人、充值提现、邀请推广等功能,为平台运营提供更多的盈利变现方式。程序源码开源,支持二次开发,根据客户不同应用场景需求,定制个性化解决方案。
56 9
|
2月前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
2月前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
4月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
257 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
3月前
|
JavaScript C++ 容器
【Azure Bot Service】部署NodeJS ChatBot代码到App Service中无法自动启动
2024-11-12T12:22:40.366223350Z Error: Cannot find module 'dotenv' 2024-11-12T12:40:12.538120729Z Error: Cannot find module 'restify' 2024-11-12T12:48:13.348529900Z Error: Cannot find module 'lodash'
59 11
|
3月前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
55 1
|
3月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
63 1

热门文章

最新文章

  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 4
    【Azure Function】Function App门户上的Test/Run返回错误:Failed to fetch
    31
  • 5
    陪玩APP推送配置:陪玩系统手机锁屏收不到推送?可能是这些原因!解决方案来了!
    34
  • 6
    小游戏源码开发之可跨app软件对接是如何设计和开发的
    33
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    135
  • 8
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
    60
  • 9
    语音app系统软件源码开发搭建新手启蒙篇
    44
  • 10
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    884