Taro进阶
1、介绍
Taro 是一套遵循 React 语法规范的 多端开发 的解决方案
2、功能
使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、H5、React-Native等）运行的代码
3、安装脚手架
$ npm i -g tarojs@cli
$ yarn add tarojs@cli
4、创建项目
$ taro init myApp
5、开发期启动项目命令
$ npm run dev:h5 // web
$ npm run dev:webapp // 微信小程序
$ npm run dev:alipay // 支付宝小程序
$ npm run dev:swan // 百度小程序
$ npm run dev:rn // ReactNative
6、项目目录介绍
|— dist // 编译结果目录
|— config // 配置目录
|-- dev.js // 开发时配置
|-- index.js // 默认配置
|-- prod.js // 打包时配置
|— src // 源码目录
|-- pages // 页面文件目录
|-- index // index页面目录
|-- index.js // index页面逻辑
|-- index.css // index页面样式
|-- app.css // 项目总通用样式
|-- app.js // 项目入口文件
|— package.json // 依赖包管理文件
|— project.config.json // 专门配置小程序的配置文件
7、生命周期
state = {
name: ‘Jerry’,
age: 24
}
// -> 1.
componentWillMount () {
console.log(‘第一次渲染之前执行,只执行1次’)
}
// -> 2.render
// -> 3.
componentDidMount () {
console.log(‘第一次渲染之后执行,只执行1次’)
this.setState({
name: ‘Tom’
}, () => {
// -> 通过回调拿到的值才是最新的值
console.log(this.state.name + ‘,’ + this.state.age) // Tom,24
});
}
// -> 4.
componentWillUnmount () {
console.log(‘卸载时执行,只执行1次’)
}
componentWillUpdate () {
console.log(‘state数据将要更新’)
}
componentDidUpdate () {
console.log(‘state数据更新过后’)
}
// -> 下面两个生命周期是小程序需要的,但是兼容了h5和小程序
componentDidShow () {
console.log(‘页面显示时触发’)
}
componentDidHide () {
console.log(‘页面隐藏时触发’)
}
componentWillReceiveProps () {
console.log(‘会在父组件传递给子组件的参数发生改变时触发’)
}
// -> 每调用一次setState就会调用一次这个生命周期
// -> 那这个生命周期什么场景下应用呢？ - 例如：通过判断体如果name是Jerry的时候才能让更新state,否则不会更新
shouldComponentUpdate (nextProps, nextState) {
console.log(‘检查此次setState是否要进行render调用’)
// -> 这个生命周期会返回一个boolean值,如果返回false,则就不会执行render;返回true,则就会执行render
// -> 默认是返回true
if (nextState.name === ‘Tom’) { // -> 一般用来多次的setState调用时,用来提升render的性能
return true
} else {
return false
}
}
render () {
console.log(‘渲染render’)
return (
)
}
8、状态更新
Taro状态更新一定是异步的
React中的状态更新不一定是异步的,更新必须调用setState方法
9、Props
// -> index
test() {
console.log(‘父组件 -> 子组件 , 方法的传递’)
}
// 在这一定要注意为了兼容小程序和h5,在Taro中使用props传递事件必须以on或者dispatch开头,且是驼峰形式的
// -> Child
class Child extends Component {
componentWillReceiveProps (nextProps) {
// 在props进行数据更新的时候进行
// props过多的话就会被频繁更新,所以在这个函数里通常会进行一些判断
console.log(‘props属性变化了’)
console.log(nextProps)
}
cl() {
this.props.onTest()
}
render() {
let { name, obj } = this.props
return (
)
}
}
// -> 默认值
Child.defaultProps = {
obj: {key: [{name:“aaaa”}]}
}
10、路由功能
10.1 路由功能
在Taro中,路由功能是默认自带的,不需要开发者进行额外的路由配置
这里相当于通过小程序的配置适配了小程序和h5的路由问题
Taro默认根据配置路径生成了Route
我们只需要在入口文件的config配置中指定好pages,然后就可以在代码中通过Taro提供的API来跳转到目的页面
handleClick = () => {
Taro.navigateTo({
url:‘/pages/index/index’
})
}
render () {
return (
跳转
)
}
10.2 路由传参
我们可以通过在所有跳转的url后面添加查询字符串参数进行跳转传参,例如：id=2&type=test
这样的话,在跳转成功的目标页的生命周期(componentWillMount)方法里就能通过this.$router.params获取到传入的参数
11、静态资源引用
在Taro中可以像使用webpack那样自由的引用静态资源,而且不需要安装任何的loader
可以直接使用ES6的import语法来引用样式文件/Js文件/本地图片
12、条件渲染
短路表达式
值得注意的是小程序在短路表达式渲染时,会出现true或者false的短暂出现,所以如果是要适配小程序,最好使用三元表达式来进行判断
三元表达式
比较通用的一种方式,Jsx语法是不支持if操作符的,所以只能用三元表达式或者短路表达式
{/* 短路表达式 /}
{
!true ||
}
{/ 三元表达式 /}
{
true ?
}
13、列表渲染
{/ 列表渲染 /}
{
this.state.list.map((item) => {
return (
// 提醒你当循环一个数组时应该提供 keys。
// Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 Nerv/小程序 识别哪些元素发生了变化。
// 因此你应当给数组中的每一个元素赋予一个确定的标识
)
})
}
14、Children
export default class TestDialog extends Component {
render () {
return (
<Dialog header={
header
}
>I am dialog1
I am dialog2
)
}
}
export default class Dialog extends Component {
render () {
return (
{/ 不要对this.props.children进行任何操作*/}
{this.props.children}
{/* 需要多个展示的时候,可以自定义名称,就相当于小程序的slot */}
{this.props.header}
)
}
}
15、事件处理
采用驼峰命名
在Taro中阻止事件冒泡,必须明确的使用stopPropagation
向事件处理程序传递参数
任何组件的事件传递都要以on开头 【只要当JSX组件传入的参数是函数,参数名就必须以on开头】
以上都是为了适配小程序,如果只做h5端,则不需要关注
export default class Event extends Component {
state = {
username: ‘Jerry’
}
// -> 这里需要注意的是为了兼容小程序,不能使用箭头函数在事件中进行书写,最好是采用bind来改变this指向
// test = () => {
// console.log(‘test log’)
// console.log(this.state.username)
// }
test(e) {
console.log(e);
console.log(‘test log’);
// -> this指向
// console.log(this.state.username);
// -> 需要注意的是阻止事件冒泡只能用stopPropagation
// e.stopPropagation();
// -> 明文参数都在event对象的前面 Arguments(2) [“Jerry”, MouseEvent, callee: (…), Symbol(Symbol.iterator): ƒ]
console.log(arguments);
}
render () {
return (
<Button onClick={this.test.bind(this, this.state.username)}>testEvent
)
}
}
16、样式表
不能使用 #id选择器 | div span标签选择器 | span[class=‘name’] 属性选择器 | .a > .b
一般会使用 .类选择器,必须定义className,只对当前组件有效
建议使用flex布局
Taro实战
安装稳定版taro && 初始化项目
$ cnpm i @tarojs/cli@1.1.4 -g
$ taro init cnode
使用taro-ui组件库
$ cnpm i taro-ui --save