jsx中不能使用匿名函数, 需要bind
<View onClick={this.handleClick}></View> // 正确
<View onClick={()=>this.handleClick(params)}></View> // 错误
<View onClick={this.handleClick.bind(this, params)}></View> // 正确
Taro中的跳转事件与生命周期的关系
navigateTo会进componentDidhiderelaunch,redirect,navigateBack以及物理返回 会进componentWillUnmount
应用：如果要监听taro中的返回事件，则可以设置一个state，在所有非返回的页面跳转事件中改变state的值，然后在componentwillUnmount中判断state的值是否等于初始状态，如果等于则是返回事件，否则是其他的跳转。
不能在render函数中定义纯函数组件，否则打包为小程序的时候会报错
taro Cannot read property 'isCallExpression' of null
解决：去除render return之前定义的纯函数组件 使用class组件代替
文本溢出显示省略号样式不不生效
// 多行截取
@mixin textOrient($line) {
display: -webkit-box;
// 需要加上这一句autoprefixer的忽略规则 否则这一行样式加不上 导致无法展示省略号
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
}
移动滑动不跟手的问题
page{ // 全局设置小程序的样式
-webkit-overflow-scrolling: touch;
}
#app { // 全局设置网页样式
height: auto;
-webkit-overflow-scrolling: touch;
}
错误图片处理
解决方案：每一个Image标签传入一个唯一key，使用onError事件监听，如果进了就设置对应的state为对应的图片路径，用传入的key来作为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;
}
/**
* 分割线
*/
/**
* api同taro Image 增加type和key属性 用于处理图片路径错误
* @type 图片类型 String store-店铺 person-用户 goods-商品
* @key 图片key值，需要保证页面唯一
* @src 图片路径 同Image src
* @className 图片类名 同Image className
*/
const iconEnum = {
'store': defaultStoreIcon,
'person': defaultPersonIcon,
'goods': defaultGoodsIcon
}
export default class BackTop extends Component<IProps> {
state = {};
// 错误时间监听 设置唯一state
handleError = key => {
const { type } = this.props
this.setState({
[`imgError${key}`]: iconEnum[type] || defaultGoodsIcon // 如果未传入type则显示默认的商品图片
})
}
render() {
const { className, src, type, key } = this.props
return (
<Image {...this.props}
src={this.state[`imgError${key}`] || src}
onError={this.handleError.bind(this, key)}
/>
);
}
}
持续踩坑，持续更新中...
