中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2021-01-30    分類: 微信小程序

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

使用全局變量

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

在初始化代碼的時候,小程序會讀取一個 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 頁面的時候,小程序需要重新讀取數據。這時候,可以選擇放在生命周期的父級往子級頁面(模板)的數據傳遞

我們通常會在頁面之間進行跳轉、重定向的操作。這時候,我們可以選擇將部分數據放在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.reLaunch 接口可以傳入參數。

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

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

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

然后將模板所需要的