Taro小程序开发

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

文章目录

• Taro小程序开发
• 前言
• 一、路由配置
• 二、路由跳转
• • 3.路由传参
  • 4.获取参数

前言

基于Taro的微信小程序开发，主要组件库为Taro-ui

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

一、路由配置

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

3.路由传参

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

4.获取参数

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

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