taro 微信小程序框架

前言
taro是前端 微信小程序开发的一个框架 使用React语法 可以提供多端使用。
当然啦 ，你需要使用taro提供的组件。

安装

yarn add global @tarojs/cli

项目创建

taro init 项目名

项目运行 脚本

yarn dev:h5  rn  weapp 等等

项目运行会生成一个dist目录 打个比方 你可以通过下载微信开发者工具，
来查看项目长啥样子。
但是注意 ，你开发和维护 还是需要在src目录下进行的 ，切记切记切记。

组件编写 传值
组件编写跟React大致相同 就不举例了
传值
父-子 属性传值

//传递
<Child userName={userName}></Child>
//接收
function Child(props){
	return(
		<View><Text>{props.userName}</Text></View>
	)
}

路由配置 和 跳转
配置 就使用小程序的"pages/index/index"
跳转 使用Taro.navigationTo({url:"xxx"})

RedirectTo有什么区别
不会返回上个页面

路由传参 和 接收

//传参
Taro.navigateTo({
	url : "pages/index/index?xxx=" + xxx
})
//接收
useEffect(()=>{
	this.$router.params.xxx
})

你可以在useEffect生命周期里 给第二个参数为[]
然后 通过 xxxx 请求数据 完成渲染
也可以直接通过结构方法 完成静态资源的展示

图片引入
两种方法： 前提是都需要引入Image组件

// 第一张方法  import
import abc from "../../static/img/abc.jpc"
// 第二种方法  require
Image src={require('../../static/abc.jpg')}

列表渲染
标识key属性 有助于性能优化 针对变化去渲染 而不是整体

//定义列表data
//循环列表
{
	data.map((item,index)=>{
		return(
			<View key={index}>{item.name}</View>
		)
	})
}

网络数据请求

Taro.request 同小程序 基本一致

Taro.request({
	url : "https://apibolg.syx.com....."
}).then(res=>{
	console.log(res.data)
	// 可以useState 的第二个参数 设置值 用于遍历
})