微信小程序 Navigator 跳轉傳參與 Web URL 參數解析技巧

Navigator 組件傳參

navigator 是小程序頁面跳轉的核心組件，通過 URL Query String 傳遞參數：

<!-- 單參數 -->
<navigator url="/pages/detail/detail?id=123">跳轉</navigator>

<!-- 多參數 -->
<navigator url="/pages/detail/detail?id=123&name=abc&type=1">跳轉</navigator>

目標頁面接收參數

在目標頁面的 onLoad(options) 生命周期中直接獲取：

Page({
    onLoad(options) {
        console.log(options.id);    // "123"
        console.log(options.name);  // "abc"
        console.log(options.type);  // "1"
        // options 是包含所有 query 參數的對象
    }
})

注意：參數值均為字符串，需自行 parseInt 等轉換。

進階：編程式跳轉 wx.navigateTo

wx.navigateTo({
    url: '/pages/detail/detail?id=' + encodeURIComponent(id) + '&name=' + encodeURIComponent(name)
})

涉及特殊字符（&、=、空格、中文）時，必須使用 encodeURIComponent 編碼，目標頁面自動解碼。

Web 端 URL 參數解析通用函數

// 獲取 URL 中指定參數值
function GetQueryString(name) {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    const r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURIComponent(r[2]);
    return null;
}

// 使用示例
// URL: https://example.com/page?source=google&keyword=微信小程序
GetQueryString('source');   // "google"
GetQueryString('keyword');  // "微信小程序" (自動解碼)
GetQueryString('none');     // null

小程序與 Web 參數傳遞對比

最佳實踐建議

1. 參數值含中文/特殊字符 → 雙端統一 encodeURIComponent。
2. 敏感信息（token、userId）禁止 明文放 URL，應用 wx.setStorage 或登錄態換取。
3. 長列表參數 → 改用 wx.navigateTo 搭建參數對象，或通過全局 getApp().globalData 傳遞。
4. Web 端現代瀏覽器推薦使用 new URLSearchParams(location.search).get('name') 替代正則。