Taro入门踩坑记

Taro分享

1.Taro是什么？

Taro是一套遵循React 语法规范的多端开发解决方案，它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法。
Taro在 Web 端的代码中使用自研的类 React 组件框架 Nerv 作为基础框架；在CLI 工具的设计上，借鉴打包工具 Athena 的代码；使用Lerna管理仓库包。
Taro通过内部的编译打包工具将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等）运行的代码。
Taro支持使用 npm/yarn 安装管理第三方依赖;
Taro支持使用 ES7/ES8 甚至更新的 ES 规范，一切都可自行配置
Taro支持使用 CSS 预编译器，例如 Sass Less 等
Taro支持使用 Redux 进行状态管理
Taro支持使用 MobX 进行状态管理
小程序 API 优化，异步 API Promise 化等等
Taro Cli原理及多端运行机制可参考文档

2. Taro的由来

由于微信小程序的开发模式不是特别的友好，并没有融合目前主流的工程化开发思想，例如不完整的 ES.Next 语法，较为封闭的开发工具等等，这使得很多业界开发模式与工具不能在小程序开发中得到相应体现，这时需要一个抹平小程序端开发差异的解决方案，让开发者可以使用熟悉的技术栈完成多端的开发。为解决该痛点，业界相继出现了来自美团点评的基于 Vue 语法的 mpvue 框架，腾讯团队的 WePY以及京东团队的Taro。Taro一开始只是为解决微信小程序原生开发不友好的问题而出现的，但是由于Taro团队在项目上不仅仅只有微信小程序一个端，还有其他的端，为了节省工作量，Taro团队就逐步完善，使得Taro支持生成可用于多个终端的代码。

3. 怎么使用Taro

Taro的安装与使用可以参照官方文档一步一步来。

4.使用Taro需要注意的地方

Taro为实现可以多端转换，限制还是比较多的，具体可参考Taro 开发说明与注意事项、开发前注意、Taro 兼容 h5 踩坑指南

1. 基本上不能使用除Taro物料外及taro-ui外的三方组件，taro组件的封装和发布可参照文档来。
2. 微信小程序开发工具的配置, 需要设置关闭 ES6 转 ES5 功能、设置关闭上传代码时样式自动补全、设置关闭代码压缩上传
3. 微信小程序，注意是微信小程序（H5和RN没这个问题），
   暂不支持在 render() 之外的方法定义 JSX；
   不能在包含 JSX 元素的 map 循环中使用 if 表达式；
   不能使用 Array.map 之外的方法操作 JSX 数组；
   不能在 JSX 参数中使用匿名函数；
   不能在 JSX 参数中使用对象展开符；
   不支持无状态组件（Stateless Component)。
4. H5的跨域问题
   h5 发请求会报跨域问题，需要使用代理转换请求。
   编辑根目录下的 config/index.js 文件
   
5. 样式单位，rpx仅微信小程序支持，H5，RN都不支持，所以最好使用px，Taro会根据不同端将px转换成rem、rpx、px等。另外Taro是对大小写敏感的，PX、Px、px是不同的东西，若想不让Taro转化px单位，可使用PX，1PX = 1px
6. Taro Api对不同端的支持程度不一样，在使用前最好看一下文档
7. Taro自定义的高阶函数或高阶组件在使用的时候，修饰器应该放在connect修饰器的下面，否则会报错

最后将Taro的一些常用文档，放在这：
官方文档
Api文档
Taro物料
Taro论坛：可以在这提问，讨论等等

5.Taro的坑

有关多端组件的坑

多端组件写法可参考文档多端开发-跨平台开发
首先，多端组件不能用在路由对应的组件上，比如：
App.jsx中配置一个路由为：pages/index/index，那么pages/index 下，必须要有index.jsx或index.js或index.ts的文件，否则再H5编译时会报错
其次，多端组件每个端的实现文件最好用同一个文件夹下，命名为index，文件名作为组件名，如下：

最后，多端组件先会引用引用 .h5.后缀名 这样的文件，若是没有找到才会带后缀的那个文件，比如下面这个多端组件，在H5端使用的是WebView下的index.h5.jsx

有关Taro转H5的坑

1. Taro中H5是可以使用div、p等html标签的，但是基本上不能使用出Taro物料外的第三方开源组件，比如Taro不能使用Ant-mobile
2. Taro在H5是使用taro-ui，需要现在config中配置一下
   
3. 路由跳转，注意url需要以 “/” 开始，表示绝对路径，否则是相对路径，比如：从/pages/index/index 跳转到 pages/webTest/index，若不加"/",跳转到的路由变成了/pages/index/#/pages/webTest/index

有关Taro转RN的坑

开发流程参考文档

1. 新建RN空壳项目，必须使用Taro官方提供的壳工程，按照文档来操作，使用RN搭建空壳的项目，一直会报一个NativeEmitter Moudle not found的错误
2. 在IOS端运行空壳项目时，需要使用.xcworkspace这个后缀这个，若用Xcode run的时候报RCTXXXX.h not found的编译错误，建议重新下载空壳项目，重新操作一遍

6.目前小程序项目转RN和H5的难度

1.项目中使用了比较多的只能在小程序中使用的方法，这个需要根据不同端进行改造
2.样式

总体来说，要达成一套代码适应三个端的目的，目前的代码还是需要一个页面一个页面的去过，工作量不比重写的工作量小