Taro踩坑记

javascript/jquery

浏览数:521

2020-6-11

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文件引入可以解决这个问题。

待续。。。

作者:IHET