全部产品

ImgCook设计稿智能生成代码方案

更新时间:2020-09-04 13:43:39

使用 imgcook 智能生成页面

在云开发平台,开发者可以使用 imgcook studio 插件,通过上传设计稿生成前端代码、绑定组件事件和选择数据源函数等,极大地减少前端部分的工作量,更加专注在函数本身的开发。

下载测试用的 Sketch 设计稿

点击下载demo.sketch

下面分别是 Sketch 设计稿、线上页面效果以及 UI 组件编辑器,开发者只需简单几步操作就能完成下图的生成效果,同时还提供 UI 组件编辑器做一些人工干预,下面我们就看看如何使用 imgcook 吧!

image.png image.png

image.png

项目结构

imgcook 作为插件,对项目结构的侵入性都非常低,因此整体项目结构与 Midway FaaS 一体化方案几乎一致,仅有以下区别:

  1. 移除了之前放在 src 目录下的 tsx 前端文件;
  2. 增加了 src/pages 目录,通过 imgcook 生成的页面和模块需要放到这个目录下;

需要说明一下,以上的两个区别也并非必须的,因为原来的 Midway FaaS 一体化方案有一些前端代码,因此开发者也可以按照自己的喜好安排目录结构,只要保证在 Layout.ts 中会正确路由即可。

另外,本例中生成的为页面级代码,但 imgcook 也可以按照模块来生成,然后在页面中按照 ES Module 的方式引入即可。

上手指南

了解了项目结构之后,我们就来看看如何使用 imgcook studio 来生成前端代码吧!

如何上传设计稿

首先在左侧文件树右键打开 imgcook studio ▼

Screen Shot 2020-08-04 at 10.49.45 PM.png

点击 Open With imgcook studio 按钮,可以在主窗口看到插件,接下来选择“导入”来上传设计稿 ▼

image.png

点击进入上传页面 ▼

image.png

如上所示,选择一个 Sketch 文件 ▼

image.png

上传后,插件会将识别出的页面展示出来,点击你想生成的页面就会开始创建页面。

创建过程中,会有上传图片的过程,需要比较久的时间,请耐心等待。

image.png

上图就是完成后会在面板中渲染出 UI 编辑器,供开发者做一些结构的微调。

如何生成代码

image.png

UI 编辑器编辑完成后,点击上方的保存按钮 ▼

image.png

第一次保存会要求填写模块名称,比如 HomePage 等,创建成功后,就可以进行代码生成了,首先选择要生成的代码类型 ▼

image.png

点击代码后,会出现代码弹出框,可以选择要生成的代码模版,以及审阅生成的代码 ▼

image.png

这里选择“React 开发规范(新协议)”后,提示生成代码中,然后关闭窗口。

image.png

点击导出功能可以将生成的代码生成到当前项目指定目录,比如 ▼

image.png

在这个例子中,我们选择生成到 src/pages/Home 中,点击“确定”按钮后,目录结构如下 ▼

image.png

至此,一个页面的生成就完成了。

运行与调试

通过 npm run dev 调试代码,执行过程中会进行依赖安装和服务启动,启动完成后就能通过 Web 开始调试你的应用了,具体操作步骤如下:

  1. $ npm install
  2. $ npm run dev
  3. 正在启动,请稍后...
  4. ---------------------------------------
  5. 开发服务器已成功启动
  6. 请打开 >>> http://*****-3000.xide.aliyun.com/
  7. ---------------------------------------
  8. 感谢使用 Midway Serverless,欢迎 Star!
  9. https://github.com/midwayjs/midway
  10. ---------------------------------------

启动成功后打开页面显示 ▼

image.png

高阶功能

通过 imgcook 生成好代码后,我们还为用户提供了一些高阶功能来简化用户的后续开发工作,接下来就进行一些简单的介绍。

绑定组件事件

在 UI 编辑器中,imgcook studio 支持为单个组件添加自定义事件和处理函数,比如我们希望为“品牌折扣”添加一个点击事件 ▼

image.png

首先在组件树中选择品牌折扣,然后右侧点击事件,选择添加事件,然后点击 onClick ▼

image.png

点击后,就可以用 JavaScript 编写点击处理逻辑,完成后点击保存即可。

选择数据源

imgcook 支持从 f.yml 配置的函数,选择当前页面的数据源 ▼

image.png

在 Page 页面下,选择公共数据源,列表会从 f.yml 中读取,具体规则如下:

  • 从 functions 节点下读取
  • 过滤掉不存在 events.apigw 的节点
  • 默认方法为 GET

image.png

选择其中一个数据源来创建接口,创建完成后,我们来看看生成的代码 ▼

image.png

可以发现生成的代码中,已经找到了数据源所生成的函数了,接下来就是在页面初始化的时候调用这个函数就可以了 ▼

image.png

同样在 Page 节点的事件中,创建一个 constructor 的生命周期,打开弹窗后,直接点击保存就好。

总结

通过本篇文章,我们已经介绍了 imgcook studio 的一些常用功能,如需挖掘 imgcook 更多的用法,请详细阅读 imgcook 官方文档