SuperAPI AI 工具集

mpx-rn-dev-guide

通用与其它

查看项目

更新于 10-16 09:54

技能介绍

用途:面向 Mpx 跨端输出 RN 的适配任务,分两类——对已有 Mpx 组件做 RN 跨端适配改造,以及按 RN 兼容规范新建 Mpx 组件,也可用于排查 Mpx2RN 编译报错、查询模板指令/基础组件/样式属性/生命周期/环境 API 的 RN 支持情况。Mpx 以微信小程序语法为基础并做类 Vue 拓展,可输出到小程序、Web 与 React Native,但输出 RN 时与小程序、Web 存在能力差异。

主要能力与约束:模板侧要求优先使用标注 RN 支持的基础组件及属性/事件;RN 页面默认不可滚动,onPullDownRefresh/onReachBottom/onPageScroll 不触发,需用 scroll-view;仅 tap/longpress/touchstart/touchmove/touchend/touchcancel 支持冒泡捕获,事件委托用 e.currentTarget;Mustache 不支持普通方法调用,改用 computed/wxs;i18n 解构出的 t/tc/te/tm 须原名暴露。脚本侧仅用标注 RN 支持的生命周期与构造选项,环境能力经 @mpxjs/api-proxy 的 mpx.xxx 调用而非 wx.xxx/my.xxx;selector API 仅支持 #id/.class 且节点须声明空 wx:ref。样式侧禁用复合/伪类/伪元素选择器,改为单类等效写法并同步模板与脚本引用;动态样式用 wx:class/wx:style;保留 /use rpx/ 与 /use px/ 注释;不可等效处用条件编译最小包裹,样式条件编译产物不得留空选择器。JSON 配置仅用 RN 支持字段,不支持项如 tabBar 用条件编译隔离。RN 条件为 mpx_mode === 'ios' || 'android' || 'harmony'。新建组件建议用组合式 API,状态管理优先 @mpxjs/pinia,RN 原生能力按差异大小选择文件维度或模板维度条件编译。

使用方式:改造流程为模板、脚本、样式、JSON 逐维核对后再编译校验与 ESLint 检查。校验脚本 scripts/compile-validate.js 基于 @mpxjs/mpx-cli-service 真实编译,自动探测项目根目录,子组件忽略策略按 @mpxjs/webpack-plugin 版本切换(≥2.10.20 用 partialCompileRules,低于则回退前置 loader)。

常用命令: node .agents/skills/mpx-rn-dev-guide/scripts/compile-validate.js src/components/foo.mpx node .agents/skills/mpx-rn-dev-guide/scripts/compile-validate.js src/pages/index.mpx --type=page --target=ios node .agents/skills/mpx-rn-dev-guide/scripts/compile-validate.js src/components/foo.mpx --target=wx,ios,web node .agents/skills/mpx-rn-dev-guide/scripts/compile-validate.js src/components/foo.mpx --target=ios --json node .agents/skills/mpx-rn-dev-guide/scripts/compile-validate.js src/components/foo.mpx --target=ios --no-ignore-sub-components

参数:--target 默认 ios,可用逗号分隔多目标;--type 默认 component,另有 page;--project-root 默认自动探测;--no-ignore-sub-components、--json 默认关闭。退出码 0 通过、1 编译错误、2 运行期异常。

适用场景与限制:适合 Mpx 工程的 RN 跨端改造与新建规范落地;参考文档体量大,建议按需 grep 或锚点跳读对应小节,不预读全部 references。资料未提供具体收费、价格、平台版本要求及效果数据。