taro小程序开发踩坑合集

Taro是一款使用React语法和Vue语法编写小程序的开发框架。在Taro的官方文档及社区中，已经有很多Taro开发的教程和资料，但是仍然会在开发过程中遇到一些问题。本文将会介绍一些Taro开发过程中常见的问题以及解决方法。

1. Taro + Redux 打包后出现 blank page

这是因为Taro在打包过程中，会将Redux打包成一个独立的js文件。如果你使用的是cdn来引入，可能会出现找不到文件的情况。解决方案是在多入口配置文件中添加以下代码：

```

output: {

filename: '[name].js',

path: outputPath,

library: '[name]',

libraryTarget: 'umd',

umdNamedDefine: true,

publicPath: `${assetsPublicPath}/${path.basename(outputPath)}/`

},

```

2. Taro中使用async/await

Taro中使用async/await会报错，因为Taro的编译器并不支持ES7语法的支持（即async/await）。解决方法是安装tarojs/async-await插件，并在配置文件中添加babel设置。

```

{

"plugins": ["tarojs-async-await"]

}

```

3. Taro中引用外部css样式

在Taro中引用外部css文件时，需要先用npm安装taro-ui和taro-ui样式，然后在app.scss文件中引入外部样式。

```

@import "taro-ui/dist/style/components/flex.scss";

```

4. Taro页面跳转

Taro中页面跳转需要通过Taro提供的api进行跳转，在跳转时需要使用绝对路径来进行跳转。例如，使用下面代码进行跳转：

```

Taro.navigateTo({

url: '/pages/home/index'

})

```

5. Taro中引用图片资源

在Taro中引用图片资源时，需要使用require引入图片。例如：

```

import image from './image.png'

```

6. Taro中使用自定义组件

在Taro中使用自定义组件需要先在config/index.js文件中配置简写路径，例如：

```

alias: {

'components': resolve(__dirname, '..', 'src/components'),

}

```

然后可以在页面中使用自定义组件：

```

import { Component } from '@tarojs/taro'

import CustomComponent from 'components/CustomComponent'

class Index extends Component {

render () {

return (

)

}

}

```

综上所述，Taro是一款非常优秀的小程序开发框架，但在使用过程中也会遇到一些问题。因此，在开发过程中需要不断学习和探索，才能更好的应用Taro进行小程序开发。