ui-check-cli

1.0.0 • Public • Published

ui-check-cli

这是一个页面边界检测交互式命令行工具

Features

很多情况下,HTML原型(小程序)都是最完美的状态,对于文字过多或者为空,图片尺寸大小等可能并没有做相关的设定,可能导致在实际上线后出现各种边界问题(比如文本溢出、高度塌陷、图片过大等等)

该命令行会件生成-test目录,可选择生成3种不同边界类型,分别是emptyoverflowrandom,如下

./test                 -> test生成目录
  |--empty             -> 文本内容为空、图片为空的情况
  |--overflow          -> 文本内容很多、图片尺寸随机的情况
  |--random            -> 文本图片资源随机的情况

提示:目前支持HTML原型(.html)、小程序(.wxml/.qml)、vue项目(.vue)

Install

全局安装命令行工具

npm install ui-check-cli -g

Usage

在项目根目录执行

ui-check

首先选择项目类型

? 请选择项目类型: (Use arrow keys)
❯ 原生web 
  微信小程序 
  qq小程序 
  vue工程 

其次请选择生成类型

? 请选择生成类型: (Use arrow keys)
❯ 文本很多、图片尺寸随机的情况 
  文本为空、图片缺失的情况 
  文本、图片随机情况 
  以上三种情况 

如果项目类型为微信小程序qq小程序或者vue工程,还会选择

? 是否只处理动态内容? (y/N) 

输入y或者n,默认为n

这里的动态内容指的是小程序中{{}}表达式的内容,大多数情况下页面固定的内容都是可控的,所以可以只处理动态部分

<view>
  {{data.msg}}其他信息
</view>

处理后

<view>
  {{data.msg}}{{data.msg}}{{data.msg}}{{data.msg}}其他信息
</view>

接下来就自动生成了,提示信息如下

 compiling 正在生成中...
 success 生成完成!

生成完成之后,可选择是否打开文件夹

? 是否立即打开该文件夹? (y/N) 

输入y或者n,默认为n

? 是否立即打开该文件夹? No
 文件位于 /Users/yanwenbin/Documents/test/yuewenListen-test

然后,如果是web项目,可以直接在浏览器查看生成的文件,如果是小程序项目,则需导入小程序开发者工具进行体验

ScreenShot

Enjoy!

Readme

Keywords

Package Sidebar

Install

npm i ui-check-cli

Weekly Downloads

0

Version

1.0.0

License

ISC

Unpacked Size

11.7 kB

Total Files

4

Last publish

Collaborators

  • xboxyan