【Taro开发】-路由传参及页面事件调用（二）

Taro小程序开发

系列文章的所有文章的目录

【Taro开发】-初始化项目（一）

【Taro开发】-路由传参及页面事件调用（二）

【Taro开发】-taro-ui（三）

【Taro开发】-带token网络请求封装（四）

【Taro开发】-自定义导航栏NavBar（五）

【Taro开发】-formData图片上传组件（六）

【Taro开发】-封装Form表单组件和表单检验（七）

【Taro开发】-tabs标签页及子组件的下拉刷新（八）

【Taro开发】-简易的checkBoxGroup组件（九）

【Taro开发】-页面生成二维码及保存到本地（十）

【Taro开发】-宣传海报，实现canvas实现圆角画布/图片拼接二维码并保存（十一）

【Taro开发】-分享给好友/朋友圈（十二）

【Taro开发】-小程序自动打包上传并生成预览二维码（十三）

【Taro开发】-全局自定义导航栏适配消息通知框位置及其他问题（十四）

---

---

前言

基于Taro的微信小程序开发，主要组件库为Taro-ui
Taro-ui：基于 Taro 开发 UI 组件
一套组件可以在 微信小程序，支付宝小程序，百度小程序，H5 多端适配运行（ReactNative 端暂不支持）
提供友好的 API，可灵活的使用组件

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、路由配置

app.jsx
config={
  pages:[
    'pages/index/index',//第一项默认为首页
    'pages/test/test'
  ]
}

二、路由跳转

//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
Taro.switchTab(option)
//关闭所有页面，打开到应用内的某个页面
Taro.reLaunch(option)
//关闭当前页面，返回上一页面或多级页面。
Taro.navigateBack(option)
// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
  url: '/pages/page/path/name'
})
// 跳转到目的页面，打开新页面
Taro.navigateTo({
  url:"/pages/index/index"
})
//页面间事件通信通道
EventChannel

1.路由传参

Taro.navigateTo({
  url:`/pages/index/index?id=1&type=${this.state.index}`
})

2.获取参数

//跳转成功后，在目标页面的生命周期方法中获取路由参数。
Taro.getCurrentInstance().router.params 

import Taro from '@tarojs/taro'
// 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用，
  // 而不是频繁地调用此 API
  $instance = Taro.getCurrentInstance()
  componentDidMount () {
    // 获取路由参数
    console.log(this.$instance.router.params) 
  }

三、页面事件

1.当前页面内事件

只能在当前页面使用

Taro.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function (res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

2.全局事件

//pageA
componentDidMount() {
    ...
    Taro.eventCenter.on("refreshStaff", isRefresh => {
      isRefresh && this.getList(areaId);
    });
  }

  componentWillUnmount() {//需在页面卸载时移除事件，否则会多次叠加事件，造成函数被多次触发
    Taro.eventCenter.off("refreshStaff");
  }

//pageB
	 Taro.eventCenter.trigger("refreshStaff", { data: true });

四、返回页面并传参

1.当前页面

//点击事件
back = (value, e) => {
    console.log(value, e);
    var pages = Taro.getCurrentPages(); //获取当前页面栈
    if (pages.length > 1) {
      var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
      beforePage.setData({
        //返回参数 ps：这里我打印出beforePage只有一个setData能调用到
        version: value
      });
    }
    Taro.navigateBack({ delta: 1 }); //返回上一个页面
  };

2.返回的页面

componentDidShow() {
    //获取选中的选项
    let pages = Taro.getCurrentPages();
    let currPage = pages[pages.length - 1];
    console.log("回传的参数对象", currPage.data);
    const { data } = currPage;
    const { version } = data; //最终需要的参数值
    if (version) {
      // 这里是你获取到值后 所做的一些业务逻辑代码...
     
    }
  }