React Router v6：路由管理的最新进展

1，内置api

显示提示

• showToast

本地存储

• wx.setStorageSync(key,value)

本地取

• wx.getStorageSync(key)
• wx.request 网络请求

2，生命周期

3，页面切换

1，< navigator></ navigator >标签

2，wx.navigateTo.

格式为:

//<!**wxml文件**>
<view class="select_calculator" bindtap="next_calculator">
//js文件
next_calculator:function () {
    wx.navigateTo({
      url: '/pages/calculator/calculator',
    })
 

3，wx.redirectTo.

格式为:

<view>
  <navigator open-type="redirect" url="/pages/event/event">跳转并替换</navigator>
</view>

4，wx.switchTab.

5，wx.reLaunch.

格式为:

<view>
  <navigator open-type="reLaunch">重启</navigator>
</view>

4 ，tabBar 全局配置

1， 注意：

1. tabBar中只能配置最少 2 个、最多 5 个 tab 页签
2. 当渲染顶部 tabBar 时，不显示 icon，只显示文本

2，tabBar 的 6 个组成部分

① backgroundColor：				tabBar 的背景色

② selectedIconPath：			选中时的图片路径

③ borderStyle：					tabBar 上边框的颜色

④ iconPath：					未选中时的图片路径

⑤ selectedColor：				tab 上的文字选中时的颜色

⑥ color：						tab 上文字的默认（未选中）颜色

3. tabBar 节点的配置项

4. 每个 tab 项的配置选项

5，全局配置 - 案例：配置 tabBar

配置 tabBar 选项

代码如下：

{
    "pages": [
        "pages/hone/hone",
        "pages/Profile/Profile",
        "pages/experience/experience",
        "pages/skill/skill",
        "pages/index/index",
        "pages/logs/logs"
    ],
    "tabBar":{
        "color": "#777",
        "selectedColor": "#1cb9ce",
        "list":[
            {"pagePath": "pages/hone/hone","text":"简历信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},
            {"pagePath": "pages/skill/skill","text":"个人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},
            {"pagePath": "pages/experience/experience","text":"项目经历","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},
            {"pagePath": "pages/Profile/Profile","text":"自我评价","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}
        ]
    },
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

6，页面传参

wxml 代码如下：

<view>
  <navigator open-type="navigate" url="/pages/event/event?name=mumu&age=18">事件event</navigator>
</view>
<view>
  <navigator open-type="redirect" url="/pages/event/event?name=曾庆林&age=33">跳转并替换</navigator>
</view>

js 代码如下：

/**
   * 页面的初始数据
   */
  data: {
    num:null,
  },
  goEvent(e){
    // 获取到传递的参数type
    var type = e.target.dataset.type;
    // 如果type值是redirect 替换跳转
    if(type=="redirect"){
      wx.redirectTo({
        url: "/pages/event/event",
      })
    }else{
      // 否则就普通跳转
      wx.navigateTo({
        url: '/pages/event/event',
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 更新导航栏的标题
    wx.setNavigationBarTitle({
      title: '导航与跳转',
    })
   
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({num:app.globalData.num})
  },

页面传递的参数

<view>页面传递的参数</view>
<view>
姓名：{{name}}，年龄{{age}}
</view>