mpx skyline skill - #2540
Open
wenwenhua wants to merge 67 commits into
Open
Conversation
…o feat-mpx-skyline-skill-cwy
…o feat-mpx-skyline-skill-cwy
hiyuki
reviewed
Sep 14, 2026
| | --- | --- |------------------------------------------------------------| | ||
| | 布局 | `float` / 清除浮动相关写法 | 使用 Flex | | ||
| | 布局 | `contain` | 使用 Skyline 私有 `-wx-contain` | | ||
| | 布局 | `resize` | 无等效替代 | |
hiyuki
reviewed
Sep 14, 2026
|
|
||
| ## 布局适配 | ||
|
|
||
| ### 不要依赖 BFC 和 margin 合并 |
hiyuki
reviewed
Sep 14, 2026
|
|
||
| | 断言 | 正向适配要求 | 对应规则 | 验证方法 | | ||
| | --- | --- | --- | --- | | ||
| | `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
reviewed
Sep 14, 2026
| | `s2_03` | Skyline/glass-easel 循环中的外部片段采用 import 加具名 template 调用，并显式传递当前 item/index。 | [[必须] wx:for 内嵌 <include> 时改为 <template>](../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
reviewed
Sep 14, 2026
| | `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：嵌套滚动、吸顶与层级 |
hiyuki
reviewed
Sep 14, 2026
| | `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。 | | ||
|
|
Collaborator
There was a problem hiding this comment.
新增一个创建全新组件/页面的case吧，描述需求断言实现是否满足skyline适配要求，可参考mpx2rn中的eval-6/7/8的设计
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.