Taro踩坑记录

一、Taro-UI使用

• 不要使用官网Taro-UI中快速上手安装Taro-UI，安装之后编译会报错。
• 如果不小心安装了，请先清空nodemodules文件夹中taro-ui文件夹，重新安装3.0版本的Taro-UI
  npm install [email protected]

二、TSX写组件注意事项

• 需要import component from react，组件类要extends该component

import React, { Component } from 'react'
import { AtInput, AtForm } from 'taro-ui'

export default class CollectionData extends Component {
}

正确显示

• 不可以通过import taro from @tarojs/taro，会提示
  “TypeError:Super expression must either be null or a function”

import React from 'react'
import Taro from '@tarojs/taro'
import { AtInput, AtForm } from 'taro-ui'

export default class CollectionData extends Taro.Component {
}

错误信息

• 申明了一个数组，但是没有指定元素类型，则需要在Component中指定类型为，否则会显示错误
  “类型“Readonly<{}>”上不存在属性‘xxxxxx’”

三、view样式设置宽高百分比无效的问题

• 在最顶层设置一个标签page的样式，指定宽高100%即可

page{
    height: 100%;
    width: 100%;
    .index {
        height: 100%;
        width: 100%;
        background: no-repeat;
        background-image: url("../../images/home-page/homepage.jpg");
        background-size: 100% 100%;
    }
}