原生小程序转Taro开发

最新推荐文章于 2023-11-06 15:07:09 发布

原创

最新推荐文章于 2023-11-06 15:07:09 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何将原生微信小程序转换为Taro代码，包括开发前的准备，如删除异步解决方案的引入，运行转换命令。转换后，可以直接使用Taro命令编译到对应平台。Taro遵循React语法，推荐使用JSX，提供了类型安全和语义化的标签。在开发实战部分，讨论了第三方组件与自定义组件的使用，强调了index作为key的优化问题，以及本地资源的引用方式。同时，文章提及状态管理和事件管理的处理策略。

使用Taro开发微信小程序

开发前准备

Taro可以把你的原生开发的微信小程序转换成Taro代码，具体步骤如下：

安装：

npm i -g @tarojs/cli

转换前注意

如果你的原生小程序引入了regeneratorRuntime也就是控制小程序异步解决方案的async/await，那么你的在转换之前可以全部把这些引入的文件删除掉，入口文件 app.js 中直接 import @tarojs/async-await这个插件，就可以开始使用 async functions 功能了。

$ npm install --save @tarojs/async-await

/* src/app.js */
import '@tarojs/async-await'

你的小程序根目录下运行

$ taro convert

即可完成转换。转换后的代码保存在根目录下的 taroConvert 文件夹下。

[外链图片转存失败(img-hTCpfTXX-1564630927403)(http://maint.deeptel.com.cn/upload/M00/00/84/CgIKO10cGbiAd2z1AABPRWJvfak945.png)]

转换完成后直接取出 taroConvert 目录里面的代码执行 npm install命令之后就可以使用 npm run build 命令编译到对应平台的代码。

    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch"

在taroConvert 文件中执行npm run build:weapp得到下面的文件目录，每个项目不同的文件结构在转换后会有一些不一样，主要区别是在pages文件的分包结构上。

├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|

最低0.47元/天解锁文章