Taro
- 引用相对路径图片
直接将相对路径放在src属性中，不起作用，
需要先import进来，最好把图片放到服务器上，然后直接写http路径
错误写法：
<Image src="./images/front.png" />
正确写法:
import namedPng from './images/front.png'
...
<Image src={namedPng} />
- 不支持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>
)
}
- 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" />
- 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指向有问题。
- 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'
- 组件属性传递数据，不能超过1M。比如base64字符串。
<Image src={frontBase64File} className="background" />
大小限制
