Taro 实战踩坑

Taro

1. 引用相对路径图片

直接将相对路径放在src属性中，不起作用，
需要先import进来，最好把图片放到服务器上，然后直接写http路径

错误写法：

<Image src="./images/front.png" />

正确写法:

import namedPng from './images/front.png'

...
<Image src={namedPng} />

2. 不支持render中，使用函数多条件渲染
   h5不报错，但是编译成小程序时 会报错

错误写法：

onRenderContent = () => {
    const { verified, recognized } = this.state;
    let content = null; // 初始化时，必须赋值，否则小程序报错undefined
    if (verified && recognized) {
        content = (
            <view>验证通过且识别通过 </view>
        ) 
    }  else if (!verified && recognized) {
        content = (
            <view> 识别通过但是验证不通过</view>
        ) 
    } else {
        content = (
            <view> 默认显示的值</view>
        ) 
    }
    return content;
}

render () {

    return (
        <view>
         {this.onRenderContent()}
        </view>
    )
}

正确写法：

render () {
    const { verified, recognized } = this.state;
    let content = null; 
    if (verified && recognized) {
        content = (
            <view>验证通过且识别通过 </view>
        ) 
    }  else if (!verified && recognized) {
        content = (
            <view> 识别通过但是验证不通过</view>
        ) 
    } else {
        content = (
            <view> 默认显示的值</view>
        ) 
    }
    return (
        <view>
         {content}
        </view>
    )
}

3. Taro.chooseImage(OBJECT) 只支持小程序端，h5端需要重写

  handleUpload = () => {
    let self = this;
    Taro.chooseImage({
      count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera'],
        success: function (res) {
          let value = res && res.tempFilePaths[0];
          self.setState({
            value: value,
            recognized: !!(value),
          });
        }
    })
  }

h5端不支持

官方说下个版本会支持<Input type="file" />

4. Taro.chooseImage 转换成Base64

  chooseImage = () => new Promise((resolve,reject)=>{
    Taro.chooseImage && Taro.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera'],
        success: function (res) {
          const FileSystemManager = wx.getFileSystemManager();
          FileSystemManager.readFile({
            filePath: res.tempFilePaths[0],
            encoding: 'base64',
            success: function ({ data }) {
              resolve(data);
            },
            fail: function (err) {
              reject(err);
            }
          });
        },
        fail: function (err) {
          reject(err);
        }
    })
  });

  handleUpload = async () => {
      const { onUpload, isFront } = this.props;
      const data = await this.chooseImage();
      onUpload(data, isFront);
  }

试过直接在successs中写回调函数，但是无法传递消息到父组件，this指向有问题。

5. taro 不支持children， 支持属性传值

子组件
<Button>{ this.props.txt }</Button>


引用子组件
<MButton txt="下一步" />

6.在components文件夹中 新建组件时，组件支持自定义命名，但是不能大写开头。否则会报错

错误写法：

 // 真实路径
import MinaMask from '../../components/MinaMask/Index' 

或者
import MinaMask from '../../components/MinaMask/MinaMask'

报错

正确写法：

 // 真实路径

import MinaMask from '../../components/MinaMask/index'

或者
import MinaMask from '../../components/MinaMask/minaMask'

7. 组件属性传递数据，不能超过1M。比如base64字符串。

 <Image src={frontBase64File} className="background" />

大小限制