mpx skyline skill by wenwenhua · Pull Request #2540 · didi/mpx

wenwenhua · 2026-07-01T12:31:32Z

No description provided.

…o feat-mpx-skyline-skill-cwy

hiyuki · 2026-09-14T10:52:46Z

+| --- | --- |------------------------------------------------------------|
+| 布局 | `float` / 清除浮动相关写法 | 使用 Flex                                                    |
+| 布局 | `contain` | 使用 Skyline 私有 `-wx-contain`                                |
+| 布局 | `resize` | 无等效替代                                                      |


resize是啥啊

hiyuki · 2026-09-14T10:53:36Z

+
+## 布局适配
+
+### 不要依赖 BFC 和 margin 合并


参考mpx2rn skill的迭代更新一下

hiyuki · 2026-09-14T10:57:44Z

+
+| 断言 | 正向适配要求 | 对应规则 | 验证方法 |
+| --- | --- | --- | --- |
+| `s3_00` | Skyline 图标与标题置于同一个可收缩的 span 内联容器，容器设置 max-lines=1、overflow=ellipsis，图片采用 inline-block，使同段图文在有限宽度内共同单行截断；WebView 对应分支保留同段图文单行截断。 | [图文混排](../mpx2skyline/references/skyline-layout-practice.md)；`skyline.inline-flow` | 检查微信输出实际 span 容器的省略属性、图片 display、renderer 分支及父级宽度和收缩约束；使用超长标题核对图标与文字共同截断的实现路径。普通 text 的省略属性不能替代此混排容器检查。 |


hiyuki · 2026-09-14T10:58:34Z

+| `s2_03` | Skyline/glass-easel 循环中的外部片段采用 import 加具名 template 调用，并显式传递当前 item/index。 | [[必须] wx:for 内嵌 &lt;include&gt; 时改为 &lt;template&gt;](../mpx2skyline/references/skyline-layout-practice.md)；`skyline.loop-template` | 检查导入路径、模板名称和循环数据参数，代入两行不同数据确认作用域。 |
+| `s2_04` | Skyline 的简单 navigator 使用 text 或纯文本子节点；卡片导航采用符合该子节点结构的内容，或由外层点击事件实现同一详情跳转。 | [navigator 嵌套限制](../mpx2skyline/references/skyline-layout-practice.md)；`skyline.navigator-children` | 检查两个导航入口的实际子节点和/pages/detail目标；复杂外层事件方案核对绑定与跳转调用。 |
+
+## Case 3：图文混排与动画


这断言数量太少了和上面合成一个吧

hiyuki · 2026-09-14T10:59:08Z

+| `s3_01` | Skyline 闪烁圆点由真实节点承载 CSS animation，采用支持的fill-mode（如both或forwards），实现原有1秒循环和透明度变化。 | [动画与过渡差异](../mpx2skyline/references/skyline-style-reference.md)；`skyline.node-animation` | 追踪真实圆点节点的关键帧、fill-mode与周期，确认尺寸颜色及opacity变化对应原效果。 |
+| `s3_02` | Skyline 按钮通过状态类驱动 transform/opacity 的150ms CSS transition，完成按下及恢复的视觉过渡；其他渲染目标可使用各自适配实现。 | [animation API 不支持 → 使用 CSS transition](../mpx2skyline/references/skyline-layout-practice.md)；`skyline.state-transition` | 追踪按下/松开/取消绑定到Skyline状态及CSS，核对scale(.96)、opacity(.7)与恢复值。 |
+
+## Case 4：嵌套滚动、吸顶与层级


这个和上面滚动那个case合并吧

hiyuki · 2026-09-14T11:00:39Z

+| `s4_01` | Skyline 横向列表显式选择type=list/custom，开启enable-flex并设置横向Flex布局；采用list时条目为直接子节点，项目保持120px宽度和相应的收缩约束。 | [Skyline 相对 WebView 的高频差异补充](../mpx2skyline/references/skyline-component-reference.md)；`skyline.horizontal-list` | 检查横向容器的type、scroll-x、enable-flex、flex-direction及条目宽度/收缩；采用list时检查直接子节点，多项目排列后形成横向内容。 |
+| `s4_02` | Skyline 分支使用sticky-section/sticky-header实现组标题吸顶，header为section首子节点且具有背景；WebView分支采用对应的CSS sticky实现。 | [sticky 吸顶替代方案](../mpx2skyline/references/skyline-layout-practice.md)；`skyline.sticky-structure` | 分别选择renderer分支，检查sticky节点关系、背景与WebView样式；真机吸顶另记验证状态。 |
+| `s4_03` | Skyline 弹层与悬浮按钮组织为可比较的fixed层，通过层级值使弹层覆盖按钮。 | [z-index 与层叠适配](../mpx2skyline/references/skyline-layout-practice.md)；`skyline.fixed-layer` | 追踪实际fixed兄弟或等效可比较层级，比较最终覆盖关系及z-index。 |
+


新增一个创建全新组件/页面的case吧，描述需求断言实现是否满足skyline适配要求，可参考mpx2rn中的eval-6/7/8的设计

hiyuki · 2026-09-20T03:30:41Z

+
+### 判断当前渲染模式
+
+在页面或组件实例上可读取 `renderer` 成员，取值为 `webview` 或 `skyline`。如果在模板中要判断，可以拿到值后设置到 data 上。


为啥不直接获取renderer即可，为啥需要挂载一个data?

hiyuki · 2026-09-20T03:31:20Z

+
+> 注意事项：Skyline 与 WebView 只能通过运行时变量区分；编译时仅能区分微信平台，无法区分是否为 Skyline 渲染。
+
+### [必须] SelectorQuery 选择器不再支持以数字开头


这个正常也不支持吧，不需要这条

hiyuki · 2026-09-20T03:35:07Z

+})
+```
+
+### [必须] properties 默认值使用 `value` 而非 `default`


本来也不支持default，不需要这条

hiyuki · 2026-09-20T04:02:03Z

+  properties: {
+    compData: {
+      type: Object,
+      value: () => ({


当前框架没有做函数默认值使用函数定义的支持，示例当中不要出现类似代码

hiyuki · 2026-09-20T06:01:06Z

+| `position: fixed` | 支持 | 节点进入 fixed-context，整体高于 normal-context；所有 fixed 节点按全局 z-index 排序。                                               |
+| `overflow` | 部分支持 | 使用整体 overflow 控制裁剪；滚动及分轴设置见末尾清单。`overflow: hidden` 不建立 BFC。                                                     |
+| `visibility` | 部分支持 | 隐藏使用 `hidden`；`collapse` 不支持，替代方案见末尾清单。                                                                         |
+| `margin` | 部分支持 | 支持节点自身间距，但没有垂直 margin 折叠。先确认原 WebView 是否折叠，再保留其有效间距，详见[布局实践](./skyline-layout-practice.md#垂直-margin-折叠处理)。      |


分类很乱啊，上面那个百分比那里就已经有一个margin了，这里为啥还有一个

以及这里为啥没有padding

hiyuki · 2026-09-20T06:03:28Z

+
+以下集中列出本文涉及的全部已确认不支持项，包括可解析但原语义不生效的用法。支持属性的受限取值在此单列，不代表整个属性不受支持。替代方案应保留原视觉与交互；无等效方案时明确差异。
+
+| 属性 / 行为 / API | 兼容方案 |


分个类吧，选择器，属性，值三类

hiyuki · 2026-09-20T06:05:17Z

+适配要点：
+
+1. `isSkyline` 用运行时判断注入模板，只在 Skyline 下切换 `whitespace-nowrap`、`inline-block`、`inline-flex` 等兼容样式，非 Skyline 保持不变。
+2. 图标、`rich-text`、分隔符同属一段图文混排时，放在同一个 `mpxTagName@wx="span"` 容器内；同时兼容 RN 侧时需用 `mpxTagName@ios|android|harmony="text"` 和 `numberOfLines` 对齐单行截断。


我不太懂为啥文档里反复出现span，这是skyline的推荐标签吗？为啥不是text?

span不具备跨平台能力，mpx内完全没有考虑源码中存在span的情况

hiyuki · 2026-09-20T07:05:42Z

+
+### 图文混排
+
+触发条件：同一视觉行内同时出现 `image` / icon 与 `text` / `rich-text` / `special-text` / 自定义文本组件，尤其容器带 `truncate` / `line-clamp` / `whitespace-nowrap` 或 `mpxTagName@wx="span"` 时，必须按本节处理。不要只补 `max-lines` / `overflow`，否则 Skyline 下图片、组件 virtual-host 与文本仍无法按 WebView 方式内联对齐或截断。


这段描述很奇怪，你需要明确描述skyline下图文混排需要使用span，然后下面结合示例描述跨平台兼容的写法

hiyuki · 2026-09-20T07:11:54Z

+</template>
+```
+
+### navigator 嵌套限制


这个文档整个改为样式适配实践吧，skyline-style-practice.md，模版这些小的限制写到模版的reference里吧，把skyline-component-reference.md改为skyline-template-reference.md

hiyuki · 2026-09-20T07:16:46Z

+1. `isSkyline` 用运行时判断注入模板，只在 Skyline 下切换 `whitespace-nowrap`、`inline-block`、`inline-flex` 等兼容样式，非 Skyline 保持不变。
+2. 图标、`rich-text`、分隔符同属一段图文混排时，放在同一个 `mpxTagName@wx="span"` 容器内；同时兼容 RN 侧时需用 `mpxTagName@ios|android|harmony="text"` 和 `numberOfLines` 对齐单行截断。
+
+### 页面滚动替代方案


这段应该写到runtime-practice里

hiyuki · 2026-09-20T07:26:28Z

动态 class/style 示例违反 RN Skill 的明确规范。
图文混排示例使用 class="…{{isSkyline ? …}}"、style="{{…}}"，动态高度示例使用 style="max-height: 375px;{{ height }}"。RN Skill 明确要求动态部分使用 wx:class / wx:style，禁止在普通属性里拼接 Mustache。

hiyuki · 2026-09-20T07:28:52Z

Skyline 入口把 rem 列为优先单位，reference 将 em 标为支持；RN 最佳实践明确要求将 rem / em 转换为兼容单位。共享样式应优先使用 px / rpx，不能照搬 Skyline 的单位推荐。

可以在reference中标明支持rem和em，但是不要优先推荐

hiyuki · 2026-09-20T07:30:17Z

移除skill内容中RN兼容相关的内容，只需要专注在skyline适配上

wenwenhua and others added 30 commits June 2, 2026 10:48

init

4bdaef6

Merge branch 'master' into feat-mpx-skyline-adaptation

30eb00d

init skyline skill

cbbfe50

init

9748e27

Merge branch 'master' into feat-mpx-skyline-adaptation

93f1f26

add isSkyline

4982248

暂存

c9647fc

Merge remote-tracking branch 'origin/feat-mpx-skyline-adaptation' int…

6d6b8b1

…o feat-mpx-skyline-skill-cwy

add skyline 更新

ce5abbd

add skyline 更新

7f4e466

add skyline 更新

be050e9

Merge remote-tracking branch 'origin/feat-mpx-skyline-adaptation' int…

76d8c3d

…o feat-mpx-skyline-skill-cwy

feat: 修正&完善

4dccd44

add skill

0f913df

Merge branch 'master' into feat-mpx-skyline-adaptation

2e35091

优化 skyline skill

b9079fd

优化 skyline skill

9726c6e

优化 skyline skill

f2ad074

优化 skyline skill

fef42d9

优化 skyline skill

3819814

优化 skyline skill

93bf128

优化 skyline skill

95a08b5

优化 skyline skill

89eb8a0

Merge branch 'master' into feat-mpx-skyline-adaptation

9c7a839

更新适用场景 & demo

ceb4b05

Merge branch 'master' into feat-mpx-skyline-adaptation

09f8b4b

skill-creator 优化

73d34a9

skill-creator 优化

b435bf1

skill 优化

a4e811e

Merge branch 'master' into feat-mpx-skyline-adaptation

98f211e

wenwenhua added 3 commits September 10, 2026 19:09

新增case合集

0e909dd

合并&优化case合集

1250e74

合并&优化case合集

d106a46

hiyuki reviewed Sep 14, 2026

View reviewed changes

wenwenhua added 8 commits September 16, 2026 14:45

skill cr 优化：

6754e93

Merge branch 'master' into feat-mpx-skyline-adaptation

12af430

测试集优化

724d551

测试集优化

15b9f38

测试集优化

87d7b5f

skill 优化

6deea1b

skill 优化

7d9b240

case合集优化

095c8f6

hiyuki reviewed Sep 20, 2026

View reviewed changes


		### 判断当前渲染模式

		在页面或组件实例上可读取 `renderer` 成员，取值为 `webview` 或 `skyline`。如果在模板中要判断，可以拿到值后设置到 data 上。


		> 注意事项：Skyline 与 WebView 只能通过运行时变量区分；编译时仅能区分微信平台，无法区分是否为 Skyline 渲染。

		### [必须] SelectorQuery 选择器不再支持以数字开头


		以下集中列出本文涉及的全部已确认不支持项，包括可解析但原语义不生效的用法。支持属性的受限取值在此单列，不代表整个属性不受支持。替代方案应保留原视觉与交互；无等效方案时明确差异。

		\| 属性 / 行为 / API \| 兼容方案 \|


		### 图文混排

		触发条件：同一视觉行内同时出现 `image` / icon 与 `text` / `rich-text` / `special-text` / 自定义文本组件，尤其容器带 `truncate` / `line-clamp` / `whitespace-nowrap` 或 `mpxTagName@wx="span"` 时，必须按本节处理。不要只补 `max-lines` / `overflow`，否则 Skyline 下图片、组件 virtual-host 与文本仍无法按 WebView 方式内联对齐或截断。

Conversation

wenwenhua commented Jul 1, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hiyuki Sep 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hiyuki Sep 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hiyuki commented Sep 20, 2026

Uh oh!

hiyuki commented Sep 20, 2026

Uh oh!

hiyuki commented Sep 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hiyuki Sep 20, 2026 •

edited

Loading

hiyuki Sep 20, 2026 •

edited

Loading