毫末科技 是一家行业软件定制开拓公司，涉及行业有办公协作类、区块链、数据可视化、零售电商、聪慧环保、聪慧水务、聪慧环卫 、聪慧检务、聪慧政务、聪慧物流、聪慧教诲、聪慧制造、物联网、数据剖析、网络及安全、O2O、P2P、B2B、B2C 等。
毫末科技 官网页面
移动端、web端页面均有开拓，前端紧张技能栈有 vue、react、flutter、uniapp、taro、html 等。利用了 imgcook sketch 插件导出、自定义 DSL、CLI 命令行、plugin 插件等能力来提升前端代码开拓速率。
从 2020-02-03 开始到 2021-05-25，在 imgcook 创建模块数量达 2000+，覆盖60+前端项目，帮助研发提效 40%+。
利用情形韶光：从 2020-02-03 开始到 2021-05-25，个中有 165 天利用 imgcook 天生代码利用情形：在 imgcook 创建模块数量达 2000+，覆盖 60+ 前端项目。利用人群：前端、设计师利用人数： 26人旁边提效效果：提效 40%，一个普通移动端页面不该用 imgcook 可能须要一天韶光开拓，而利用 imgcook 须要韶光）半天韶光即可完成。为什么用 imgcook？1、紧张提高前端代码开拓速率2、示例页面-PC端-vue页面：研发步骤第 1 步：从 imgcook sketch 插件 导出到编辑器第 2 步：编辑器设置1、设置天生的尺寸手机端页面天生
默认情形，uniapp 和 taro 天生的代码都是为手机端做事的。手机端天生代码时，遵照以下规则天生：
1、同一个项目中，所有待天生元素的宽度相同。常日手机真个设计稿，Artboard 的宽度为 375px 或 750px，那么上传到 imgcook 里的所有的设计元素宽度都保持 375px 或 750px。
2、天生出来的代码是移动端屏幕自适应的。uniapp 和 taro 的自适应机制有所不同。
uniapp：官方推举采取 rpx 单位实现移动真个自适应。毫末天生的移动真个 uniapp 的代码，以rpx为单位实现自适应。Taro：官方推举采取 px 或者百分比 %。Taro 在编译为 H5 时会将 px 的尺寸转换为 rem，编译小程序时会将 px 的尺寸转换为 rpx。由于毫末天生的 style 代码为 js 文件，Taro编译器无法自动转换 px 像素。为理解决这个问题，毫末采取了 Taro 推举的 Taro.pxTransform() 函数来掌握自适应。Pad & Web 端页面天生有时候须要天生 pad 端乃至桌面真个运用，也就存在须要天生局部视觉代码的情形（无法跟手机端运用一样，逼迫哀求所有待天生元素的宽度保持同等）。如果不加任何配置项，那么天生出来的代码就不存在自适应性（布局混乱）。
为理解决这个问题，在 imgcook 的 web 管理端中，对 Page 元素增加了两个属性以实现 pad 或桌面运用的局部代码屏幕自适应。
export default { designWidth: 1920, // 设计稿宽度 responsive: "vw" // 配置responsive时，css自适应采取vw单位。responsive不配置的情形（只配置designWidth）下，uniapp默认采取rpx掌握自适应（在pad下体验较好），Taro默认采取Taro.pxTransform()函数来掌握自适应。}
配置截图如下：
2、设置组件
由于 imgcook 天生的所有的元素都为 Div/Text/Image，对付表单元素及繁芜组件还没有较好的支持。
毫末内部结合 xmind2code 配置的组件，实现了 imgcook 的组件更换。毫末 imgcook 的组件更换，更换的是 xmind2code->ui config 文件中的组件。目前支持非容器型组件（input/button等）。暂时不支持容器型组件（例如Tab等）更换。
在导出代码时，会利用插件 @imgcook/hm-replace-component 来更换组件。
imgcook install @imgcook/hm-replace-component@0.0.9
imgcook的schema中，紧张有三类UI元素：
DivTextImage
原则上，imgcook 中的以上三类元素，可以更换为毫末配置的任意组件。建议的更换如下：
Text: imgcook 自动更换。无需更换。Image: imgcook 自动更换。无需更换。Div: 可以配置更换为其他组件
更换步骤：
1、在 imgcook 的 web 界面上，配置 Div 的额外属性：hm-component=\export default { 'hm-component': 'van-button'}
配置截图如下：
2、在项目中配置 xmind2code 的组件。配置过程参考：xmind2code开拓指南
第 3 步：用 cli 命令行导出代码安装并配置 imgcook cli官方先容：
imgcook-cli 可以结合 Plugin 的能力将 imgcook 平台天生的代码产物一键放置到你确当地项目工程里，无缝领悟到你的研发流程，如果你有对 imgcook 天生代码的产物有加工需求（比如利用 Plugin 开拓自动上传图片到自己的图床、文件目录转换等），imgcook-cli 会是你运用 Plugin 的不二之选。
npm install -g @imgcook/cliimgcook config edit # 配置imgcook。
为 cli 配置 Plugin，这里官方会默认配置 plugin
图片转换插件：@imgcook/plugin-images导出代码时将图片转换为本地相对路径，并将图片下载到本地模块导出生成：@imgcook/plugin-generate下载代码到本地然后添加上自定义的 plugin：
组件更换插件 @imgcook/hm-replace-component
末了配置如下：
{ "accessId": "RolTV3d1", "dslId": "259", "generator": [], "plugin": [ "@imgcook/hm-replace-component", "@imgcook/plugin-images", "@imgcook/plugin-generate" ], "uploadUrl": ""}导出代码
拉取模块代码，写入到文件目录的一个路径下
# 拉取某个模块代码到本地路径imgcook pull <moduleId> --path <path># 例子imgcook pull 17108 --path ./src/mods/mod17108利用了哪些 imgcook 能力？imgcook Sketch 插件导出能力
直接 imgcook首页下载 imgcook sketch 插件利用即可。
利用 imgcook 插件导出图层数据，粘贴到 imgcook。
imgcook 自定义 DSL 天生视图代码能力
imgcook 供应了自定义 DSL 能力，我们可以根据 imgcook 供应的数据和能力天生自己所需的代码。 毫末科技共开拓了 10 个 imgcook DSL，用于知足不同运用的代码天生需求：
uniapp 组件代码天生 毫末uniapp小程序组件开拓规范uniapp 页面代码天生 毫末uniapp小程序页面开拓规范
Web vue 组件代码天生 毫末Vue组件开拓规范Web vue 页面代码天生 毫末Vue页面开拓规范
React 组件代码天生 毫末React组件开拓规范React 页面代码天生 毫末React页面开拓规范
RN 组件代码天生 毫末React Native组件开拓规范RN 页面代码天生 毫末React Native页面开拓规范
Flutter 组件代码天生 毫末Flutter页面开拓规范Flutter 页面代码天生 毫末Flutter页面开拓规范imgcook cli 能力
imgcook-cli 可以结合 Plugin 的能力将 imgcook 平台天生的代码产物一键放置到本地项目工程里，我们通过 cli 命令行下载代码到本地项目文件中。
imgcook plugin 插件能力在利用 imgcook cli 下载代码时，可以通过配置自定义 plugin 对 imgcook 平台天生的代码产物加工处理，我们自定义了 @imgcook/hm-replace-component 插件，用于将我们在编辑器中设置的组件属性更换为自己的组件。
干系链接毫末科技官方网站毫末科技代码自动化向团队先容 imgcook如果希望团队用上 imgcook D2C 能力，但又不知道如何先容 imgcook，我们帮你准备好了先容文案和 PPT，快来自取吧~
向团队先容imgcook.key 向团队先容imgcook.ppsx
1、组织一个分享会我们可以将团队同学们调集在一起，组织一个团队内部的分享会，先容下研发提效利器 imgcook。
2、播放 imgcook 的产品先容视频可以播放一下 imgcook 的产品先容视频，让大家对 imgcook 的功能有一个全方位的理解。视频链接：
imgcook 快速上手解读版imgcook 快速演示版
或者您也可以直接在 imgcook 网站现场演示。
先容文案：
imgcook 是阿里巴巴对外开放的一个设计稿智能天生代码平台，可以将 Sketch、PSD、Figma、图片等类型的设计稿一键天生可掩护的前端代码，例如 React、Vue、小程序等，还可以自定义天生的代码。
我们可以安装 Sketch、Photoshop、Figma 插件利用插件导出图层数据到 imgcook 或者直接在 imgcook 编辑器中上传设计稿文件解析，然后在imgcook 编辑器中查看天生的代码。
3、详细先容 imgcook 利用动线先容文案：
1、导入设计稿，支持从 imgcook 插件导出生成代码或上传设计稿文件解析天生代码两种办法。2、供应设计稿协议支持用户人工标记图层来天生代码（对付目前imgcook处理不是很好的场景都可以用这种办法办理）3、imgcook 智能天生的事理是将描述设计稿文件的 JSON Schema 经由设计稿协议、程序算法和机器学习算法的剖析、打算和识别，转换成一个具有合理的 Flex 布局嵌套构造和代码语义的 imgcook JSON Schema，然后再将这个 Schema 用各种不同 DSL 转换函数转换成各种不同类型的前端代码。4、imgcook JSON Schema 可以在 imgcook 编辑器中查看，我们可以在可视化编辑器中修正视图、样式等，实质是修正这个 JSON Schema。5、查看代码，实质是将终极的 imgcook JSON Schema 输入给自定义的 DSL 转换函数，函数的输出便是前端代码。
4、可以举例说说哪些团队是如何利用的本文档有一些用户利用案例，可以给大家看一下，包括 imgcook 开放的能力。后续用户案例会在 imgcook 官网透出。
5、理解 imgcook 的小毛病，可以帮助更好的利用imgcook 虽然能够自动天生可掩护性较高的代码，但设计稿图层千变万化，有一些场景目前还没有覆盖到。例如：
设计稿关联图层合并问题：氛围、背景、图标等在设计稿中由多个图层组成，天生代码是须要合并导出成一张图片布局合理性问题：imgcook 天生的布局嵌套构造不合理或不符合预期UI 逻辑代码天生问题：设计稿中的数据是静态的，实际线上数据是动态的，会带来一些 UI 的变革，但这些 UI 变革在设计稿转代码时无法获知
对付这些问题，imgcook 供应了设计稿协议支持用户手动干预图层的办法来办理，也可以在天生之后在 imgcook 编辑器中可视化调度。
6、理解更多imgcook 有钉钉用户群，如果利用上有问题可以在群里提问。可以关注 imgcook 官网和掘金账号关注进展。
用户案例征集如果您的团队接入了 imgcook 供应的 D2C 做事或者您自己有利用 imgcook 的心得，欢迎在本文评论区留言或直接贴上文章链接（ATA、掘金、知乎等技能分享网站均可）。
将有机会得到 imgcook 定制礼品。
