首頁 微信小程式 小程式開發 微信小程式頁頁間傳遞資料的幾種方法

微信小程式頁頁間傳遞資料的幾種方法

Jul 13, 2020 pm 04:49 PM
傳遞數據 小程式 微信

微信小程式頁頁間傳遞資料的幾種方法

在微信小程式的開發中,我們會經常遇到頁間資料傳遞或相互影響的問題。在實際的開發過程中,可以透過以下幾種方法來實現。

使用全域變數

全域變數實際上是定義了一個全域的對象,並在每個頁面中引入。

在初始化程式碼的時候,小程式會讀取一個 app.js 的文件,在這裡我們可以定義我們所需要的全域變數。

微信小程式頁頁間傳遞資料的幾種方法

然後在頁面中,可以透過 getApp()方法取得全域應用對象,可以對全域變數進行讀取並更改:

微信小程式頁頁間傳遞資料的幾種方法

由於app.js 在專案中是用來做基礎配置的,因此不建議將許多變數放在這裡配置。 一般情況下會將一些持久化的常數配置在這裡,對於經常需要變動的量不建議用這個方法。

使用本機快取

本機快取是微信小程式提供的功能,可以將使用者產生的資料做本機的持久化,類似NoSQL,可以進行讀取和修改的操作。

那麼在不同的頁面之間,如何利用它,進行資料的互動呢?

假設我們在 A 頁面儲存了使用者的資訊。

微信小程式頁頁間傳遞資料的幾種方法

這樣做,這個資料就存在了本地。當在B 頁面需要使用的時候,可以直接的獲取到數據池中的數據,並進行CRUD 操作:

微信小程式頁頁間傳遞資料的幾種方法

需要注意的是,在回到A 頁面的時候,小程式需要重新讀取資料。這時候,可以選擇放在生命週期的onShow 中對資料重新載入

#父級往子級頁面(範本)的資料傳遞

#我們通常會在頁面之間進行跳轉、重定向的操作。 這時候,我們可以選擇將部分資料放在 url 裡面,並在新頁面 onLoad 的時候進行初始化。

微信小程式頁頁間傳遞資料的幾種方法

在D 頁面中,我們可以這樣接收到所傳進來的參數:

微信小程式頁頁間傳遞資料的幾種方法

wx.navigateTo 和wx.redirectTo 不允許跳到tab 所包含的頁面,只能用wx.switchTab 跳轉。需要注意的是,wx.switchTab 中的 url 不能傳參數。

微信新提供的 wx.reLaunch 介面可以傳入參數。

另外,在頁面中我們通常會用到一些元件模板,因此在父子之間也會有對應的資料傳遞。

使用 name 屬性,作為模板的名字。然後在這裡面使用 is 屬性,聲明需要的使用的模板。

微信小程式頁頁間傳遞資料的幾種方法

然後將模板所需的data 傳入,如:

微信小程式頁頁間傳遞資料的幾種方法

傳入模板的除了變量,還可以是事件方法物件。例如,模板中的點擊事件,可以傳遞到使用模板的元素。

透過取得到頁面物件進行資料操作

這個方法的精髓,是透過取得到其他頁面的物件原型,然後透過原型方法setData 對目前物件管理的data 進行修改,範例如下:

微信小程式頁頁間傳遞資料的幾種方法

當跳到下一個頁面F 之後,假定在F 中有操作需要對E 中的資料有修改,則可以使用以下方法:

1微信小程式頁頁間傳遞資料的幾種方法

這個方法可以操作頁面堆疊裡面的頁面的數據,可以做到讓後一層頁面對上級頁面群的資料管理。

小結

在微信小程式中有以上並且不局限於以上幾種的方式進行頁間資料傳遞、交互,在實際應用中可以組合使用。 比如說:

  • 一些常數,可以交由 app.js 管理;需要持久化的量可以放在本地保存。

  • 涉及到下級頁面或模板元素的數據,可以透過傳入參數的方式傳入。

  • 後級頁面可以透過取得堆疊裡的頁面物件快速修改上級的資料。

在實際應用中結合使用,可以更好地管理小程式的資料。

推薦:《小程式開發教學

以上是微信小程式頁頁間傳遞資料的幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

歐易交易所app國內下載教程 歐易交易所app國內下載教程 Mar 21, 2025 pm 05:42 PM

本文提供國內安全下載歐易OKX App的詳細指南。由於國內應用商店限制,建議用戶通過歐易OKX官方網站下載App,或使用官網提供的二維碼掃描下載。下載過程中,務必核實官網地址,檢查應用權限,安裝後進行安全掃描,並啟用雙重驗證。 使用過程中,請遵守當地法律法規,使用安全網絡環境,保護賬戶安全,警惕詐騙,理性投資。 本文僅供參考,不構成投資建議,數字資產交易風險自負。

H5和小程序與APP的區別 H5和小程序與APP的區別 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要區別在於:技術架構:H5基於網頁技術,小程序和APP為獨立應用程序。體驗和功能:H5輕便易用,功能受限;小程序輕量級,交互性好;APP功能強大,體驗流暢。兼容性:H5跨平台兼容,小程序和APP受平台限制。開發成本:H5開發成本低,小程序中等,APP最高。適用場景:H5適合信息展示,小程序適合輕量化應用,APP適合複雜功能應用。

公司安全軟件導致應用無法運行?如何排查和解決? 公司安全軟件導致應用無法運行?如何排查和解決? Apr 19, 2025 pm 04:51 PM

公司安全軟件導致部分應用無法正常運行的排查與解決方法許多公司為了保障內部網絡安全,會部署安全軟件。 ...

H5頁面製作和微信小程序有什麼不同 H5頁面製作和微信小程序有什麼不同 Apr 05, 2025 pm 11:51 PM

H5更靈活,可定制性強,但需要嫻熟的技術;小程序上手快,維護便捷,但受限於微信框架。

公司安全軟件與應用衝突怎麼辦? HUES安全軟件導致常用軟件無法打開如何排查? 公司安全軟件與應用衝突怎麼辦? HUES安全軟件導致常用軟件無法打開如何排查? Apr 01, 2025 pm 10:48 PM

公司安全軟件與應用兼容性問題及排查方法許多企業為了保障內網安全,會安裝安全軟件。然而,安全軟件有時...

企業微信中的JS資源緩存問題如何解決? 企業微信中的JS資源緩存問題如何解決? Apr 04, 2025 pm 05:06 PM

企業微信的JS資源緩存問題探討在進行項目功能升級時,常常會遇到部分用戶未能成功升級的情況,尤其是在企�...

H5和小程序如何選擇 H5和小程序如何選擇 Apr 06, 2025 am 10:51 AM

H5和小程序的選擇取決於需求。對於跨平台、快速開發和高擴展性的應用,選擇H5;對於原生體驗、豐富功能和平台依附性的應用,選擇小程序。

幣安虛擬幣怎麼買進賣出詳細教程 幣安虛擬幣怎麼買進賣出詳細教程 Mar 18, 2025 pm 01:36 PM

本文提供2025年更新的幣安虛擬貨幣買賣簡明指南,詳細講解了在幣安平台上進行虛擬貨幣交易的操作步驟。指南涵蓋了法幣購買USDT、幣幣交易購買其他幣種(如BTC)以及賣出操作,包括市價交易和限價交易兩種方式。 此外,指南還特別提示了法幣交易的支付安全和網絡選擇等關鍵風險,幫助用戶安全、高效地進行幣安交易。 通過本文,您可以快速掌握在幣安平台上買賣虛擬貨幣的技巧,降低交易風險。

See all articles