skills.rest
didi
didiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mpx2rn-simple

Guides Mpx cross-platform code adaptation and validation for React Native output.

3.9k|388|Updated Dec 6, 2018
Search Tags:#react native#conditional compilation#mini-program#mpx#compile validation#Cross-Platform#Code Migration
One-click install
npx skills add https://github.com/didi/mpx --skill mpx2rn-simple
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mpx2rn-simple
Source: https://github.com/didi/mpx/tree/main/.agents/skills/mpx2rn-simple
Command: npx skills add https://github.com/didi/mpx --skill mpx2rn-simple

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mpxjs/mpx-cli-service, @mpxjs/webpack-plugin, @mpxjs/cli-shared-utils, @mpxjs/vue-cli-plugin-mpx, webpack, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Adapting Mpx mini-program code to run on React Native (iOS, Android, Harmony) involves many subtle differences across templates, scripts, styles, and JSON configuration, and mistakes often surface only as obscure compile or runtime errors. This Skill provides a structured development and adaptation guide plus a real compile-validation script so Mpx2RN work is checked against actual platform constraints.

Core Features & Use Cases

  • Four-dimension adaptation guidance: Indexed references covering template, script, style, and JSON configuration capabilities and constraints for RN output, including conditional compilation and atomic CSS (UnoCSS) support boundaries.
  • Development checklist and workflow: A mandatory constraint checklist for adaptation, new component creation, error troubleshooting, and Code Review, with per-block implementation steps.
  • Real compile validation: The bundled compile-validate.js script runs the host project's @mpxjs/mpx-cli-service webpack build against .mpx files for targets like ios, android, and harmony, aggregating errors and warnings by category.
  • Use Case: When migrating an existing WeChat mini-program page to React Native, follow the checklist to replace unsupported selectors and APIs, isolate RN-specific code with conditional compilation, then run the validation script until zero errors and warnings remain.

Quick Start

Ask the assistant to adapt or review a specific .mpx page or component for Mpx2RN output and validate it with the compile-validate script for your target platforms.

Frequently Asked Questions about mpx2rn-simple

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I adapt an Mpx mini-program component to React Native?▼

Read the development checklist first, then verify each block against the template, script, style, and JSON capability references. Replace unsupported APIs with mpx.xxx equivalents, isolate RN-only code with conditional compilation, and finish by running the compile-validate script.

How do I validate Mpx2RN compilation for a .mpx file?▼

Run node scripts/compile-validate.js with the .mpx file path, using --target for platforms like ios,android,harmony and --type=page for pages. Exit code 0 means no errors or warnings; issues are grouped by style, template, script, json, or dependency category.

Does Mpx2RN support UnoCSS atomic classes?▼

Yes, when the project integrates @mpxjs/unocss-plugin and @mpxjs/unocss-base with presetMpx. Only utilities and variants within the documented RN support range work; interactive pseudo-class variants like hover: are not supported.

Which mini-program APIs work on React Native in Mpx?▼

APIs are proxied through @mpxjs/api-proxy after calling mpx.use(apiProxy), covering routing, storage, network, device, and UI APIs like navigateTo, request, and getSystemInfo. APIs not listed in the RN API reference are generally unavailable and need conditional compilation or custom extension.

When should I use conditional compilation in Mpx2RN?▼

Use it only when no cross-platform equivalent implementation exists, wrapping the smallest incompatible fragment. File-level conditional files like component.ios.mpx suit large differences, while @ios|android|harmony attribute suffixes handle small template differences.

Why does compile-validate.js fail with exit code 2?▼

Exit code 2 indicates a runtime exception, most commonly that @mpxjs/mpx-cli-service is not installed in the host project. The script auto-detects the project root from the input file, or you can pass --project-root explicitly.

Related Skills

Explore More Software Engineering Skills→
didididi
3.9k

mpx-development-guides

Guide Mpx framework development covering project structure, syntax, and cross-platform deployment.

Official
Intermediate
anicca-labsanicca-labs

preview

Capture iOS and Android simulator screenshots and run TypeScript type-checks.

Official
Intermediate
partme-aipartme-ai
610

react-native

Provides comprehensive guidance for developing cross-platform mobile applications with React Native.

Official
Intermediate
Grupo-AFALGrupo-AFAL

docs-audit

Identify undocumented controllers, models, and routes in a Rails codebase.

Official
Intermediate