航：navigateTo跳轉(zhuǎn)與多頁面參數(shù)傳遞實(shí)戰(zhàn))
wechat-miniprogram-examples之頁面導(dǎo)航navigateTo跳轉(zhuǎn)與多頁面參數(shù)傳遞實(shí)戰(zhàn)【免費(fèi)下載鏈接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例項(xiàng)目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples微信小程序頁面導(dǎo)航是每個(gè)開發(fā)者必須掌握的基礎(chǔ)技能而navigateTo 跳轉(zhuǎn)正是其中最常用的 API。本文以開源項(xiàng)目 wechat-miniprogram-examples微信小程序示例合集中的豆瓣圖書、知乎日報(bào)、事項(xiàng)助手三大真實(shí)案例為藍(lán)本手把手拆解 navigateTo 跳轉(zhuǎn)與多頁面參數(shù)傳遞的完整流程。無論你是剛?cè)腴T的小程序新手還是想快速復(fù)習(xí)頁面導(dǎo)航細(xì)節(jié)的開發(fā)者這篇實(shí)戰(zhàn)教程都能幫你一次學(xué)會列表頁跳詳情頁、多參數(shù)拼接、onLoad 接收參數(shù)等核心技巧。 本文將帶你掌握navigateTo 與其他跳轉(zhuǎn) API 的區(qū)別與選擇單參數(shù)與多參數(shù)傳遞的兩種拼接寫法目標(biāo)頁面 onLoad 接收參數(shù)的實(shí)戰(zhàn)姿勢多頁面導(dǎo)航的常見坑與最佳實(shí)踐微信小程序頁面導(dǎo)航有哪幾種方式navigateTo 跳轉(zhuǎn)全解析在動手之前先弄清楚頁面導(dǎo)航的家族成員。微信小程序一共提供了 4 個(gè)導(dǎo)航 API各自適用場景完全不同API作用頁面棧變化典型場景wx.navigateTo保留當(dāng)前頁跳轉(zhuǎn)新頁面新頁面入棧最多 10 層列表頁 → 詳情頁wx.redirectTo關(guān)閉當(dāng)前頁跳轉(zhuǎn)新頁面當(dāng)前頁被替換登錄頁 → 主頁wx.switchTab跳轉(zhuǎn)到 tabBar 頁面關(guān)閉所有非 tab 頁面首頁 / 我的wx.navigateBack返回上一頁頁面出棧詳情頁返回列表navigateTo 跳轉(zhuǎn)之所以是多頁面參數(shù)傳遞的主角正是因?yàn)樗鼤Ａ舢?dāng)前頁面在頁面棧中返回時(shí)無需重新加載列表數(shù)據(jù)體驗(yàn)最順滑。wechat-miniprogram-examples 中三個(gè)示例項(xiàng)目的主力跳轉(zhuǎn)方式全都是它。實(shí)戰(zhàn)一豆瓣圖書 navigateTo 跳轉(zhuǎn)詳情頁單參數(shù)傳遞豆瓣圖書DouBanBookApp是理解單參數(shù)傳遞的最佳案例從搜索結(jié)果列表點(diǎn)擊任意一本書跳轉(zhuǎn)到書籍詳情頁并把圖書 id 傳遞過去。完整的源碼見DouBanBookApp/pages/index/index.js#L56-L61整個(gè)流程分三步。第一步列表頁用>const bid e.currentTarget.dataset.bid; // 圖書id這里的關(guān)鍵是data-前綴的屬性會自動出現(xiàn)在dataset中這是頁面導(dǎo)航參數(shù)傳遞的第一環(huán)。第二步拼接 url 執(zhí)行 navigateTo 跳轉(zhuǎn)拿到 bid 后把參數(shù)拼進(jìn)目標(biāo)頁面的 url 即可wx.navigateTo({ url: ../detail/detail?id bid });注意兩點(diǎn)url 是相對路徑從pages/index/指向pages/detail/參數(shù)用?開頭、keyvalue格式跟在頁面路徑之后。第三步詳情頁 onLoad 接收參數(shù)目標(biāo)頁面通過onLoad(option)拿到跳轉(zhuǎn)時(shí)攜帶的參數(shù)源碼見DouBanBookApp/pages/detail/detail.js#L10-L14onLoad(option) { this.setData({ id: option.id }); }option就是 url 中 query 部分的解析結(jié)果option.id對應(yīng)?idxxx。之后就可以用這個(gè) id 去請求書籍詳情數(shù)據(jù)了。實(shí)戰(zhàn)二知乎日報(bào)多參數(shù)傳遞——一次傳三個(gè)參數(shù)當(dāng)目標(biāo)頁面需要多個(gè)參數(shù)時(shí)只需用連接多個(gè)keyvalue。知乎日報(bào)從詳情頁跳轉(zhuǎn)到評論頁時(shí)一口氣傳遞了日報(bào) id、長評數(shù)、短評數(shù)三個(gè)參數(shù)源碼見ZhiHuDaily/pages/detail/detail.js#L72-L80wx.navigateTo({ url: ../comment/comment?lcount longCommentCount scount shortCommentCount id storyId });目標(biāo)頁面ZhiHuDaily/pages/comment/comment.js#L14-L23的接收方式則更講究——對數(shù)字參數(shù)做了容錯(cuò)處理onLoad(options) { let storyId options.id; let longCommentCount parseInt(options.lcount) || 0; let shortCommentCount parseInt(options.scount) || 0; } 這里有個(gè)非常實(shí)用的技巧url 參數(shù)本質(zhì)是字符串用parseInt()轉(zhuǎn)成數(shù)字再用|| 0兜底即使參數(shù)缺失也不會報(bào)錯(cuò)代碼健壯性立刻提升一個(gè)檔次。實(shí)戰(zhàn)三事項(xiàng)助手——無參數(shù)跳轉(zhuǎn)與頁面棧管理不是所有跳轉(zhuǎn)都需要傳參。事項(xiàng)助手MatterAssistant在長按列表項(xiàng)彈出操作菜單后跳轉(zhuǎn)詳情頁同樣用 navigateTo 傳 id見MatterAssistant/pages/index/index.js#L122-L126而接收端MatterAssistant/pages/detail/detail.js#L15-L31用了 ES6 解構(gòu)寫法更加簡潔onLoad(option) { const { id } option; Data.findOneById(id)... }知乎日報(bào)的首頁則演示了無參數(shù)跳轉(zhuǎn)跳轉(zhuǎn)設(shè)置頁、收藏頁時(shí) url 干干凈凈見ZhiHuDaily/pages/index/index.js#L115-L126wx.navigateTo({ url: ../setting/setting });另外當(dāng)詳情頁數(shù)據(jù)加載失敗時(shí)豆瓣圖書還展示了wx.navigateBack()的用法見DouBanBookApp/pages/detail/detail.js#L35配合導(dǎo)航棧的進(jìn)出構(gòu)成完整的頁面導(dǎo)航閉環(huán)。navigateTo 跳轉(zhuǎn)的 5 個(gè)常見坑與最佳實(shí)踐頁面棧最多 10 層連續(xù) navigateTo 超過 10 層會跳轉(zhuǎn)失敗深層跳轉(zhuǎn)應(yīng)考慮redirectTo或重新設(shè)計(jì)流程。參數(shù)別塞大對象url 參數(shù)有長度限制復(fù)雜數(shù)據(jù)建議用緩存如全局變量、storage配合 id 傳遞。特殊字符需編碼參數(shù)含中文、、等字符時(shí)先encodeURIComponent再拼接。別忘了注冊頁面目標(biāo)頁面必須先在app.json的pages中注冊否則跳轉(zhuǎn)白屏報(bào)錯(cuò)。接收參數(shù)要容錯(cuò)像知乎日報(bào)那樣對數(shù)字參數(shù)parseInt(...) || 0兜底避免參數(shù)缺失導(dǎo)致頁面崩潰?？偨Y(jié)三步掌握微信小程序頁面導(dǎo)航與參數(shù)傳遞回顧一下微信小程序 navigateTo 跳轉(zhuǎn)與多頁面參數(shù)傳遞只需記住三步列表頁取 data 參數(shù) → 拼接?keyvalue多個(gè)用→ 目標(biāo)頁 onLoad 讀取 option。wechat-miniprogram-examples 用三個(gè)風(fēng)格各異的真實(shí)項(xiàng)目把單參數(shù)、多參數(shù)、無參數(shù)三種跳轉(zhuǎn)場景演示得淋漓盡致非常適合新手對照學(xué)習(xí)。想邊看代碼邊跑通整個(gè)流程克隆倉庫到本地用微信開發(fā)者工具依次打開DouBanBookApp、ZhiHuDaily、MatterAssistant三個(gè)目錄即可體驗(yàn)git clone https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples下次寫頁面跳轉(zhuǎn)時(shí)記得優(yōu)先思考這個(gè)跳轉(zhuǎn)該保留當(dāng)前頁還是替換它再動手拼接參數(shù)你的多頁面導(dǎo)航就能像示例項(xiàng)目一樣流暢又規(guī)范?！久赓M(fèi)下載鏈接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例項(xiàng)目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 wechat-miniprogram-examples之頁面導(dǎo)航：navigateTo跳轉(zhuǎn)與多頁面參數(shù)傳遞實(shí)戰(zhàn)
wechat-miniprogram-examples之頁面導(dǎo)航navigateTo跳轉(zhuǎn)與多頁面參數(shù)傳遞實(shí)戰(zhàn)【免費(fèi)下載鏈接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例項(xiàng)目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples微信小程序頁面導(dǎo)航是每個(gè)開發(fā)者必須掌握的基礎(chǔ)技能而navigateTo 跳轉(zhuǎn)正是其中最常用的 API。本文以開源項(xiàng)目 wechat-miniprogram-examples微信小程序示例合集中的豆瓣圖書、知乎日報(bào)、事項(xiàng)助手三大真實(shí)案例為藍(lán)本手把手拆解 navigateTo 跳轉(zhuǎn)與多頁面參數(shù)傳遞的完整流程。無論你是剛?cè)腴T的小程序新手還是想快速復(fù)習(xí)頁面導(dǎo)航細(xì)節(jié)的開發(fā)者這篇實(shí)戰(zhàn)教程都能幫你一次學(xué)會列表頁跳詳情頁、多參數(shù)拼接、onLoad 接收參數(shù)等核心技巧。 本文將帶你掌握navigateTo 與其他跳轉(zhuǎn) API 的區(qū)別與選擇單參數(shù)與多參數(shù)傳遞的兩種拼接寫法目標(biāo)頁面 onLoad 接收參數(shù)的實(shí)戰(zhàn)姿勢多頁面導(dǎo)航的常見坑與最佳實(shí)踐微信小程序頁面導(dǎo)航有哪幾種方式navigateTo 跳轉(zhuǎn)全解析在動手之前先弄清楚頁面導(dǎo)航的家族成員。微信小程序一共提供了 4 個(gè)導(dǎo)航 API各自適用場景完全不同API作用頁面棧變化典型場景wx.navigateTo保留當(dāng)前頁跳轉(zhuǎn)新頁面新頁面入棧最多 10 層列表頁 → 詳情頁wx.redirectTo關(guān)閉當(dāng)前頁跳轉(zhuǎn)新頁面當(dāng)前頁被替換登錄頁 → 主頁wx.switchTab跳轉(zhuǎn)到 tabBar 頁面關(guān)閉所有非 tab 頁面首頁 / 我的wx.navigateBack返回上一頁頁面出棧詳情頁返回列表navigateTo 跳轉(zhuǎn)之所以是多頁面參數(shù)傳遞的主角正是因?yàn)樗鼤Ａ舢?dāng)前頁面在頁面棧中返回時(shí)無需重新加載列表數(shù)據(jù)體驗(yàn)最順滑。wechat-miniprogram-examples 中三個(gè)示例項(xiàng)目的主力跳轉(zhuǎn)方式全都是它。實(shí)戰(zhàn)一豆瓣圖書 navigateTo 跳轉(zhuǎn)詳情頁單參數(shù)傳遞豆瓣圖書DouBanBookApp是理解單參數(shù)傳遞的最佳案例從搜索結(jié)果列表點(diǎn)擊任意一本書跳轉(zhuǎn)到書籍詳情頁并把圖書 id 傳遞過去。完整的源碼見DouBanBookApp/pages/index/index.js#L56-L61整個(gè)流程分三步。第一步列表頁用>const bid e.currentTarget.dataset.bid; // 圖書id這里的關(guān)鍵是data-前綴的屬性會自動出現(xiàn)在dataset中這是頁面導(dǎo)航參數(shù)傳遞的第一環(huán)。第二步拼接 url 執(zhí)行 navigateTo 跳轉(zhuǎn)拿到 bid 后把參數(shù)拼進(jìn)目標(biāo)頁面的 url 即可wx.navigateTo({ url: ../detail/detail?id bid });注意兩點(diǎn)url 是相對路徑從pages/index/指向pages/detail/參數(shù)用?開頭、keyvalue格式跟在頁面路徑之后。第三步詳情頁 onLoad 接收參數(shù)目標(biāo)頁面通過onLoad(option)拿到跳轉(zhuǎn)時(shí)攜帶的參數(shù)源碼見DouBanBookApp/pages/detail/detail.js#L10-L14onLoad(option) { this.setData({ id: option.id }); }option就是 url 中 query 部分的解析結(jié)果option.id對應(yīng)?idxxx。之后就可以用這個(gè) id 去請求書籍詳情數(shù)據(jù)了。實(shí)戰(zhàn)二知乎日報(bào)多參數(shù)傳遞——一次傳三個(gè)參數(shù)當(dāng)目標(biāo)頁面需要多個(gè)參數(shù)時(shí)只需用連接多個(gè)keyvalue。知乎日報(bào)從詳情頁跳轉(zhuǎn)到評論頁時(shí)一口氣傳遞了日報(bào) id、長評數(shù)、短評數(shù)三個(gè)參數(shù)源碼見ZhiHuDaily/pages/detail/detail.js#L72-L80wx.navigateTo({ url: ../comment/comment?lcount longCommentCount scount shortCommentCount id storyId });目標(biāo)頁面ZhiHuDaily/pages/comment/comment.js#L14-L23的接收方式則更講究——對數(shù)字參數(shù)做了容錯(cuò)處理onLoad(options) { let storyId options.id; let longCommentCount parseInt(options.lcount) || 0; let shortCommentCount parseInt(options.scount) || 0; } 這里有個(gè)非常實(shí)用的技巧url 參數(shù)本質(zhì)是字符串用parseInt()轉(zhuǎn)成數(shù)字再用|| 0兜底即使參數(shù)缺失也不會報(bào)錯(cuò)代碼健壯性立刻提升一個(gè)檔次。實(shí)戰(zhàn)三事項(xiàng)助手——無參數(shù)跳轉(zhuǎn)與頁面棧管理不是所有跳轉(zhuǎn)都需要傳參。事項(xiàng)助手MatterAssistant在長按列表項(xiàng)彈出操作菜單后跳轉(zhuǎn)詳情頁同樣用 navigateTo 傳 id見MatterAssistant/pages/index/index.js#L122-L126而接收端MatterAssistant/pages/detail/detail.js#L15-L31用了 ES6 解構(gòu)寫法更加簡潔onLoad(option) { const { id } option; Data.findOneById(id)... }知乎日報(bào)的首頁則演示了無參數(shù)跳轉(zhuǎn)跳轉(zhuǎn)設(shè)置頁、收藏頁時(shí) url 干干凈凈見ZhiHuDaily/pages/index/index.js#L115-L126wx.navigateTo({ url: ../setting/setting });另外當(dāng)詳情頁數(shù)據(jù)加載失敗時(shí)豆瓣圖書還展示了wx.navigateBack()的用法見DouBanBookApp/pages/detail/detail.js#L35配合導(dǎo)航棧的進(jìn)出構(gòu)成完整的頁面導(dǎo)航閉環(huán)。navigateTo 跳轉(zhuǎn)的 5 個(gè)常見坑與最佳實(shí)踐頁面棧最多 10 層連續(xù) navigateTo 超過 10 層會跳轉(zhuǎn)失敗深層跳轉(zhuǎn)應(yīng)考慮redirectTo或重新設(shè)計(jì)流程。參數(shù)別塞大對象url 參數(shù)有長度限制復(fù)雜數(shù)據(jù)建議用緩存如全局變量、storage配合 id 傳遞。特殊字符需編碼參數(shù)含中文、、等字符時(shí)先encodeURIComponent再拼接。別忘了注冊頁面目標(biāo)頁面必須先在app.json的pages中注冊否則跳轉(zhuǎn)白屏報(bào)錯(cuò)。接收參數(shù)要容錯(cuò)像知乎日報(bào)那樣對數(shù)字參數(shù)parseInt(...) || 0兜底避免參數(shù)缺失導(dǎo)致頁面崩潰?？偨Y(jié)三步掌握微信小程序頁面導(dǎo)航與參數(shù)傳遞回顧一下微信小程序 navigateTo 跳轉(zhuǎn)與多頁面參數(shù)傳遞只需記住三步列表頁取 data 參數(shù) → 拼接?keyvalue多個(gè)用→ 目標(biāo)頁 onLoad 讀取 option。wechat-miniprogram-examples 用三個(gè)風(fēng)格各異的真實(shí)項(xiàng)目把單參數(shù)、多參數(shù)、無參數(shù)三種跳轉(zhuǎn)場景演示得淋漓盡致非常適合新手對照學(xué)習(xí)。想邊看代碼邊跑通整個(gè)流程克隆倉庫到本地用微信開發(fā)者工具依次打開DouBanBookApp、ZhiHuDaily、MatterAssistant三個(gè)目錄即可體驗(yàn)git clone https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples下次寫頁面跳轉(zhuǎn)時(shí)記得優(yōu)先思考這個(gè)跳轉(zhuǎn)該保留當(dāng)前頁還是替換它再動手拼接參數(shù)你的多頁面導(dǎo)航就能像示例項(xiàng)目一樣流暢又規(guī)范?！久赓M(fèi)下載鏈接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例項(xiàng)目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考