Taro进阶

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 (



{this.state.name}

{this.state.age}



)

}
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 (



{name}

{obj.key[0].name}



)

}

}

​

// -> 默认值

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 (



Test

跳转



)

}
10.2 路由传参
我们可以通过在所有跳转的url后面添加查询字符串参数进行跳转传参,例如：id=2&type=test
这样的话,在跳转成功的目标页的生命周期(componentWillMount)方法里就能通过this.$router.params获取到传入的参数
11、静态资源引用
在Taro中可以像使用webpack那样自由的引用静态资源,而且不需要安装任何的loader
可以直接使用ES6的import语法来引用样式文件/Js文件/本地图片
12、条件渲染
短路表达式
值得注意的是小程序在短路表达式渲染时,会出现true或者false的短暂出现,所以如果是要适配小程序,最好使用三元表达式来进行判断
三元表达式
比较通用的一种方式,Jsx语法是不支持if操作符的,所以只能用三元表达式或者短路表达式

{/* 短路表达式 /}

{

!true || 456

}

​

{/ 三元表达式 /}

{

true ? 123 : ‘’

}
13、列表渲染

{/ 列表渲染 /}

{

this.state.list.map((item) => {

return (

// 提醒你当循环一个数组时应该提供 keys。

// Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 Nerv/小程序 识别哪些元素发生了变化。

// 因此你应当给数组中的每一个元素赋予一个确定的标识



{item.name}



)

})

}
14、Children

export default class TestDialog extends Component {

render () {

return (





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 (



testEvent



)

}

}
16、样式表
不能使用 #id选择器 | div span标签选择器 | span[class=‘name’] 属性选择器 | .a > .b
一般会使用 .类选择器,必须定义className,只对当前组件有效
建议使用flex布局
Taro实战
安装稳定版taro && 初始化项目

$ cnpm i @tarojs/[email protected] -g

$ taro init cnode
使用taro-ui组件库

$ cnpm i taro-ui --save