jsx中不能使用匿名函數(shù), 需要bind
<View onClick={this.handleClick}></View> // 正確
<View onClick={()=>this.handleClick(params)}></View> // 錯(cuò)誤
<View onClick={this.handleClick.bind(this, params)}></View> // 正確
Taro中的跳轉(zhuǎn)事件與生命周期的關(guān)系
navigateTo會(huì)進(jìn)componentDidhiderelaunch,redirect,navigateBack以及物理返回 會(huì)進(jìn)componentWillUnmount
應(yīng)用：如果要監(jiān)聽(tīng)taro中的返回事件呈驶，則可以設(shè)置一個(gè)state，在所有非返回的頁(yè)面跳轉(zhuǎn)事件中改變state的值袖瞻，然后在componentwillUnmount中判斷state的值是否等于初始狀態(tài)聋迎，如果等于則是返回事件，否則是其他的跳轉(zhuǎn)砌庄。
不能在render函數(shù)中定義純函數(shù)組件奕枢，否則打包為小程序的時(shí)候會(huì)報(bào)錯(cuò)
taro Cannot read property 'isCallExpression' of null
解決：去除render return之前定義的純函數(shù)組件 使用class組件代替
文本溢出顯示省略號(hào)樣式不不生效
// 多行截取
@mixin textOrient($line) {
display: -webkit-box;
// 需要加上這一句autoprefixer的忽略規(guī)則 否則這一行樣式加不上 導(dǎo)致無(wú)法展示省略號(hào)
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
}
移動(dòng)滑動(dòng)不跟手的問(wèn)題
page{ // 全局設(shè)置小程序的樣式
-webkit-overflow-scrolling: touch;
}
#app { // 全局設(shè)置網(wǎng)頁(yè)樣式
height: auto;
-webkit-overflow-scrolling: touch;
}
錯(cuò)誤圖片處理
解決方案：每一個(gè)Image標(biāo)簽傳入一個(gè)唯一key缝彬，使用onError事件監(jiān)聽(tīng)哺眯，如果進(jìn)了就設(shè)置對(duì)應(yīng)的state為對(duì)應(yīng)的圖片路徑，用傳入的key來(lái)作為state的鍵以保證唯一性一疯。
下面是封裝的組件
import Taro, { Component } from '@tarojs/taro';
import { Image } from '@tarojs/components';
import defaultStoreIcon from './../assets/images/common/headimg.jpg'
import defaultGoodsIcon from './../assets/images/common/icon_default.png'
import defaultPersonIcon from './../assets/images/common/person_zhanweitu@2x.png'
/**
* 組件需要的Props定義
*/
interface IProps {
className: string;
src: string;
type: string;
key: string;
}
/**
* 分割線(xiàn)
*/
/**
* api同taro Image 增加type和key屬性 用于處理圖片路徑錯(cuò)誤
* @type 圖片類(lèi)型 String store-店鋪 person-用戶(hù) goods-商品
* @key 圖片key值夺姑，需要保證頁(yè)面唯一
* @src 圖片路徑 同Image src
* @className 圖片類(lèi)名 同Image className
*/
const iconEnum = {
'store': defaultStoreIcon,
'person': defaultPersonIcon,
'goods': defaultGoodsIcon
}
export default class BackTop extends Component<IProps> {
state = {};
// 錯(cuò)誤時(shí)間監(jiān)聽(tīng) 設(shè)置唯一state
handleError = key => {
const { type } = this.props
this.setState({
[`imgError${key}`]: iconEnum[type] || defaultGoodsIcon // 如果未傳入type則顯示默認(rèn)的商品圖片
})
}
render() {
const { className, src, type, key } = this.props
return (
<Image {...this.props}
src={this.state[`imgError${key}`] || src}
onError={this.handleError.bind(this, key)}
/>
);
}
}
持續(xù)踩坑盏浙，持續(xù)更新中...
