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
                });
            }
        });
    }
});