jsx中不能使用匿名函數(shù), 需要bind

<View onClick={this.handleClick}></View>  // 正確
<View onClick={()=>this.handleClick(params)}></View>  // 錯誤
<View onClick={this.handleClick.bind(this, params)}></View>  // 正確

Taro中的跳轉(zhuǎn)事件與生命周期的關(guān)系

• navigateTo 會進(jìn) componentDidhide

• relaunch, redirect, navigateBack 以及物理返回 會進(jìn) componentWillUnmount

應(yīng)用：如果要監(jiān)聽taro中的返回事件，則可以設(shè)置一個state，在所有非返回的頁面跳轉(zhuǎn)事件中改變state的值，然后在componentwillUnmount中判斷state的值是否等于初始狀態(tài)，如果等于則是返回事件，否則是其他的跳轉(zhuǎn)。

不能在render函數(shù)中定義純函數(shù)組件，否則打包為小程序的時候會報錯

taro Cannot read property 'isCallExpression' of null

解決：去除render return之前定義的純函數(shù)組件 使用class組件代替

文本溢出顯示省略號樣式不不生效

// 多行截取
@mixin textOrient($line) {
    display: -webkit-box;

    // 需要加上這一句autoprefixer的忽略規(guī)則 否則這一行樣式加不上 導(dǎo)致無法展示省略號
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;

    -webkit-line-clamp: $line;
    overflow: hidden;
}

移動滑動不跟手的問題

page{    // 全局設(shè)置小程序的樣式
    -webkit-overflow-scrolling: touch;
}
#app {   // 全局設(shè)置網(wǎng)頁樣式
    height: auto;
    -webkit-overflow-scrolling: touch;
}

錯誤圖片處理

解決方案：每一個Image標(biāo)簽傳入一個唯一key，使用onError事件監(jiān)聽，如果進(jìn)了就設(shè)置對應(yīng)的state為對應(yīng)的圖片路徑，用傳入的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 = {};
  
    // 錯誤時間監(jiān)聽 設(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ù)更新中...