微信小程序中的路由跳转

前情提要

微信小程序中支持路由跳转的常用API有，

1. wx.navigateTo()，保留当前页面，跳转到应用中的某个页面。但是，不能跳转到tabbar页面。
2. wx.redirectTo()，关闭当前页面，跳转到应用内的某个页面。
3. wx.reLaunch()，关闭所有页面，打开应用中的某个页面。
4. wx.switchTab()，跳转到tabbar页面，并关闭其他所有非tabbar页面。

小程序项目

代码涉及的主要文件有：

1. app.json
2. app.wxss
3. pages/home/home.wxml
4. pages/camera/camera.wxml
5. pages/camera/camera.json
6. pages/user/user.wxml
7. pages/user/uesr.js
8. pages/user/user.json
9. pages/login/login.wxml
10. pages/login/login.json
11. pages/login/login.wxss
12. pages/login/login.js

主体

app.json

{
  "pages": [
    "pages/home/home",
    "pages/camera/camera",
    "pages/user/user",
    "pages/login/login"
  ],
  "window": {
    "navigationBarBackgroundColor": "#0149af",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#0149af",
    "selectedColor": "#0149af",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/static/images/tabIcons/homepage.png",
      "selectedIconPath": "/static/images/tabIcons/homepage_fill.png"
    },{
      "pagePath": "pages/camera/camera",
      "text": "相册",
      "iconPath": "/static/images/tabIcons/camera.png",
      "selectedIconPath": "/static/images/tabIcons/camera_fill.png"
    },{
      "pagePath": "pages/user/user",
      "text": "个人中心",
      "iconPath": "/static/images/tabIcons/people.png",
      "selectedIconPath": "/static/images/tabIcons/people_fill.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.wxss

.container{
  margin: 40rpx;
  padding: 40rpx;
  height: 600rpx;
  background:#a3c8f8;
  border-radius: 6rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 48rpx;
  color: #fff;
}

首页（pages/home）

pages/home/home.wxml

<view class="container">
  首页
</view>

相册（pages/camera）

pages/camera/camera.wxml

<view class="container">
  相册
</view>

pages/camera/camera.json

{
  "navigationBarTitleText": "相册"
}

个人中心（pages/user）

pages/user/user.wxml

<view class="userContainer">
  <image src="/static/images/vistor.png"></image>
  <view class="name">游客</view>
  <view class="text" bindtap="handleTap">去登录？</view>
</view>

pages/user/user.js

Page({
  handleTap(){
    wx.navigateTo({
      url: '/pages/login/login',
    })
  }
})

pages/user/user.json

{
  "navigationBarTitleText": "个人中心"
}

登录（pages/login）

pages/login/login.wxml

<view class="loginContainer">
  <view class="title">登录</view>
  <view class="list">
    <view class="item">
      <input type="text" data-type="username" bindinput="handleInput" placeholder="用户名" />
    </view>
    <view class="item">
      <input type="text" password data-type="password" bindinput="handleInput" placeholder="密码" />
    </view>
  </view>
  <button size="mini" bindtap="login">登录</button>
</view>

pages/login/login.json

{
  "navigationBarTitleText": "登录"
}

pages/login/login.wxss

.loginContainer{
  padding: 20rpx;
}
.loginContainer .title{
  padding: 20rpx 0;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 32rpx;
}
.list{
  margin: 40rpx auto 20rpx;
}
.item{
  margin: 12rpx 0;
  padding: 0 20rpx;
  border: 1px solid #ddd;
  border-radius: 6rpx;
}
.item input{
  width: 100%;
  height: 60rpx;
  font-size: 28rpx;
}
button{
  font-weight: normal;
  font-size: 28rpx!important;
  color: #fff;
  background: #0149af;
}

pages/login/login.js

Page({
  data:{
    username:"",
    password:""
  },
  handleInput(e){
    const type = e.target.dataset.type;
    this.setData({
      [type]:e.detail.value
    })
  },
  login(){
    const {username,password} = this.data;
    if(!username){
      wx.showToast({
        title: '请输入您的用户名',
        icon:'error'
      })
      return;
    }
    if(!password){
      wx.showToast({
        title: '请输入您的密码',
        icon:'error'
      })
      return;
    }
    wx.showToast({
      title: '登录成功',
      success:() => {
        setTimeout(() => {
          wx.switchTab({
            url: '/pages/user/user',
          })
        },300)
      }
    })
    /**
     * 报错：navigateTo:fail can not navigateTo a tabbar page
     */
    // wx.navigateTo({
    //   url: '/pages/user/user',
    // })
  }
})

相关链接

生命周期函数、路由跳转