Taro-小程序

属性：

1、属性声明
//1.1
interface State {
    isBind: boolean;
}

//1.2
 extends AtComponent<Props, State>

2、 添加默认值
    state = {
        isBind: false
    };

3、对属性进行修改
         this.setState({
             isBind: true
         });

4、从属性中解除一个属性，下面进行使用
        const { isBind } = this.state;

备注：
{ } 代表从 state 解除一个属性，在局部进行使用

布局

.conversionRMBPriceBg {
    display: flex; //显示弹性布局
    flex-direction: row;//配轴方向：横轴<主轴>
    justify-content: start; //主轴内容 开始
    align-items: center;// 另一个轴
    height: 99px;//高度
    width: 100%;//宽度
    background-color: white;//背景颜色
    padding-left: 32px;//左间距
    padding-right: 32px;//右间距
}

.conversionRMBUnit {
    font-size: 28px;//文字大小
    color: #9C9C9C; //文字颜色
    margin-left: auto; //左边自由（会被右边拉过去）
}

log

        console.log('isBind', isBind);//直接跟着变量就行

字符串拼接

        'isBindisBshfsh{ hhah }efsdfind'// 通过{ }来拼变量

点击事件传参

 renderItem() {
        const { bankCardList } = this.state;
        if (bankCardList) {
            return bankCardList.map((model) => {
                const { icon,isCheck,name } = model;
                let bankName = model.name as string;
                // @ts-ignore
                return (
                    <View className="item" onClick={this.itemClick.bind(this,bankName)}>
                        <View className="itemView">
                            <Image className="bankIcon" src={require('../../../../src/assets/img/mine/brankIcon.png')}/>
                            <Text className="bankName">{name}</Text>
                            <Image className="selectIcon" hidden={!isCheck} src={require('../../../../src/assets/img/mine/rightCheck.png')}/>
                        </View>
                    </View>

            );
            });
        }
    }

核心代码： 
<View className="item" onClick={this.itemClick.bind(this,bankName)}>


接收事件方法：
 //银行列表点击item事件
    itemClick = (bankName) => {
        console.log('bankName = ',bankName);
    }

⚠️⚠️⚠️遇到小问题整理：
1、在5s模拟器上显示不出来线1px；
原因设计图上是1px，但因为屏幕缩放的问题，在5s上就会把1px像素的高度变成小于1px，造成无法显示。这个时候线可以使用 border-top属性来替换<VIew></ View>

    border-top: 1px solid #E5E5E5;

2、<VIew><Text>区别：<VIew>是容器组件，<Text>是文本组件

3、多层嵌套列表数据无法显示全（假数据-确保数据没问题，但在多层嵌套的时候，页面不能全部渲染）
解决办法：对里面多层数据循环，进行方法抽出

 正确写法：将this.renderItem（array）抽出来
  renderItem(subArr: Array<any>) {
        return subArr.map((item: any, index) => {
            return (
                <View key={index.toString()}>
                    <WithdrawalRecordListItem record={item} />
                </View>
            );
        });
    }

    render() {
        let { withdrawalRecordList } = this.props;
        return (
            <View className="group">
                {withdrawalRecordList.map((dateItem, index) => {
                    let date: string = dateItem['date'] as string;
                    let subArr: Array<any> = dateItem['sub'] as Array<any>;

                    return (
                        <View key={index.toString()}>
                            {date && <View className="date-header">{date}</View>}
                            <View>{this.renderItem(subArr)}</View>
                        </View>
                    );
                })}
            </View>
        );
    }

4、W家项目中路由传值，因为项目封装的原因，写法为：

A界面

 //跳转绑定银行卡界面
    blindBankCard() {
        const { bankBelongs } = this.state;
        //  跳转 index页面
        this.navigation.navigateTo(this.routers.bindBankCard, {accountBank: bankBelongs}, this);
    }
备注：accountBank为定义的key，后面解构的时候会用到

B界面
 componentDidMount() {
        //路由传参
        const {preload}:any = this.$router;
        const{accountBank} = preload //解构
        this.setState({
            accountBank: accountBank
        })
    }

路由跳转封装代码

箭头函数 和 bind函数

// 箭头函数
<View className="item" onClick={() =>this.itemClick(bankName, bankCode, icon)}>

// bind写法
 <View className="item" onClick={this.itemClick.bind(this, model)}>

对应函数实现