imgcook 开发指南

优质

小牛编辑

140浏览

2023-12-01

1 概述

2 安装和使用

2.1 安装

npm install -g @imgcook/cli
imgcook config edit # 配置imgcook。具体配置见下面

2.2 配置

imgcook参考配置

{
  "accessId": "iiqzaVoPUX562XXG",
  "dslId": "259",
  "generator": [],
  "plugin": [
    "@imgcook/hm-replace-component",
    "@imgcook/plugin-images",
    "@imgcook/plugin-generate"
  ],
  "uploadUrl": ""
}

2.3 设置生成的尺寸

2.4.1 手机端应用生成

默认情况，uniapp和taro生成的代码都是为手机端服务的。手机端生成代码时，遵循以下规则生成：

同一个项目中，所有待生成元素的宽度相同。通常手机端的设计稿，artboard的宽度为375px或750px，那么上传到imgcook里的所有的设计元素宽度都保持375px或750px。
生成出来的代码是移动端屏幕自适应的。uniapp和taro的自适应机制有所不同。
- uniapp：官方推荐采用rpx单位实现移动端的自适应。毫末生成的移动端的uniapp的代码，以rpx为单位实现自适应。
- Taro：官方推荐采用px或者百分比%。Taro在编译为H5时会将px的尺寸转换为rem，编译小程序时会将px的尺寸转换为rpx。由于毫末生成的style代码为js文件，Taro编译器无法自动转换px像素。为了解决这个问题，毫末采用了Taro推荐的Taro.pxTransform()函数来控制自适应。

2.4.2 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.4 组件替换

由于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元素：

Div
Text
Image

原则上，imgcook中的以上三类元素，可以替换为毫末配置的任意组件。建议的替换如下：

Text: imgcook自动替换。无需替换。
Image: imgcook自动替换。无需替换。
Div: 可以配置替换为其他组件

替换过程：

1.在imgcook的web界面上，配置Div的额外属性：hm-component=\

export default {
  'hm-component': 'van-button'
}

配置截图如下：

2.在项目中配置xmind2code的组件。配置过程参考：xmind2code开发指南

参考

设计稿基本规范