注
:
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
文件夹,把它放进微信开发者工具;
②在小程序中不用引入标签,他会将标签自动解析,但是H5要引用进来 才可以使用
//所以需要把标签 当成组件化的引入进来
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、初步认识