SuperAPI AI 工具集

react-to-taro

前端与建站

查看项目

更新于 10-15 20:30

技能介绍

用途:把 React Web 应用(v18+)转译为针对微信小程序优化的 Taro 4.x 代码,适用于将 React 组件、页面或应用入口迁移到小程序。

主要能力:提供三份辅助脚本。analyze.js 扫描 React 源码,检测 JSX 元素、事件处理器、react-router-dom 路由、axios/localStorage/DOM 等 Web API,输出 taro-migration-report.json;generate-transforms.js 读取报告生成 taro-transforms.json 转换指令;validate.js 校验转换结果,检查是否残留 Web 原生元素、react-router-dom、DOM API/localStorage、e.target.value、undefined state,通过返回 0,失败返回 1。转换规则涵盖导入替换、JSX 元素映射(div→View、span→Text、img→Image、input→Input)、事件转换(onChange→onInput、e.target.value→e.detail.value、onKeyDown Enter→onConfirm)、路由(useNavigate→Taro.navigateTo、Link→Navigator)、API 垫片(axios→Taro.request、localStorage→Taro.setStorageSync/GetStorageSync、alert→Taro.showToast、DOM 查询→Taro.createSelectorQuery)以及样式布局与性能优化。样式支持 weapp-tailwindcss,需执行 npm install weapp-tailwindcss tailwindcss autoprefixer postcss -D,并给出 webpack5 与 Vite 两种配置示例。

推荐工作流:先运行 node scripts/analyze.js ./src,再运行 node scripts/generate-transforms.js taro-migration-report.json,由 Agent 手动执行转换,最后运行 node scripts/validate.js ./src-taro 验证。

限制与注意事项:Text 不能包含 View;items 仅允许 .map(),需预处理 filter;函数 props 必须以 on 开头;state 不用 undefined;组件可能在数据加载前渲染,需用可选链;100vh 改用 min-h-screen;固定底部需安全区内边距;微信开发者工具需关闭代码自动热重载;与 NutUI 或 @tarojs/plugin-html 共用时需查看官方注意事项;建议关闭 prebundle。收费、价格、平台支持范围等资料暂未提供。