native-to-weapp-vite-wevu-migration

Original：🇨🇳 Chinese

Translated

Apply a structured migration workflow from native mini-program projects to weapp-vite and wevu. Use when converting Page/Component code to Vue SFC, replacing setData-heavy state updates with ref/reactive, migrating properties/observers/triggerEvent contracts, introducing platform guards, and building migration-focused e2e validation and rollback checkpoints.

2installs

Sourcesonofmagic/skills

Added on2026-02-27

NPX Install

npx skill4agent add sonofmagic/skills native-to-weapp-vite-wevu-migration

SKILL.md Content (Chinese)

View Translation Comparison →

native-to-weapp-vite-wevu-migration

Overview

Migrate native mini-program projects to

weapp-vite + wevu + Vue SFC

, with the goals of "behavior equivalence first, gradual semantic upgrade, rollback capability".

Applicable tasks:

Migrate native
```
Page/Component
```
to SFC.
Refactor
```
this.data
```
/
```
setData
```
to
```
ref/reactive
```
.

Migrate

properties/observers/triggerEvent

to

defineProps/watch/defineEmits

.

Add
```
import.meta.env.PLATFORM
```
branches and cross-platform validation.
Establish e2e runtime error interception and rollback strategies during migration.

Workflow

Lock migration batches

First, clarify which page groups (e.g., orders, coupons) to migrate in this round.
Do not combine business refactoring and technical migration in the same batch of commits.

Establish pre-migration baseline

List page entries, key interactions, and response structures of critical APIs.
Document existing abnormal behaviors (e.g., crashes caused by empty arrays, parameter type drift).

Perform mechanical migration first, then semantic migration

Mechanical migration: Merge
```
js/wxml/wxss/json
```
into
```
.vue
```
files while maintaining equivalent workflows.
Semantic migration: Replace with
```
ref/reactive/computed/watch
```
and clean up large-object
```
setData
```
usage.

Prioritize component contract migration

Input contract:
```
properties
```
->
```
defineProps
```
+
```
withDefaults
```
.
Output contract:
```
triggerEvent
```
->
```
defineEmits
```
+ typed event signatures.
Side effect contract:
```
observers
```
->
```
watch/watchEffect
```
.

Handle native capability access

Prioritize using
```
emit
```
and reactive variables.
When native instance methods are required, use
```
instance
```
in
```
setup(_, { instance })
```
.
Do not leak
```
instance
```
into serializable state.

Add cross-platform conditional branches

Uniformly use
```
import.meta.env.PLATFORM
```
as platform guards.
Avoid scattering
```
wx/my/tt
```
branches in business pages; converge them to platform helpers.

Migration validation and rollback

First perform single-page smoke testing, then targeted e2e testing, followed by real-device regression for critical links.
e2e testing must collect runtime error logs to avoid "pages are visible but continuously report errors".
Submit each page group independently to ensure individual rollback capability.

Guardrails

Do not perform "migration + architecture rewrite" in the same batch.
Do not return native instance objects to template state.
Do not skip build artifact validation and only rely on the dev environment.
Do not run full regression first; prioritize high-value links during the migration phase.

Completion Checklist

Migrated pages have been converted to
```
.vue
```
files and no longer use the
```
Page/Component
```
constructor.
Page state updates do not rely on large-object
```
setData
```
syntax.
Component event/prop contracts are typed (using
```
defineProps/defineEmits
```
).
Cross-platform branches use
```
import.meta.env.PLATFORM
```
, with validation on at least one secondary platform.
e2e testing can capture runtime errors and has assertions for critical links.
Rollback points and migration records are documented in the change description.

References

```
references/migration-checklist.md
```
```
references/api-mapping-and-pitfalls.md
```

native-to-weapp-vite-wevu-migration

NPX Install

Tags

SKILL.md Content (Chinese)

native-to-weapp-vite-wevu-migration

Overview

Workflow

Guardrails

Completion Checklist

References