一、初识Taro
1.1 优点
小程序中无法使用
npm
来进行第三方库的管理,无法使用一些比较新的ES
规范等等,针对小程序端的开发弊端,Taro
具有以下的优秀特性
- 支持使用
npm/yarn
安装管理第三方依赖。 - 支持使用
ES7/ES8
甚至更加新的ES
规范,一切都可自行配置 - 支持使用
CSS
预编译器,例如Sass
等 - 支持使用
Redux
进行状态管理 - 小程序
API
优化,异步API Promise
化等
1.2 快速开始
微信小程序编译预览模式
# npm script |
H5 编译预览模式
# npm script |
RN 编译预览模式
# npm script |
目录结构
├── dist 编译结果目录 |
进入项目目录开始开发,可以选择小程序预览模式,或者h5预览模式,若使用微信小程序预览模式,则需要自行下载并打开微信开发者工具,选择预览项目根目录
注意
- 需要设置关闭
ES6
转ES5
功能,开启可能报错 - 需要设置关闭上传代码时样式自动补全,开启可能报错
- 需要设置关闭代码压缩上传,开启可能报错
1.3 语法风格
Taro 的语法规则基于
React
规范,它采用与React
一致的组件化思想,组件生命周期与React
保持一致,同时在书写体验上也尽量与React
类似,支持使用JSX
语法
一个普通的入口文件示例如下
app.js
import Taro, { Component } from '@tarojs/taro' |
二、生命周期函数
App.js生命周期
生命周期方法 | 作用 | 说明 |
---|---|---|
componentWillMount |
程序被载入 | 对应微信小程序onLaunch |
componentDidMount |
程序被载入 | 对应微信小程序onLaunch ,在componentWillMount 之后执行 |
componentDidShow |
程序展示出来 | 对应微信小程序onShow |
componentDidHide |
程序被隐藏 | 对应微信小程序onHide |
不过当然也包含
componentWillUnmout
和componentWillReceiveProps
等react
原始生命周期函数,用来编写自定义组件
页面生命周期
生命周期方法 | 作用 | 说明 |
---|---|---|
componentWillMount |
页面被载入 | 在微信小程序中这一生命周期方法对应 onLoad |
componentDidMount |
页面渲染完成 | 在微信小程序中这一生命周期方法对应 onReady |
shouldComponentUpdate |
页面是否需要更新 | |
componentWillUpdate |
页面即将更新 | |
componentDidUpdate |
页面更新完毕 | |
componentWillUnmount |
页面退出 | 在微信小程序中这一生命周期方法对应 onUnload |
componentDidShow |
页面展示出来 | 在微信小程序中这一生命周期方法对应onShow ,在H5 中同样实现 |
componentDidHide |
页面被隐藏 | 在微信小程序中这一生命周期方法对应 onHide ,在H5 中同样实现 |
微信小程序中
onLoad
通常带有一个参数options
,在Taro
中你可以在所有生命周期方法中通过this.$router.params
访问到,在其他端也适用
三、路由
我们只需要在入口文件的
config
配置中指定好pages
,然后就可以在代码中通过Taro
提供的 API 来跳转到目的页面,例如
// 跳转到目的页面,打开新页面 |
传参
我们可以通过在所有跳转的 url 后面添加查询字符串参数进行跳转传参,例如
// 传入参数 id=2&type=test |
这样的话,在跳转成功的目标页的生命周期方法里就能通过
this.$router.params
获取到传入的参数,例如上述跳转,在目标页的componentWillMount
生命周期里获取入参
class C extends Taro.Component { |
四、专属的方法
在小程序中,页面还有在一些专属的方法成员,如下
方法 | 作用 |
---|---|
onPullDownRefresh |
页面相关事件处理函数–监听用户下拉动作 |
onReachBottom |
页面上拉触底事件的处理函数 |
onShareAppMessage |
用户点击右上角转发 |
onPageScroll |
页面滚动触发事件的处理函数 |
onTabItemTap |
当前是 tab 页时,点击 tab 时触发 |
以上成员方案在
Taro
的页面中同样可以使用,书写同名方法即可,不过需要注意的,目前暂时只有微信小程序端支持这些方法,编译到H5端后这些方法均会失效