navigateto详解

一、navigateto基础概念

navigateto是小程序中的一个重要API，它可以实现页面的跳转功能。与其他跳转API不同的是，navigateto能够保留当前页面的状态，而不是关闭当前页面。这也是它被广泛使用的原因之一。下面是一个navigateto的基本语法：

navigateto({
    url: string   //要跳转的页面地址，必须以/开头。
})

其中，url是必填项，表示要跳转到的页面路径（注意，这个路径必须以斜杠/开头）。例如：

navigateto({
    url: '/pages/detail/detail'   //跳转到/pages/detail/detail页面
})

二、navigateto接收参数

navigateto可以接收两种类型的参数：query参数和可选参数。query参数是在url路径后面的参数，格式为?key1=value1&key2=value2&…。可以在跳转到的页面中通过getApp().getCurrentPages()[0].options获取。代码如下：

navigateto({
    url: '/pages/detail/detail?key=value'   //跳转到/pages/detail/detail页面，并传递key=value作为query参数
})

当跳转到/pages/detail/detail页面后，可以通过以下代码获取query参数：

var options = getApp().getCurrentPages()[0].options;
console.log(options.key);   //输出value

可选参数可以通过url后面的#号来传递。格式为#key1=value1&key2=value2&…，也可以在跳转到的页面中通过onLoad函数的options参数获取。代码如下：

navigateto({
    url: '/pages/detail/detail#key=value'   //跳转到/pages/detail/detail页面，并传递key=value作为可选参数
})

当跳转到/pages/detail/detail页面后，可以通过以下代码获取可选参数：

var options = this.options;
console.log(options.key);   //输出value

三、navigateto的限制

虽然navigateto很强大，但它也有一些限制。首先，它不能跳转至tabBar页面。不过，可以通过wx.switchTab()函数实现跳转。其次，当跳转的页面层数超过10层，navigateto函数会自动取消跳转。此外，还需要注意避免多次调用navigateto函数，否则可能出现栈溢出等问题。

四、navigateto的使用场景

navigateto在小程序中有着广泛的应用场景。例如，可以用它实现列表页到详情页的跳转，或者从首页跳转到个人中心等。另外，navigateto还可以与其他API组合，实现更丰富的功能。例如，可以在跳转页面时携带用户id，然后在目标页面中通过接口获取用户信息并显示。

五、navigateto代码示例

下面是一个使用navigateto实现列表页到详情页跳转的代码示例：

列表页代码

<!-- wxml代码 -->
<view class="list-item" bindtap="goDetail">
    <image src="{{item.imgUrl}}" class="item-img" />
    <view class="item-info">
        <view class="item-title">{{item.title}}</view>
        <view class="item-desc">{{item.desc}}</view>
    </view>
</view>

<!-- js代码 -->
Page({
    data: {
        list: [
            {
                imgUrl: 'http://img.com/1.jpg',
                title: '标题1',
                desc: '描述1',
                id: 1
            },
            {
                imgUrl: 'http://img.com/2.jpg',
                title: '标题2',
                desc: '描述2',
                id: 2
            }
        ]
    },
    goDetail: function(event) {
        var id = event.currentTarget.dataset.id;
        wx.navigateTo({
            url: '/pages/detail/detail?id=' + id
        });
    }
});

详情页代码

<!-- wxml代码 -->
<view class="detail">
    <image src="{{item.imgUrl}}" class="detail-img" />
    <view class="detail-info">
        <view class="detail-title">{{item.title}}</view>
        <view class="detail-desc">{{item.desc}}</view>
    </view>
</view>

<!-- js代码 -->
Page({
    data: {
        item: {}
    },
    onLoad: function(options) {
        var id = options.id;
        //根据id请求接口获取详细信息
        var that = this;
        wx.request({
            url: 'http://api.com/detail?id=' + id,
            success: function(res) {
                that.setData({
                    item: res.data
                });
            }
        });
    }
});