taro小程序如何全局监听路由变化?

在小程序app.ts页,加入全局路由监听Taro.onAppRoute方法,如下

import { Component } from 'react';
import Taro from '@tarojs/taro';

class App extends Component {
  taroGlobalData = {
    previousRouteInfo: {}
  };

  // 对应 onLaunch
  async onLaunch() {
    // 路由变化时,会触发此方法
    (Taro as any).onAppRoute(() => {
      // 获取当前路由路径以及路由参数
      const currentPages = Taro.getCurrentPages();
      const { route, options } = currentPages[currentPages.length - 1];
      console.log('路由变化获取当前path和入参:', route, options)
      console.log('路由变化获取【上一个】path和入参:', this.taroGlobalData.previousRouteInfo)
      this.taroGlobalData.previousRouteInfo = currentPages[currentPages.length - 1]
    })
  }
 
  render() {
    return this.props.children;
  }
}

export default App;

注意:
1、onAppRoute不能放在componentDidShow方法里监听,因为这样会导致小程序切后台再切前台时,重复监听,也就是重复执行了监听事件,所以这里是放在onLaunch生命周期里
2、路由路径以及入参没有直接取onAppRoute方法的第一个参数是因为,onAppRoute方法在微信基础版本3.5.5以下版本时,参数返回有点问题(经观察是路由参数会缺失)

Taro 是一款多端开发框架,可以将小程序、H5、React Native 等多端应用进行统一开发和管理。Taro 可以通过以下方式来提升小程序的性能: 1. 代码压缩 在 Taro 中,可以通过配置 `terser` 插件来进行 JavaScript 代码压缩,从而减少代码的体积,提升小程序的加载速度。 2. 开启 Tree Shaking Tree Shaking 是一种 JavaScript 代码优化技术,可以通过静态分析的方式来删除无用的代码,从而减少代码的体积。在 Taro 中,可以通过配置 `webpack-chain` 来开启 Tree Shaking。 3. 图片压缩 在 Taro 中,可以使用 `taro-plugin-imagemin` 插件来对图片进行压缩,从而减少图片的大小,提升小程序的加载速度。 4. 避免在组件中频繁使用 `setState` 在 Taro 中,频繁地使用 `setState` 会导致页面的重绘和回流,影响小程序的性能。可以通过使用 `useMemo`、`useCallback` 等 React Hooks 来减少不必要的组件渲染。 5. 使用 Taro UI Taro UI 是一款基于 Taro 开发的 UI 组件库,可以提供一些高效、易用、美观的 UI 组件,从而减少开发者自己编写组件的时间和精力,提升小程序的开发效率和性能。 6. 避免过多的 HTTP 请求 在 Taro 中,可以通过合并请求、缓存数据、使用图片懒加载等方式来减少 HTTP 请求次数,从而提升小程序的性能。 总之,Taro 可以通过代码压缩、Tree Shaking、图片压缩、避免频繁使用 `setState`、使用 Taro UI 等方式来提升小程序的性能。同时,开发者也需要关注小程序的网络请求、数据处理、DOM 操作等方面,从多个方面来考虑和实践性能优化。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值