大家好,又见面了,我是你们的朋友全栈君。
1.CodeFun是什么 CodeFun是一款UI 设计稿智能生成源代码的工具,支持微信小程序端、移动端H5和混合APP,上传 Sketch、PSD等形式的设计稿,通过智能化技术一键生成可维护的前端代码. 2.学习成本高吗? 对于前端工程师来说,几乎没有学习成本。 对于用惯了蓝湖/摹客的前端工程师来说,CodeFun使用流程与前者几乎一致:设计师上传完稿件后,工程师打开界面,选择任意需要的 UI 区域拷贝走想要的代码即可,只是从原来看标注变成了直接拷贝代码。 对于设计师来说,完全不需要遵循某些设计规范。 CodeFun 算法的识别过程并不依赖于设计稿中任何的手工标注、特殊编组或特定规范,所以设计师按照原有的流程和设计风格正常输出即可,零新增工作量、零学习成本。
这部分内容将上传 Sketch 设计稿的流程作为范本介绍,PSD设计稿还处于内测阶段。 CodeFun 的使用流程只有 3 个步骤: 在 Sketch 插件中上传设计稿 在 CodeFun 工具中查看代码 将生成的代码拷贝到自己已有的工程中即可 1、安装 Sketch 插件 在CodeFun官网注册好账号后,登陆CodeFun后在用户菜单中下载插件。
在安装插件之前,请确保系统中已经装好 Sketch 。由于 Sketch 只支持 MacOs,所以插件端需要在 MacOs 中操作。使用的 Sketch 的版本建议在 60.0 以上,否则插件可能无法正常工作。
接着,打开 Sketch,插件菜单中出现 CodeFun 选项,安装完成。
加载一份 Sketch 设计稿(下载示例设计稿),然后插件菜单中打开 CodeFun 插件界面
Sketch 菜单 > 插件 > CodeFun > 上传设计稿
在插件上登陆账号,通过插件创建一个项目,然后选择项目和上传页面。
例子中有 3 个页面,想选择中间页面作为示例,这里选择【已选中画板】。上传完成后,点击【查看项目】按钮。可以先进行代码的预览,和图片资源的查看
以上是单个没有问题的话,可以进行简单的跳转交互,数据绑定的操作,可以下载代码
用户在上传完设计稿后,有两种获取代码的方式:
区域提取代码 整站打包下载 整站打包下载的方式相对来说比较简单,这里主要介绍区域提取代码,这种方式也是我们比较推崇的,用户可以根据自己的需求,拷贝任意区域的代码到自己已有的工程项目中。
我们选择 CodeFun 设计稿,进入详情页,如图所示:
详情页总体分为左中右三部分
代码面板中默认展示 4 列,分别展示 HTML、CSS、JS 和全局样式的代码。
第一次打开时,会默认展示设置面板,如果不做任何修改,那么查看到的是小程序平台的原生代码。 依次点击复制按钮,很方便地将代码拷贝到系统的粘贴板中。
打开小程序开发工具,分别将这四部分代码粘贴到小程序相应的文件中,这样就可以整页提取代码,但有时候页面中会遇到类似“Tab 标签页”、“Swipe 轮播”等交互式组件时,自动生成的整页代码并不能支持交互,此时我们就需要区域提取代码功能,拷贝我们想要区域的代码到已有的工程项目中
点击 Dom 树或者画布上的任意节点,可以观察到代码窗口的代码会发生变化,这正是 CodeFun 最重要的区域提供功能
注意:当点击画布的空白区域时,Dom 树和画板都不再选中任何节点,此时代码窗口将显示整页代码。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/125112.html原文链接:https://javaforall.cn