推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
Taro实践 - TOPLIFE小程序 开发体验
发布时间:2020-10-15前阵子，来自我们凹凸实验室的遵循React 语法规范的 多端开发方案 - Taro 终于对外开源了，欢迎围观 star （先打波广告）。作为第一批使用了 Taro 开发的TOPLIFE小程序的开发人员之一，自然是走了不少弯路，躺了不少坑，也帮忙找过不少bug。现在项目总算是上线了，那么，也是时候给大家总结分享下了。
与WePY比较当初开发TOPLIFE第一期的时候，用的其实是 WePY （那时Taro还没有开发完成），然后在第二期才全面转换为用 Taro 开发。作为两个小程序开发框架都使用过，并应用在生产环境里的人，自然是要比较一下两者的异同点。
相同点组件化开发
npm包支持
ES6+特性支持，Promise， Async Functions 等
CSS预编译器支持，Sass/Stylus/PostCSS等
支持使用Redux进行状态管理
…..
相同的地方也不用多说什么，都2018年了，这些特性的支持都是为了让小程序开发变得更现代，更工程化，重点是区别之处。
不同点开发风格
实现原理
WePY支持slot，Taro暂不支持直接渲染children
开发风格最大的不同之处，自然就是开发风格上的差异， WePY 使用的是类Vue开发风格， Taro 使用的是类React 开发风格，可以说开发体验上还是会有较大的区别。贴一下官方的demo简单阐述下。
WePY demo <style lang="less"> @color: #4D926F; .userinfo { color: @color; } </style> <template lang="pug"> view(class='container') view(class='userinfo' @tap='tap') mycom(:prop.sync='myprop' @fn.user='myevent') text {{now}} </template> <script> import wepy from 'wepy'; import mycom from '../components/mycom'; export default class Index extends wepy.page { components = { mycom }; data = { myprop: {} }; computed = { now () { return new Date().getTime(); } }; async onLoad() { await sleep(3); console.log('Hello World'); } sleep(time) { return new Promise((resolve, reject) => setTimeout(resolve, time * 1000)); } } </script> Taro demo import Taro, { Component } from '@tarojs/taro' import { View, Button } from '@tarojs/components' export default class Index extends Component { constructor () { super(...arguments) this.state = { title: '首页', list: [1, 2, 3] } } componentWillMount () {} componentDidMount () {} componentWillUpdate (nextProps, nextState) {} componentDidUpdate (prevProps, prevState) {} shouldComponentUpdate (nextProps, nextState) { return true } add = (e) => { // dosth } render () { return ( <View className='index'> <View className='title'>{this.state.title}</View> <View className='content'> {this.state.list.map(item => { return ( <View className='item'>{item}</View> ) })} <Button className='add' onClick={this.add}>添加</Button> </View> </View> ) } }可以见到在 WePY 里， css 、 template 、 script 都放在一个wpy文件里， template 还支持多种模板引擎语法，然后支持 computed 、 watcher 等属性，这些都是典型的Vue风格。
而在 Taro 里，就是彻头彻尾的 React 风格，包括 constructor ， componentWillMount 、 componentDidMount 等各种 React 的生命周期函数，还有 return 里返回的 jsx ，熟悉 React 的人上手起来可以说是非常快了。
除此之外还有一些细微的差异之处：
WePY 里的模板，或者说是 wxml ，用的都是小程序里原生的组件，就是小程序文档里的各种组件；而Taro里使用的每个组件，都需要从 @tarojs/components 里引入，包括 View ， Text 等基础组件（这种做其实是为了转换多端做准备）
事件处理上
Taro 中，是用 click 事件代替 tap 事件
WePY使用的是简写的写法@+事件；而Taro则是on+事件名称
阻止冒泡上WePY用的是@+事件.stop；而Taro则是要显式地使用 e.stopPropagation()来阻止冒泡
事件传参WePY可以直接在函数后面传参，如 @tap="click({{index}})" ；而Taro则是使用 bind 传参，如 onClick={this.handleClick.bind(null, params)}
WePY使用的是小程序原生的生命周期，并且组件有 page 和 component 的区分；Taro 则是自己实现了类似React 的生命周期，而且没有 page 和 component 的区分，都是 component
