taro框架是开发小程序的一种基于React语法的框架，是京东推出的。我之前在项目中使用过，现在记录一下。
taro安装并创建新项目后，目录如下：
其中，src放的是源码，其他的是一些配置文件。
src中有放置图片、组件、页面、服务、模板和工具的文件夹。
其中，app.js的作用相当于小程序原生的app.json，对全局进行配置。
app.js的示例代码如下：
import Taro, { Component } from ‘@tarojs/taro‘
import ‘@tarojs/async-await‘
import Index from ‘./pages/index‘
import ‘./app.less‘
import ‘taro-ui/dist/style/index.scss‘
// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== ‘production‘ && process.env.TARO_ENV === ‘h5‘) {
// require(‘nerv-devtools‘)
// }
class App extends Component {
config = {
pages: [
‘pages/index/index‘,
‘pages/myInfo/myInfo‘,
‘pages/queryScanCode/queryScanCode‘,
‘pages/bindModel/bindModel‘,
],
window: {
backgroundTextStyle: ‘dark‘,
navigationBarBackgroundColor: ‘#fff‘,
navigationBarTitleText: ‘WeChat‘,
navigationBarTextStyle: ‘black‘
},
tabBar:{
color: ‘#626567‘,
selectedColor: ‘#6e9eea‘,
backgroundColor: ‘#FBFBFB‘,
borderStyle: ‘white‘,
list:[{
pagePath: ‘pages/queryScanCode/queryScanCode‘,
text: ‘设备‘,
iconPath: "assets/img/icon_query@2x.png",
selectedIconPath: "assets/img/icon_query_sel@2x.png",
},
{
pagePath: ‘pages/bindEquipment/bindEquipment‘,
text: ‘绑定‘,
iconPath: "assets/img/icon_bound@2x.png",
selectedIconPath: "assets/img/icon_bound_sel@2x.png",
},
{
pagePath: ‘pages/myInfo/myInfo‘,
text: ‘我的‘,
iconPath: "assets/img/icon_person@2x.png",
selectedIconPath: "assets/img/icon_person_sel@2x.png"
}]
},
networkTimeout: {
"request": 60000
},
}
componentDidMount () {}
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
// 在 App 类中的 render() 函数没有实际作用
// 请勿修改此函数
render () {
return (
<Index />
)
}
}
Taro.render(<App />, document.getElementById(‘app‘))
由以上代码，我们可以看出：
1.taro的代码风格跟React很像，如使用React的组件生命周期函数、使用render进行渲染等。
2.该页面渲染Index组件。在taro中所有的页面和组件都可以看成是组件，但是页面需要在全局配置时配置好路由以区别。
在pages文件夹中，含有各个页面的文件夹，各个页面的文件夹都含有一个js和less文件。
js负责逻辑和页面的渲染，less负责样式。
例如：template.js有一个template.less文件来负责样式。
import Taro, { Component } from ‘@tarojs/taro‘
import { View, Text, Image} from ‘@tarojs/components‘
import ‘./template.less‘
class Template extends Component {
constructor(){
super(...arguments)
this.state = {
}
}
render () {
return (
<View className=‘template‘>
<Text>Template</Text>
</View>
)
}
}
export default Template
注：
1.组件名需要首字母大写。
2.React中的state相当于小程序原生的data。
3.taro主要是用<View>和<Text>来构建页面。