開發 | 如何在微信小程序的頁面間傳遞數據?


我們在之前發布過小程序頁面傳值方法的簡單介紹,說明了在小程序開發中,兩種常見的頁面之間傳值方法。

本期,知曉程序(微信號 zxcx0101)為你帶來的是「倒數記日」小程序開發者帶來的,小程序開發中,有關頁面間數據傳遞的更多方法。


文 | 小日子先生

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

使用全局變量

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

在初始化代碼的時候,小程序會讀取一個 app.js 的文件,在這里我們可以定義我們所需要的全局變量。

//app.js ... App({ globalData : { foo : 'bar' } });

然后在頁面中,可以通過 getApp() 方法獲取到全局應用對象,可以對全局變量進行讀取並更改:

//page.js ... var app = getApp() var getFoo = app.globalData.foo app.globalData.foo = 'fun'

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

使用本地緩存

本地緩存是微信小程序提供的一個功能,可以將用戶產生的數據做本地的持久化,類似於 NoSQL,可以進行讀取和修改的操作。

那么在不同的頁面之間,如何利用它,進行數據的交互呢?

假設我們在 A 頁面保存了用戶的信息。

// pageA.js ... var developer = { name: 'raymond', gender: 'male' } wx.setStorageSync('developer', developer);

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

//pageB.js ... // Retrieve var developer = (wx.getStorageSync('developer') || []) // Update developer.name = 'Jiayang' wx.setStorageSync('developer', developer); // Delete wx.removeStorage({ key: 'developer' })

需要注意的是,在回到 A 頁面的時候,小程序需要重新讀取數據。這時候,可以選擇放在生命周期的 onShow 中對數據重新加載

父級往子級頁面(模板)的數據傳遞

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

pageC.js ... // Navigate wx.navigateTo({ url: '../pageD/pageD?name=raymond&gender=male', }) // Redirect wx.redirectTo({ url: '../pageD/pageD?name=raymond&gender=male', })

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

// pageD.js ... Page({ onLoad: function(option){ console.log(option.name + 'is' + option.gender) this.setData({ option: option }) } })

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

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

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

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

{{index}}: {{msg}}
Time: {{time}}

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

<template is="msgItem" data="{{...item}}"/>
Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } })

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

通過獲取到頁面對象進行數據操作

這個方法的精髓,是通過獲取到其他頁面的對象原型,然后通過原型方法 setData 對當前對象管理的 data 進行修改,示例如下:

//pageE.js ... Page({ data: { index: 1 } })

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

pageF.js
...
Page({
  changeIndexInE: function(){ var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; prevPage.setData({ index: 0 }) } })

這個方法可以操作頁面堆棧里面的頁面的數據,可以做到讓后一級頁面對上級頁面群的數據管理。

小結

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

  • 一些常量,可以交由 app.js 管理;需要持久化的量可以放在本地保存。
  • 涉及到下級頁面或者模板元素的數據,可以通過傳入參數的方式傳入。
  • 后級頁面可以通過獲取堆棧里的頁面對象快速修改上級的數據。

在實際應用中結合使用,可以更好地管理小程序的數據。

本文如有不周到之處,可以留言進行討論。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM