Route jump in wechat applet

Antecedents feed

Common methods supporting route jump in wechat applet API Yes ,

1. wx.navigateTo(), Keep the current page , Jump to a page in the application . however , You can't jump to tabbar page .
2. wx.redirectTo(), Close current page , Jump to a page in the app .
3. wx.reLaunch(), Close all pages , Open a page in the application .
4. wx.switchTab(), Jump to tabbar page , And shut down all the others tabbar page .

Applet project

The main files involved in the code are ：

1. app.json
2. app.wxss
3. pages/home/home.wxml
4. pages/home/home.json
5. pages/camera/camera.wxml
6. pages/camera/camera.json
7. pages/user/user.wxml
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

The main body

app.json

{
    
  "pages": [
    "pages/home/home",
    "pages/camera/camera",
    "pages/user/user",
    "pages/login/login"
  ],
  "window": {
    
    "navigationBarBackgroundColor": "#0149af",
    "navigationBarTitleText": " home page ",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    
    "color": "#0149af",
    "selectedColor": "#0149af",
    "list": [{
    
      "pagePath": "pages/home/home",
      "text": " home page ",
      "iconPath": "/static/images/tabIcons/homepage.png",
      "selectedIconPath": "/static/images/tabIcons/homepage_fill.png"
    },{
    
      "pagePath": "pages/camera/camera",
      "text": " Photo album ",
      "iconPath": "/static/images/tabIcons/camera.png",
      "selectedIconPath": "/static/images/tabIcons/camera_fill.png"
    },{
    
      "pagePath": "pages/user/user",
      "text": " Personal center ",
      "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;
}

home page （pages/home）

pages/home/home.wxml

<view class="container">
   home page 
</view>

Photo album （pages/camera）

pages/camera/camera.wxml

<view class="container">
   Photo album 
</view>

pages/camera/camera.json

{
    
  "navigationBarTitleText": " Photo album "
}

Personal center （pages/user）

pages/user/user.wxml

<view class="userContainer">
  <image src="/static/images/vistor.png"></image>
  <view class="name"> tourists </view>
  <view class="text" bindtap="handleTap"> Go to login ？</view>
</view>

pages/user/user.json

{
    
  "navigationBarTitleText": " Personal center "
}

Sign in （pages/login）

pages/login/login.wxml

<view class="loginContainer">
  <view class="title"> Sign in </view>
  <view class="list">
    <view class="item">
      <input type="text" data-type="username" bindinput="handleInput" placeholder=" user name " />
    </view>
    <view class="item">
      <input type="text" password data-type="password" bindinput="handleInput" placeholder=" password " />
    </view>
  </view>
  <button size="mini" bindtap="login"> Sign in </button>
</view>

pages/login/login.json

{
    
  "navigationBarTitleText": " Sign in "
}

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: ' Please enter your user name ',
        icon:'error'
      })
      return;
    }
    if(!password){
    
      wx.showToast({
    
        title: ' Please enter your password ',
        icon:'error'
      })
      return;
    }
    wx.showToast({
    
      title: ' Login successful ',
      success:() => {
    
        setTimeout(() => {
    
          wx.switchTab({
    
            url: '/pages/user/user',
          })
        },300)
      }
    })
    /** *  Report errors ：navigateTo:fail can not navigateTo a tabbar page */
    // wx.navigateTo({
    
    // url: '/pages/user/user',
    // })
  }
})

Related links

Life cycle function 、 Routing jump