Taro实用干货分享

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43918434/article/details/89184924

简介

由于taro是一个新生的框架,所以在查阅资料时是很不方便的,几乎没有什么原生demo给我们查阅,往往都是我们通过查阅微信小程序官方文档,taro官方文档,以及一些微信小程序别人的demo,四处碰壁,现在我分享一下我最近学习的一些干货,以及思路。

概念

生命周期

Taro的本身生命周期

componentWillMount
在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch

componentDidMount
在微信小程序中这一生命周期方法对应页面的onReady或入口文件app中的onLaunch,在 componentWillMount后执行

componentDidShow
在微信小程序中这一生命周期方法对应 onShow

componentDidHide
在微信小程序中这一生命周期方法对应 onHide

componentDidCatchError
错误监听函数,在微信小程序中这一生命周期方法对应 onError

componentDidNotFound
页面不存在监听函数,在微信小程序中这一生命周期方法对应 onPageNotFound

shouldComponentUpdate
页面是否需要更新

componentWillUpdate
页面即将更新

componentDidUpdate
页面更新完毕

componentWillUnmount
页面退出,在微信小程序中这一生命周期方法对应 onUnload

Taro在微信小程序开发中特有的生命周期

  1. onPullDownRefresh: 页面相关事件处理函数–监听用户下拉动作
  2. onReachBottom: 页面上拉触底事件的处理函数
  3. onShareAppMessage: 用户点击右上角转发
  4. onPageScroll: 页面滚动触发事件的处理函数
  5. onTabItemTap: 当前是 tab 页时,点击 tab 时触发
  6. componentWillPreload: 预加载,只在微信小程序中可用

在正常的开发情况下,一般常用的是自带的生命周期componentWillMount 和 componentDidMount,用来调用后端接口,承接数据,onPullDownRefresh一般是用来做下拉刷新的,其他的带过一下即可。

componentWillMount() {
Fetch("/order/buy/list/?kind=1").then(data => {
this.setState({
orderList: data.orderList
})
})
// console.log(this.state.orderList);
}

如以上代码,调用封装好fetch方法,与后端给的接口连接起来,并把数据储存在当前变量中。
就是通过componentWillMount在页面开始加载时开始调用接口。

组件化

组件化与模块化的思想

概述

都是通过对不同组件,不同功能封装的思想。网上找了一篇文章讲述了分析组件化与模块化之间的区别

用法

在taro中,常用的组件使用方法就是与react几乎完全相同。
就不再详细展开论述。
唯一需要注意就是在引用子组件的父组件中要声明。

import SmallTab from ‘…/…/componments/smallTab/small-tab’
import headerTab from ‘…/…/componments/headerTab/header-tab’

如上

父子组件传参

在taro中,如果子组件的某些数据不定,可以通过对父组件数据的引用来传给子组件用。
具体代码如上

// 父组件
import headerTab from ‘…/…/componments/headerTab/header-tab’
render () {
<headerTab navList={[‘发起’,‘参与’,‘讨论’]} />
}

//子组件
constructor(props){
super(props)
this.state = {
//导航索引
currentTab: 0,
}
}
render () {
return (
< View className=‘swiper-tab’>
{this.props.navList.map((nev,index) => (
<View className={this.state.currentTab===index?‘active’:‘normal’} data-index={index} onClick={this.switchNav.bind(this)}>{nev}</ View>
))}
</ View>
)
}
}

所述的子组件引入了props,即可通过父组件向其传参,即navList数组。
子组件中即可调用this.props.navList ,对数组进行遍历。

路由传参

taro的路由传参格式与接受数据

changPage(e){
var id = e.currentTarget.dataset.id
Taro.navigateTo({
url: ‘…/add/detail?id=’ + `${id} ``
})
}

如以上代码中,就是对页面进行跳转的一个方法并将参数id传入
在另个页面中,接收方法为

componentWillMount () {
var id = this.$router.params.id
this.setState({
orderid:id,
})
// console.log(this.state.orderid);
}

通过使用接收参数的 this.$router.params.id 来获得id属性。

展开阅读全文

没有更多推荐了,返回首页