Taro踩坑记

Taro是一个可以同时编写小程序、app等的多端解决方案，做到一次编写，到处运行，提升开发效率，想想真是很美好呢！

然而，这也一定意味着，有很多坑等着我们去踩，多端一定会有很多不可预计的问题出现。我在这边文章中记录一下我的踩坑史，望大家引以为戒。

这里主要以rn端的坑为主：

坑一 没有自动安装所需的库

一顿操作，安装完了拉取模板，编译rn端，提示找不到”@tarojs/taro-rn”。
这个好办安装即可：

yarn add @tarojs/taro-rn --save

接下去会提示stylelint-config-taro-rn找不到，也安装即可。
然而会导致坑三。。。

坑二 编译rn端报错

运行build:rn报错:

Invalid regular expression: /(.\*\\\\\_\_fixtures\_\_\\\\.\*|node\_modules\[\\\\\\\]react\[\\\\\\\]dist\[\\\\\\\].\*|website\\\\node\_modules\\\\.\*|heapCapture\\\\bundle\\.js|.\*\\\\\_\_tests\_\_\\\\.\*)$/: Unterminated character class

这问题是metro里打包引发的，主要问题在于node的bug。看到有人降级到node10LTS就行，可是我试了下似乎还有问题。降到node8才行。

重新安装完node一定要重新 yarn install 一下项目，node-sass和node版本有关，需要重新编译。

坑三 一定要注意版本号

taro发布版本往往是1.x和2.x混着发，且小版本的版本号不对都会导致打包不成功。

此时按照官网操作：

taro update project

好吧，毫无作用，得手动统一下package.json里的版本号重新安装；

然而，还是报错版本不对。
仔细一查，还要把版本号前的 ^ 号去掉，锁死版本才行。
！！所以在解决坑一安装库的时候，要加上@version确定版本

坑四 gradle sync 报错

鉴于墙的存在，gradle sync打包失败应该算是情理之中。

在taro-native-shell项目中找到build.gradle,添加repositoties:

maven { url 'https://maven.aliyun.com/repository/google' }  
maven { url 'https://maven.aliyun.com/repository/jcenter' }  
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

如果还没有编译通过，clean一下重新编译试试。

坑五 编译h5 rn没问题，小程序就报错

删掉dist和.temp目录下的文件再编译即可

坑六 无法引用node_modules目录下的css

请务必配置sassImporter，网易严选中的例子中有:
./config/index.js:

const sassImporter = function (url) {
  if (url[0] === '~' && url[1] !== '/') {
      return {
          file: resolve('..', 'node_modules', url.substr(1))
      }
  }

  const reg = /^@\/styles\/(.*)/
  return {
      file: reg.test(url)
          ? resolve('..', 'src/styles', url.match(reg)[1])
          : url
  }
}
const config = {
.
.
.

sass:{
    importer: sassImporter
},

.
.
.
}

坑六 错误FATAL ERROR: v8::ToLocalChecked Empty MaybeLocal.

这段提示十分不详细，事实上经过仔细排查，是因为使用了坑五的这段sassImporter导致的，可能是某处引用了css所导致的。

坑七 小程序组件大小和其他端不一致

由于小程序使用了shadowdom封装了组件，因此在组件scss中需要添加针对组件的样式。
例如你有一个自定义组件 custom，那么你需要在组件样式中添加：

custom{
    justify-content: stretch;
    display:flex;
    //调整组件大小等的样式
}

坑八 有时会丢失全局样式

如果发生这种情况，一般是由于页面没有样式导致的。添加一个空的scss文件引入可以解决这个问题。

待续。。。

收藏

喜欢 0