SuperAPI AI 工具集

mpx-rn-style-guide

通用与其它

查看项目

更新于 10-15 21:09

技能介绍

用途:本指南面向 Mpx 跨端输出 RN(Mpx2RN / Mpx2DRN)的样式适配场景,帮助把以微信小程序语法为基础的 .mpx 组件改造为 RN 平台可正常渲染的样式。Mpx 支持将同一套代码输出到小程序、Web 与 React Native,虽然编译时和运行时做了一定跨平台抹平,但输出 RN 时样式能力仍与小程序的 Web 存在较大差异。

主要能力:提供选择器适配和样式属性适配两类改造方法。选择器方面要求单类名化,禁止复合选择器,把 .list .item 改为 .list-item;将嵌套预处理写法(sass/less/stylus)展开铺平后再改造;子元素伪类(:first-child 等)用 wx:class 加 index 判断替代;伪元素用真实节点替代;:active 用 hover-class 替代。样式属性方面,极细边框通过条件编译切换 hairlineWidth,rem/em 改用 rpx,字体粗细用 normal/bold 而非数值,文本溢出改用 numberOfLines,隐藏元素避免 display:none,布局统一使用 Flex。模板中动态类名优先用 wx:style 与 wx:class,避免 {{}} 插值。

使用方式:按任务流程先做选择器适配,再做样式属性适配,最后检查确认。无法等效实现的选择器或属性,用原平台条件编译局部包裹并加 todo 注释(如 mpx_mode === 'wx' 等)。保留 /use rpx/ 与 /use px/ 注释。改造时同步更新 template、script(如 createSelectorQuery)中的类名引用,无特殊指示则在原 .mpx 文件修改并输出完整代码。

限制:需控制条件编译范围,避免大面积连续条件编译影响可读性;处理后不得残留空选择器;覆盖率与具体支持清单以官方知识库为准,资料中未提供完整样式属性支持清单。