小程序之页面跳转

小程序源码目录。

标签页与标签页之间的跳转

标签页与标签页之间的跳转，通过wx.switchTab()实现。

wx.switchTab()

• app.json

{
  "pages":[
    "pages/index/index",
    "pages/person/person"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fb3",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#101010",
    "selectedColor": "#f9b05c",
    "list": [
      {
        "iconPath": "./images/home.png",
        "selectedIconPath": "./images/home_select.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "iconPath": "./images/me.png",
        "selectedIconPath": "./images/me_select.png",
        "pagePath": "pages/person/person",
        "text": "个人中心"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• pages\index\index.wxml

<!--index.wxml-->
<button bindtap="switchToPerson">跳到 个人中心</button>

• pages\index\index.js

// index.js
Page({
  switchToPerson:function(){
    console.log("begin to switch")
    wx.switchTab({
      url: '/pages/person/person',
      success:(res) => {
        console.log(res);
      }
    })
  }
})

• pages\person\person.wxml

<!--pages/person/person.wxml-->
<button bindtap="switchToIndex">跳回 首页</button>

• pages\person\person.js

// pages/person/person.js
Page({
  switchToIndex:function(){
    wx.switchTab({
      url:"/pages/index/index",
      success:res => {
        console.log(res);
      }
    })
  }
})

非标签页与非标签页之间的跳转

非标签页与非标签页之间的跳转，可以通过wx.navigateTo()和wx.redirectTo()实现。其中，

wx.navigateTo()

将跳转至目标页面，且保留当前页面。跳转后，单击左上角可以返回到上一页面。
也可以通过wx.navigateBack()返回到原页面。
wx.navigateTo()只能跳转到非标签页。

wx.redirectTo()

将跳转到目标页面，且关闭当前页面。跳转后，不能返回到上一页面。
wx.redirectTo()只能跳转到非标签页。

• app.json

{
  "pages":[
    "pages/index/index",
    "pages/person/person",
    "pages/address/address",
    "pages/order/order",
    "pages/detail/detail"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fb3",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#101010",
    "selectedColor": "#f9b05c",
    "list": [
      {
        "iconPath": "./images/home.png",
        "selectedIconPath": "./images/home_select.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "iconPath": "./images/me.png",
        "selectedIconPath": "./images/me_select.png",
        "pagePath": "pages/person/person",
        "text": "个人中心"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• pages\person\person.wxml

<!--pages/person/person.wxml-->
<view class="item info" bindtap="gotoInfo">
  <view>个人资料</view>
  <image src="../../images/arrow.png"></image>
</view>
<view class="item order" bindtap="gotoOrder">
  <view>订单物流查询</view>
  <image src="../../images/arrow.png"></image>
</view>
<view class="item order" bindtap="gotoAddress">
  <view>选择收货地址</view>
  <image src="../../images/arrow.png"></image>
</view>

• pages\person\person.wxss

/* pages/person/person.wxss */
image{
  width: 32rpx;
  height: 32rpx;
}
.item{
  margin: 50rpx;
  padding-bottom: 30rpx;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12pt;
}

• pages\person\person.js

// pages/person/person.js
Page({
  gotoInfo:function(){
    wx.navigateTo({
      url: '/pages/detail/detail',
    })
  },
  gotoOrder:function(){
    wx.navigateTo({
      url: '/pages/order/order',
    })
  },
  gotoAddress:function(){
    wx.redirectTo({
      url: '/pages/address/address'
    })
  }
})

• pages\detail\detail.wxml

<!--pages/detail/detail.wxml-->
<open-data type="userAvatarUrl"></open-data>

• pages\order\order.wxml

<!--pages/order/order.wxml-->
<button bindtap="goBack" type="primary">返回</button>

• pages\order\order.wxss

/* pages/order/order.wxss */
button{
  margin-top: 50rpx;
}

• pages\order\order.js

// pages/order/order.js
Page({
  goBack:function(){
    wx.navigateBack({
      delta: 0,
    })
  }
})

• pages\address\address.wxml

<!--pages/address/address.wxml-->
<form>
  <input type="text" placeholder="请输入您的收货地址" />
</form>

• pages\address\address.wxss

/* pages/address/address.wxss */
input{
  margin: 30rpx;
  padding: 8rpx;
  border: 1px solid #fb3;
  border-radius: 6rpx;
  line-height: 5vh;
  height: 5vh;
}

标签页与非标签页之间的跳转

wx.reLaunch()

wx.reLaunch()将关闭所有页面，打开应用中的某个页面。既可以跳转到标签页，也可以跳转到非标签页。

• pages\index\index.wxml

<!--index.wxml-->
<button bindtap="gotoPerson">去个人中心</button>
<button bindtap="gotoAddress">去选择收货地址</button>

• pages\index\index.js

// index.js
Page({
  gotoPerson:function(){
    wx.reLaunch({
      url: '/pages/person/person',
      success:() => {
        console.log("we got to person page");
      }
    })
  },
  gotoAddress:function(){
    wx.reLaunch({
      url: '/pages/address/address',
      success:() => {
        console.log("we got to address page");
      }
    })
  }
})