自发开发的PSD解析器动态生成静态代码以提高您的开发效率
#javascript #html #网络开发人员 #ai

前言

大家好,欢迎来到Useless Innovation技术频道。这是正确的!您读到的是,这里是无用的技术或技术在日常生活中很少感动的技术的组合。创新一个更无用的工具,并为每个人提供使用。因此,我们称其为useless innovation,否则我们也可以称其为berry innovation

成品显示

在解释我的发展和学习过程之前,我将首先与所有人共享工具。如果您想进一步了解我们或想学习和合作,可以向我发送私人信息。快速访问地址设备http://meichuang.org.cn/meichuangToos/#/index

首页

当您进入平台的主页时,您会看到一种非常简单的样式,该样式主要分为三个区域:标题区域,引入区域和功能模块区域。这次我们开发的是:无用的静态代码生成器工具是我们的第一个产品,也称为Pixel合作伙伴。

*当我选择此名称时,我希望该工具成为您在开发过程中的合作伙伴。它可以帮助您随时完成切割图片的任务,因此您不再是剪裁男孩。 *

home

像素合作伙伴

输入Pixel合作伙伴工具时,默认情况下会要求您首先上传PSD模型。上传完成后,它将帮助您进行切割,渲染和其他操作,最后进入控制台。

import

控制台页面分为三个模块:

  1. 左侧的文件预览区域:您可以在任何时候上传多个PSD并切换。
  2. 中间的页面预览区域:预览相应的PSD接口。
  3. 右边的功能区:设置下载代码的配置。

preview

主要解释功能区域的功能:

  1. 源代码类型:使用相应类型的语法和规则生成代码。包含html,vue2.x,react,uniapp,微信
  2. 大小标准:页面适应大小。根据您填充的值,页面的所有元素均生成相应的适应大小,以便可以完美地显示在页面上。
  3. 单元标准:根据大小和单位,可以适应不同客户的显示。包含PX,REM,VH,VW
  4. 字体:上传相应的文本字体以恢复视觉草稿。

ribbon

自我测试

开发完成后,我们还进行了一段时间的自我测试,以总结当前网站的整体完整性。

  1. Parse海报相关的PSD文件,只要上载相应的字体文件,就可以完美解析(这很重要)。我们公司现在也正在使用它,这基本上节省了一个或两个人的工作时间(老板非常满意)。
  2. 布局并不强大,并且对管理后端或日常业务观看页面并不是很友好。当前的整体布局基于定位,没有结构。我们在这方面不断取得突破(,如果您对这一领域的能力和兴趣,人们可以加入我们的小型团队,我们可以在该领域开放来源
  3. 识别并不强,不能被识别为输入框,表,图标等。我们还为此寻找突破点。老实说,这有点困难。这个领域没有人(如果有人愿意教我们如何培训大型模型,请给我发送私人信息,或者您愿意合作

总结

上面的介绍在这里结束。该操作非常简单,生成页码代码的功能也非常好。每个人都可以尝试。也许这对您有帮助,I introduced this tool to a friend, and he directly used it to take orders to develop pages. He complained that he could borrow more orders for drawing static pages.i秘密地羡慕拥有私人合同的人。这就是这个问题,下次见。