Skip to content

Commit 74f5bd4

Browse files
cklwblovecklwblove
committed
refactor: 💡 优化代码和测试demo
1 parent 025f626 commit 74f5bd4

File tree

7 files changed

+550
-309
lines changed

7 files changed

+550
-309
lines changed

‎README.md‎

Lines changed: 98 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,130 @@
1-
# winjs-plugin-example
1+
# @winner-fed/plugin-viewport
22

3-
Example plugin for WinJS.
3+
Viewport plugin for WinJS.
44

55
<p>
6-
<a href="https://npmjs.com/package/winjs-plugin-example">
7-
<img src="https://img.shields.io/npm/v/winjs-plugin-example?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
6+
<a href="https://npmjs.com/package/@winner-fed/plugin-viewport">
7+
<img src="https://img.shields.io/npm/v/@winner-fed/plugin-viewport?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
88
</a>
99
<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
10-
<a href="https://npmcharts.com/compare/winjs-plugin-example?minimal=true"><img src="https://img.shields.io/npm/dm/winjs-plugin-example.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
10+
<a href="https://npmcharts.com/compare/@winner-fed/plugin-viewport?minimal=true"><img src="https://img.shields.io/npm/dm/@winner-fed/plugin-viewport.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
1111
</p>
1212

13+
底层基于 [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) 封装。
14+
1315
## Usage
1416

1517
Install:
1618

1719
```bash
18-
npm add winjs-plugin-example -D
20+
npm add @winner-fed/plugin-viewport -D
1921
```
2022

2123
Add plugin to your `.winrc.ts`:
2224

2325
```ts
2426
// .winrc.ts
2527
export default {
26-
plugins: ['winjs-plugin-example'],
28+
plugins: ['@winner-fed/plugin-viewport'],
2729
// 开启配置
28-
example: {}
30+
// 参考 https://github.com/wswmsword/postcss-mobile-forever?tab=readme-ov-file#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0
31+
viewport: {}
2932
};
3033
```
3134

3235
## Options
3336

34-
### foo
35-
36-
Some description.
37+
| Name | Type | Default | Desc |
38+
|:--|:--|:--|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
39+
| viewportWidth | number\|(file: string) => number | 750 | 应用基于该宽度进行开发，转换后的伸缩视图将会以该宽度的视图作为标准进行比例伸缩；可以传递函数动态生成宽度，例如 `file => file.includes("vant") ? 375 : 750` 表示在名称包含“vant”的文件内使用 375px 的宽度，而其他文件使用 750px 的宽度 |
40+
| mobileUnit | string | "vw" | 移动端竖屏视口视图，转换成什么伸缩单位？设置为 `rem` 后激活 **rem-mode** |
41+
| maxDisplayWidth | number | / | 伸缩视图的最大宽度 |
42+
| basicRemWidth | number | / | *rem-mode* 的基准宽度，若不设定，将通过 `viewportWidth` 获取 |
43+
| enableMediaQuery | boolean | false | 打开媒体查询模式，打开后将自动关闭 `maxDisplayWidth`，激活 **mq-mode** |
44+
| desktopWidth | number | 600 | 适配到桌面端宽度时，展示的视图宽度 |
45+
| landscapeWidth | number | 425 | 适配到移动端横屏宽度时，展示的视图宽度 |
46+
| appSelector | string | / | 页面最外层选择器，例如“`#app`”，用于设置在桌面端和移动端横屏时的居中样式，样式文件中至少要包含空的选择器 `#app {}` |
47+
| appContainingBlock | "calc"\|"manual"\|"auto" | "calc" | 该属性和矫正 `fixed` 定位元素有关，`manual` 将不矫正；`calc` 将通过插件主动计算的方式矫正元素尺寸，是默认行为；`auto` 将通过 `transform: translateZ(0)` 强制设置根[包含块](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block)为 `appSelector`，从而自动矫正元素，并且此时需要设置属性 `necessarySelectorWhenAuto` |
48+
| necessarySelectorWhenAuto | string | / | 当 `appContainingBlock` 设为 `auto` 时，需要指定该属性，该属性指定了 `appSelector` 往内一层的元素选择器，查看一个[关于指定元素作为包含块的实验](https://github.com/wswmsword/web-experiences/tree/main/css/fixed-on-containing-block)以了解如何使用该属性，您也可以查看[使用这个属性的示例项目](./example/cases/auto-app-containing-block/postcss.config.js)以了解如何使用这个属性 |
49+
| border | boolean\|string | false | 在页面外层展示边框吗，用于分辨居中的小版心布局和背景，可以设置颜色字符串 |
50+
| disableDesktop | boolean | false | 打开则不做桌面端适配，使用该参数前需要打开 `enableMediaQuery` |
51+
| disableLandscape | boolean | false | 打开则不做移动端横屏适配，使用该参数前需要打开 `enableMediaQuery` |
52+
| disableMobile | boolean | false | 打开则不做移动端竖屏适配，把 px 转换为视口单位，如 vw |
53+
| exclude | RegExp\|RegExp[] | / | 排除文件或文件夹 |
54+
| include | RegExp\|RegExp[] | / | 包括文件或文件夹 |
55+
| unitPrecision | number | 3 | 单位精确到小数点后几位？ |
56+
| propList | string[] | ['*'] | 哪些属性要替换，哪些属性忽略？用法参考 [postcss-px-to-viewport 文档](https://github.com/evrone/postcss-px-to-viewport/blob/HEAD/README_CN.md) |
57+
| selectorBlackList | (string\|RegExp)[] | [] | 选择器黑名单，名单上的不转换 |
58+
| propertyBlackList | propertyBlackList | [] | 属性黑名单，名单上的不转换，如果要指定选择器内的属性，用对象的键表示选择器名称，具体用法见 [vant 的范例代码](./example/others/vant-vue/postcss.config.cjs#L9C17-L9C17) |
59+
| valueBlackList | (string\|RegExp)[] | [] | 属性值黑名单，名单上的值不转换 |
60+
| rootContainingBlockSelectorList | (string\|RegExp)[] | [] | 包含块是根元素的选择器列表，效果和标注注释 `/* root-containing-block */` 相同 |
61+
| verticalWritingSelectorList | (string\|RegExp)[] | [] | 纵向书写模式的选择器列表，效果和在选择器顶部标注注释 `/* vertical-writing-mode */` 相同 |
62+
| minDesktopDisplayWidth | number | / | 宽度断点，如果不提供这个值，默认使用 `desktopWidth` 的值，视图大于这个宽度，则页面宽度是桌面端宽度 `desktopWidth`，“原理和输入输出范例”一节具体介绍了该值的触发情况 |
63+
| maxLandscapeDisplayHeight | number | 640 | 高度断点，视图小于这个高度，并满足一定条件，则页面使用移动端横屏宽度，“原理和输入输出范例”一节具体介绍了该值的触发情况 |
64+
| side | any | / | 侧边配置，在桌面端媒体查询中生效，用于利用宽屏的空间，后文将介绍它的若干子属性 |
65+
| comment | any | / | 自定义注释，改变注释的名称，后文将介绍它的若干子属性 |
66+
| customLengthProperty | any | / | 用于指定需要添加到桌面端或横屏的自定义变量（css 变量，`var(...)`），如果不指定，默认**所有**和长度有关的属性，如果使用了自定义变量，都会被添加入桌面端和横屏，后文将介绍它的若干子属性 |
67+
| experimental.extract | boolean | false | 提取桌面端与横屏样式代码，用于生产环境，用于代码分割优化产包，具体查看“注意事项”一节 |
68+
| experimental.minDisplayWidth | number | / | 限制最小宽度，和 `maxDisplayWidth` 搭配使用
3769

38-
- Type: `string`
39-
- Default: `undefined`
40-
- Example:
70+
### 默认配置参数
4171

4272
```js
43-
export default {
44-
plugins: ['winjs-plugin-example'],
45-
// 开启配置
46-
example: {
47-
foo: 'bar'
73+
{
74+
"viewportWidth": 750,
75+
"maxDisplayWidth": null,
76+
"enableMediaQuery": false,
77+
"desktopWidth": 600,
78+
"landscapeWidth": 425,
79+
"minDesktopDisplayWidth": null,
80+
"maxLandscapeDisplayHeight": 640,
81+
"appSelector": "#app",
82+
"appContainingBlock": "calc",
83+
"necessarySelectorWhenAuto": null,
84+
"border": false,
85+
"disableDesktop": false,
86+
"disableLandscape": false,
87+
"disableMobile": false,
88+
"exclude": null,
89+
"include": null,
90+
"unitPrecision": 3,
91+
"selectorBlackList": [],
92+
"valueBlackList": [],
93+
"rootContainingBlockSelectorList": [],
94+
"verticalWritingSelectorList": [],
95+
"propList": ["*"],
96+
"mobileUnit": "vw",
97+
"side": {
98+
"width": null,
99+
"gap": 18,
100+
"selector1": null,
101+
"selector2": null,
102+
"selector3": null,
103+
"selector4": null,
104+
"width1": null,
105+
"width2": null,
106+
"width3": null,
107+
"width4": null
108+
},
109+
"comment": {
110+
"applyWithoutConvert": "apply-without-convert",
111+
"rootContainingBlock": "root-containing-block",
112+
"notRootContainingBlock": "not-root-containing-block",
113+
"ignoreNext": "mobile-ignore-next",
114+
"ignoreLine": "mobile-ignore",
115+
"verticalWritingMode": "vertical-writing-mode"
116+
},
117+
"customLengthProperty": {
118+
"rootContainingBlockList_LR": [],
119+
"rootContainingBlockList_NOT_LR": [],
120+
"ancestorContainingBlockList": [],
121+
"disableAutoApply": false
122+
},
123+
"experimental": {
124+
"extract": false,
125+
"minDisplayWidth": null
48126
}
49-
};
127+
}
50128
```
51129

52130
## License

‎package.json‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "winjs-plugin-example",
3-
"version": "0.0.1",
4-
"repository": "https://github.com/winjs-dev/winjs-plugin-template",
2+
"name": "@winner-fed/plugin-viewport",
3+
"version": "0.0.0",
4+
"repository": "https://github.com/winjs-dev/winjs-plugin-viewport",
55
"license": "MIT",
66
"type": "module",
77
"exports": {
@@ -27,18 +27,23 @@
2727
"simple-git-hooks": {
2828
"pre-commit": "npm run lint:write"
2929
},
30+
"dependencies": {
31+
"postcss-mobile-forever": "^4.3.1"
32+
},
3033
"devDependencies": {
3134
"@biomejs/biome": "^1.9.4",
3235
"@playwright/test": "^1.49.0",
3336
"@winner-fed/winjs": "^0.11.21",
37+
"@winner-fed/utils": "^0.11.21",
3438
"@rslib/core": "^0.1.1",
3539
"@types/node": "^22.10.1",
3640
"playwright": "^1.49.0",
3741
"simple-git-hooks": "^2.11.1",
3842
"typescript": "^5.7.2"
3943
},
4044
"peerDependencies": {
41-
"@winner-fed/winjs": "^0.11.21"
45+
"@winner-fed/winjs": "^0.11.21",
46+
"@winner-fed/utils": "^0.11.21"
4247
},
4348
"peerDependenciesMeta": {
4449
"@winner-fed/utils": {

‎playground/.winrc.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { defineConfig } from 'win';
1+
import { defineConfig } from '@winner-fed/winjs';
22

33
export default defineConfig({
44
plugins: ['../src'],
5-
example: {
6-
foo: 'bar',
5+
viewport: {
6+
appSelector: '#root',
77
},
88
});

‎playground/src/pages/index.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
<template>
2-
<div>
2+
<div class="container">
33
<h2>Hi! Welcome to Winjs ❤️ Vue!</h2>
44
<p>
55
<img src="@/assets/img/logo.png" width="200" height="200" alt="logo" />
66
</p>
77
<p>To get started, edit <code>pages/index.vue</code> and save to reload.</p>
88
</div>
99
</template>
10+
11+
<style>
12+
.container {
13+
width: 375px;
14+
margin: 0 auto;
15+
}
16+
</style>

0 commit comments

Comments
 (0)