Taro
- 引用相對路徑圖片
直接將相對路徑放在src屬性中,不起作用族淮,
需要先import進來辫红,最好把圖片放到服務(wù)器上凭涂,然后直接寫http路徑
錯誤寫法:
<Image src="./images/front.png" />
正確寫法:
import namedPng from './images/front.png'
...
<Image src={namedPng} />
- 不支持render中,使用函數(shù)多條件渲染
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> 默認(rèn)顯示的值</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> 默認(rèn)顯示的值</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 轉(zhuǎn)換成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中寫回調(diào)函數(shù)澎胡,但是無法傳遞消息到父組件,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'
- 組件屬性傳遞數(shù)據(jù),不能超過1M锈嫩。比如base64字符串受楼。
<Image src={frontBase64File} className="background" />
大小限制