Taro基础（基于React）

注： Taro官网：https://taro.aotu.io

一、Taro框架特点

1、遵循react的语法规范，可以用jsx语法规范开发小程序的应用；
2、支持组件化开发；
3、支持TypeScript语言开发；
4、很强的开发体验，开发流程自动化，顺畅、快捷。

二、Taro目前支持的生态应用

1、微信小程序
2、百度小程序
3、支付宝小程序
4、Web(H5)
5、ReactNative（具有原生的体验）
6、QQ 轻应用

三、使用

1、安装

1）全局安装
安装最新版本：npm install -g @tarojs/cli
安装指定版本：npm install -g @tarojs/cli:版本号

查看版本： taro -v

注:
2)创建项目
taro init 项目名

Taro项目目录：

3）运行
npm run dev:h5                WEB
npm run dev:weapp         微信小程序
注：
①编译完成，他会多一个dist文件夹，把它放进微信开发者工具；
②在小程序中不用引入标签，他会将标签自动解析，但是Ｈ５要引用进来　才可以使用

//所以需要把标签　　当成组件化的引入进来
import {View,Button,Image,Text,Input,Textarea} from "@tarojs/components";

npm run dev:alipay          支付宝小程序
npm run dev:swan           百度小程序
npm run dev:rn                ReactNative

2、修改H5端口

1）在conflg——>index.js里面修改

3、编译微信小程序

注：编译完成之后，会多一个 dist 文件，把dist导入到微信开发者工具里面。
注：①对src——>index.jsx进行解读

//引入Taro，Component 
import Taro, { Component } from '@tarojs/taro';// 引入首页
import Index from './pages/index';
import './app.less';
// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
	//require('nerv-devtools')
// }
/** * 通过类的方式  去定义组件 * 函数数组件中，不能直接写 下面的钩子函数 */
class App extends Component {
    componentDidMount() { }
    componentDidShow() { }
    componentDidHide() { }
    componentDidCatchError() { }
    config = {        
    	pages: [            
    		'pages/index/index'        
    	],        
    	//这个配置相当于 app.json         
    	window: {            
    		backgroundTextStyle: 'light',            
    		navigationBarBackgroundColor: '#fff',            
    		navigationBarTitleText: 'WeChat',            
    		navigationBarTextStyle: 'black'        
    	}    
    }
    // 在 App 类中的 render() 函数没有实际作用    
    // 请勿修改此函数    
    render() {//render是做一个初始化虚拟dome的 渲染操作        
    	return (//返回一个Index页面            
    		<Index />        
    	)    
    }
}
//这块做一个app的挂载点，就把这个单页面 挂载到index.html里面去（找到 在挂载上去）
Taro.render(<App />, document.getElementById('app'))

②对初始化的src——>pages——>index——>index.jsx进行解读

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
export default class Index extends Component {
    //状态的书写
    //第一种
    /*
    constructor(){
        super();
        this.state = {
            name:"小明"
        }
    }
    */
    state = {
        name:"李四"
    }
    componentWillMount() {
    	console.log("组件挂载之前");//1、先走
    }
    componentDidMount() {
    	console.log("组件挂载完毕");//3、最后走
    }
    componentWillUnmount() {
    	console.log("组件在这进行销毁，组件切换，或者调用组件里面的 某些api，这个 组件在这已经销毁");
    }
    /**
    *可以 在下面这两个组件里面 实现一些组件显示隐藏 之后，要处理的逻辑
    */
    componentDidShow() {
    	console.log("组件渲染完成之后 执行");//可以 在下面这两个组件里面 实现一些组件显示隐藏 之后，要处理的逻辑
    }        
    componentDidHide() {
    	console.log("组件隐藏之后 执行");
    }    
    //这块配置标题    
    config = {        
    	navigationBarTitleText: '首页'    
    }
    render() {
    	//2、第二部走        
    	console.log("第二步走它，在这就可以获取它的真实dome结构");
    	return (            
    		<View className='index'>                
    			{/* 数据状态的 使用 */}
                 方法一：{name} 
                 方法二：{this.state.name}     
    		</View>        
    	)    
    }
}

四、使用Taro书写小程序

1、初步认识