小程序的页面跳转

页面跳转有两种方式：通过 navigator 组件和通过 wx 的 API 跳转。

1、navigator 组件的使用

navigator 组件主要就是用于界面的跳转的：官方文档

属性	类型	默认值	必填	说明
target	string	self	否	在哪个目标上发生跳转，默认当前小程序
url	string		否	当前小程序内的跳转链接
open-type	string	navigate	否	跳转方式，有很多值：navigate、redirect、switchTab、reLaunch、exit
delta	number	1	否	当 open-type 为 'navigateBack' 时有效，表示回退的层数

<!--home.wxml、通过navigator进行页面跳转-->
<navigator url:'/pages/detail/detail'>跳转</navigator>    <!--默认navigate跳到详情页，可返回-->
<navigator url:'/pages/detail/detail' open-type:'redirect'></navigator>    <!--redirect跳到详情页，不可返回-->


<!--detail.wxml-->    <!--新建页面只需要到app.json中写上路径后保存即可-->
<text>pages/detail/detail.wxml</text>
<navigator open-type:'navigateBack' delta="1">返回</navigator>

2、跳转过程数据传递

假如有一个商场的小程序应用，点击商品后需要传递该商品的 id 才可以跳转到该商品的详情页，有时候页面在返回的时候也需要传递一些数据，这时就需要在界面跳转的过程中传递一些数据了。

2.1 正向传递数据：url?key1=value1&key2=value2

<!--home.wxml、通过navigator进行页面跳转-->
<navigator url:'/pages/detail/detail?name=erha&age=18'>跳转到详情页</navigator>


<!--detail.wxml-->
<text>pages/detail/detail.wxml</text>

<!--detail.js-->
Page({
    onLoad:function(options){
        console.log(options);    <!--这里就可以拿到传递过来的name和age数据了-->
    }
})

2.2 逆向传递数据：getCurrentPages()[length - 2]、prePage.setData(设置数据)

<!--home.wxml、通过navigator进行页面跳转-->
<navigator url:'/pages/detail/detail?name=erha&age=18'>跳转到详情页</navigator>
<view>{{title}}</view>    <!--跳转之前是 erha，跳转回来是 jinmao-->

<!--home.js-->
Page({
    data:{
        title:'erha'
    }
})


<!--detail.wxml-->
<text>pages/detail/detail.wxml</text>

<!--detail.js-->
Page({
    onUnload(){
        //1.获取首页的页面对象、getCurrentPages获取所有活跃页面
        const pages = getCurrentPages();
        const home = pages[pages.length - 2];
        
        //2.调用页面对象的setData方法
        home.setData({
            title:'jinmao';
        })
    }
})

3、通过代码页面跳转

很多情况下并不希望使用 navigator 组件来进行跳转，需求可能是当用户点击某个 button 或 view 时，对该 button 或 view 进行监听，之后通过相关的代码逻辑实现跳转。对此微信也提供了对应的 API 接口：wx.navigateTo(url)、wx.navigateBack([delta])。

<!--home.wxml、通过代码进行页面跳转-->
<button size='mini' bind:tap="handlePushDetail">跳转到详情页</button>

<!--home.js-->
Page({
    handlePushDetail(){
        wx.navigateTo({    <!--也有wx.redirecTo等方法-->
            url:'/pages/detail/detail?title=erha',    <!--也可传递参数，通过?-->
        })
    }
})


<!--detail.wxml-->
<text>pages/detail/detail.wxml</text>
<button size='mini' bind:tap="handleBackHome">返回</button>

<!--detail.js-->
Page({
    handleBackHome(){
        wx.navigateBack({
            delta:1    <!--控制返回层级-->
        })
    }
})