Taro

一、阿里矢量图标引

1、下载：
注：添加至项目进行下载。
2、引入：
1）把下载好的放入到src——> assets（静态资源）里，然后创建iconfont文件夹，把下载的图标放入文件夹中；
2）在app.js中引入：

/**
 * 1、引入阿里矢量图标
 * 在阿里矢量图标——>下载至项目——>下载至本地——>引入下载好的文件夹里的 iconfont.css
 * 在pages——》index——》index.js里面进行了 使用案例
 */
import "./assets/iconfont/iconfont.css";

3）使用：

	{/* 2、使用阿里矢量图标,这个在下载的 index.html里面查看 */}
	<View className="iconfont icon-lingshouguanli"></View>

二，循环遍历

1、函数式页面里或组件里的使用

import Taro, { useState, useEffect } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
function Index() {
    const arr = [
        { text: "wsaSasADa" },
        { text: "wsaSasADa" },
        { text: "wsaSasADa" },
        { text: "wsaSasADa" },
        { text: "wsaSasADa" },
        { text: "wsaSasADa" },
        { text: "wsaSasADa" }
    ];
	//第一种遍历方式
    let newdemo = arr.map((item, index) => {
        return (
            <View key={index}>
                {item.text}
            </View>
        )
    })
    return (<View>
        {newdemo}
        {/* 第二种遍历方式 */}
        {
            arr.map((item, index) => {
                return (
                    <View key={index}>
                        {item.text}
                    </View>
                )
            })
        }
    </View>
  
    )
}
export default Index

2.类组件遍历

import Taro,{Component}from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
    state = {
		arrList:[
			{ text: "wsaSasADa" },
        	{ text: "wsaSasADa" },
        	{ text: "wsaSasADa" },
        	{ text: "wsaSasADa" },
        	{ text: "wsaSasADa" },
        	{ text: "wsaSasADa" },
        	{ text: "wsaSasADa" }
		]
	}
    render() {
        let newdemo=this.state.arrList.map((item,index)=>{
            return (
                <View>
                    {index + 1}、
                    {
                        item.text.toLowerCase()
                    }
                </View>
            )
        })
        return (
            <View>
                {
                    this.state.arrList.map((item,idex)=>{
                        return (
                            <View>
                                {item.text.toUpperCase()}
                            </View>
                        )
                    })
                }
                {
                    newdemo
                }
            </View>
        )
    }
}

三、传值

1、正向传值

1）在xx页面中传参

//下面是Hook 页面
import Taro, { useState, useEffect } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import List from "./components/Index"
function Index() {
    const str = "wyyyyyy";
    return (
	    <View>
	    	{/*1.传值*/}
	        <List arrList={str}></List>
	    </View>
   
    )

}

export default Index

2）在组件中接收

import Taro,{Component}from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
	//2.接收
    static propTypes = {
        arrList:""
    }
    render() {
        return (
            <View>
           		//3.使用 
                {this.props.arrList}
            </View>
        )、‘ ``
## 2.逆向传值
1）在组件中传值

```javascript
import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

export default class Index extends Component {

    // 1.在子组件中创建数据
    constructor(props) {
        super(props);
        this.state = {
            text: "我是子组件的数据"
        }
    }
    render() {
        return (
            <View>
                 <p>子组件</p>
                {/* 2.给子son这个函数 绑定一个参数 ;this.state.text是实参*/}
                {/* 接受父组件传递过来的props函数 并且给他绑定this与参数 */}
                <Button onClick={this.props.son.bind(this,this.state.text)}>点我把数据传给父</Button>
            </View>
        )
    }
}

2）在xx页面中接受

import Taro,{Component}from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import List from "./components/Index"
export default class Index extends Component {
    state={
        text:""
    }
    // 4.这就需要一个形参(创建函数接受子组件的逆向传值)
    father=(texts)=>{
        this.setState({
            text:texts
        })
        console.log(texts);
    }
    render() {
       
        return (
            
            <View>
               <List son={this.father}/>
               {this.state.text}
            </View>
        )
    }
}