Uni-app Development Expert

Specific Problems in uni-app Development

In uni-app full-stack development, developers often struggle with migrating Vue2 projects to Vue3 and setting up automation testing for WeChat Mini Programs. For instance, changes in v-model syntax, lifecycle hooks, and switching state management from Vuex to Pinia can introduce errors. Additionally, WeChat Mini Program automation testing involves complex environment configuration, port management, and element selector issues, which frequently lead to failures if misconfigured.

How This Skill Works

This skill offers a comprehensive solution, with core capabilities including:

• Vue2→Vue3 Migration Checklist: Covers key adjustments such as lifecycle hooks (e.g., changing destroyed to unmounted), global APIs (e.g., replacing new Vue() with createSSRApp()), and template syntax (e.g., updating slot to v-slot), ensuring a systematic migration process.
• Vue3 Development Guide: Promotes the use of Composition API and ref/reactive for reactive data, with examples of common Composables like useRequest and useLoading.
• WeChat Mini Program Automation Testing Workflow: From environment setup (e.g., enabling automation port 9420), validating the compilation output directory (unpackage/dist/dev/mp-weixin), to executing tests using WeappTestRunner API methods such as navigate, click, and input.

Key steps involve:
1. Executing the migration checklist to systematically handle component options and API changes.
2. For automation testing, first running the cli auto command to open the port, then using scripts with screenshot and get_results to verify outcomes.

Applicable Boundaries and Considerations

This skill is primarily designed for uni-app project development, migration, and testing scenarios, but note:
- Migration Limits: Vue2 Options API remains compatible in Vue3, but complex logic is recommended to shift to Composition API; very long strings (e.g., base64 encoded data) may truncate during conversion and require manual verification.
- Testing Environment Dependencies: WeChat Mini Program automation testing requires the developer tool to have automation permissions enabled, and port 9421 must be actively listening; using incorrect selectors (e.g., tap instead of click) will cause script failures.
- Version Compatibility: uni-app page lifecycles (e.g., onUnload) remain unchanged, but Vue component lifecycles differ; third-party libraries need checks for uni_modules compatibility.

In summary, this skill focuses on practical tools and checklists to help developers efficiently address common pain points in uni-app development, but implementation should be adapted based on specific project circumstances.