使用taro框架开发小程序
taro框架是开发小程序的一种基于React语法的框架，是京东推出的。我之前在项目中使用过，现在记录一下。
taro的项目目录如下：
其中，src放的是源码，config放的是部署配置文件。
src中有放置utils（公共函数等工具）、template（模板）、pages（页面）、components（组件）、assets（图片资源）的文件夹。
其中，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负责样式。
代码示例1：template.js
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>来构建页面。
代码示例2：addCut.js
import Taro, { Component } from \'@tarojs/taro\'
import { View, Text, Image} from \'@tarojs/components\'
import \'./addCut.less\'
import { getEvent, getFoodCount, setFoodCount } from \'../../utils/common\'
const event = getEvent()
class AddCut extends Component {
constructor(){
super(...arguments)
this.state = {
num:0
}
}
componentDidMount(){
let num = getFoodCount(this.props.food)
this.setState({num:num})
//监听
event.on(\'changeCat\',()=>{
this.setState({num:getFoodCount(this.props.food)})
})
}
add(){
setFoodCount(this.props.food,this.state.num,\'add\',()=>{
this.setState({num:getFoodCount(this.props.food)},()=>{
event.emit(\'addCut\')
event.emit(\'clickAgain\')
})
})
}
sub(){
if(this.state.num > 0){
setFoodCount(this.props.food,this.state.num,\'sub\',()=>{
this.setState({num:getFoodCount(this.props.food)})
event.emit(\'addCut\')
event.emit(\'clickAgain\')
})
}else{
console.error(\'减少菜品出现异常\')
}
}
render () {
let { num } = this.state
return (
<View className=\'addCut\'>
{/* 两种不同的绑定事件方式 */}
<Text className={\'op_img \'+(num>0?\'\':\'hide\')} onClick={this.sub.bind(this)}>-</Text>
<Text className={\'num \'+(num>0?\'\':\'hide\')}>{num}</Text>
<Text className=\'op_img\' onClick={(e)=>this.add(e)}>+</Text>
</View>
)
}
}
export default AddCut
由以上代码可得：
1.可以通过import导入公共函数。
2.constructor可以初始化组件。
3.setState需要时间，之后的执行语句需要写在回调函数中。
4.页面上触发函数调用时需要bind(this)或是使用(e)=>this.xxx(e)的语法。
代码示例3：common.js
import Taro from \'@tarojs/taro\' import Event from \'./event\' const key = \'meituan\' //公共函数 export function getFoodCount(food){ //读缓存 let store = Taro.getStorageSync(key) if(store&&store[food.id]){ return store[food.id].num }else{ return 0 } } export function setFoodCount(food,num,type,cb){ let store = Taro.getStorageSync(key) //给store赋空对象初值 if(!store) store = {} if(store&&store[food.id]){ if(type==\'sub\'){ if(num==1){ //从缓存中删除数据结构 delete store[food.id] }else{ store[food.id].num = num - 1; } }else{ store[food.id].num = num + 1; } }else{ //合并属性 store[food.id] = { num:1, ...food } } //设置缓存 Taro.setStorageSync(key,store) cb && cb() } export function getAllFoodInfo(){ let allNum = 0 let allPrice = 0 let store = Taro.getStorageSync(key) if(store){ //遍历对象的key Object.keys(store).map((key)=>{ if(store[key]){ allPrice += store[key].price * store[key].num allNum += store[key].num } }) } return { allNum, allPrice } } const e = new Event() //必须为单例模式 export function getEvent(){ return e }
由以上代码可得：
1.公共函数使用export进行导出。
2.小程序缓存用Taro.getStorageSync和Taro.setStorageSync来实现。
更多用法可以查看taro示例项目https://github.com/LuoYiHao/taroDemo。
版权声明：本文为luoyihao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。