Taro：第三方小程序框架对比及多端统一开发的探索

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

Taro：第三方小程序框架对比及多端统一开发的探索

多终端统一开发框架，支持一次编写代码开发Reactreact开发微信小程序，生成可运行于微信/百度/支付宝/字节跳动/小程序/快应用/H5/React等应用。 (官方介绍)

Taro 1.x 版本于2018年9月发布

Taro 2.x正式版将于2020年1月发布

Taro 在不到两年的时间里保持着高速增长，发布了多个重大版本，使得 Taro 成为了一个功能齐全、多终端统一的开发框架，拥有大批忠实的粉丝。

虽然taro框架号称一次编写，多端运行，但是实际操作上还是不建议这么做，由于各个终端的实际情况，有些组件不容易通用，更别说整个项目了。

Taro2.0 改变编译和构建

这也是为什么 taro2.0 需要更新一个大版本的主要原因。Taro CLI 原本的编译构建系统就是他们开发的，但后来发现自己的轮子不如现有的轮子好用Taro：第三方小程序框架对比及多端统一开发的探索，所以就换了。虽然新版本对于我们一般的小型项目来说改动不大，但为以后的扩展提供了更好的社区兼容性。

异步编程调整

在Tar​​o 2.0中，启用异步支持不再需要安装@/async-await，而是直接通过babel插件支持。

在项目根目录中安装包 babel--- 和 babel-。

yarn add babel-plugin-transform-runtime --dev
yarn add babel-runtime

然后修改项目babel配置，配置插件babel---。

babel: {
  sourceMap: true,
  presets: [['env', { modules: false }]],
  plugins: [
    'transform-decorators-legacy',
    'transform-class-properties',
    'transform-object-rest-spread',
    ['transform-runtime', {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": 'babel-runtime'
    }]
  ]
}

新功能

针对小程序编译添加了这个插件，当我们想要发布打包好的小程序时，可能会遇到小程序过大的问题，那么我们肯定很想知道是哪些文件造成了这种影响，我们可以使用 -- 来分析包大小。

在mini.xml中添加如下配置

const config = {
  mini: {
    webpackChain (chain, webpack) {
      chain.plugin('analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
    }
  }
}

然后你就可以看到熟悉的界面。

遗憾

taro2.0虽然在底层做了很多调整，但遗憾的是在实际的项目开发中能够用到的功能并不多，更多的是为taro以后的发展做铺垫，也让人更加期待3.0的发布。

*佳实践

随着社区和React生态的发展，为了获得更好的项目协作体验，降低协作难度，个人比较推荐使用taro++mobx4的技术栈组合。

请注意，taro 尚未升级到 .0，因此尚不能使用可选链接。

// 可选链写法暂时无法正常使用
a?.b
a?()
// 还需要继续使用短路的方式判定
a && a.b
a && a()
// mobx5 在很多旧机器上会出一些问题，如果没有特殊需求暂时不建议直接使用mobx5

坑

其实，作为一个新事物，taro 还是存在不少陷阱的。不过本着解决陷阱的原则，一般遇到陷阱的时候直接在 issue 区找就可以了，一般都会有解决办法。需要注意的是，taro 只能说是使用了 react 的风格，并没有完全实现 react 的所有功能。由于运行环境的限制，很多东西包括生命周期、语法糖、变量作用域使用等都需要自己一步步尝试后再使用。千万不要完全照搬 react 那一套。

特别是在jsx中使用map遍历生成子节点的时候，变量作用域可能并不是你想象的那样。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等