如何在微信小程序的頁(yè)面間傳遞數(shù)據(jù)？

在微信小程序的開(kāi)發(fā)中，我們會(huì)經(jīng)常遇到頁(yè)面間數(shù)據(jù)傳遞或者相互影響的問(wèn)題。在實(shí)際的開(kāi)發(fā)過(guò)程中，可以通過(guò)以下幾種方法來(lái)實(shí)現(xiàn)。

使用全局變量

全局變量實(shí)際上是定義了一個(gè)全局的對(duì)象，并在每個(gè)頁(yè)面中引入。

在初始化代碼的時(shí)候，小程序會(huì)讀取一個(gè) app.js 的文件，在這里我們可以定義我們所需要的全局變量。

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

});

然后在頁(yè)面中，可以通過(guò) getApp() 方法獲取到全局應(yīng)用對(duì)象，可以對(duì)全局變量進(jìn)行讀取并更改：

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

由于 app.js 在項(xiàng)目中是用來(lái)做基礎(chǔ)配置的，因此不建議將很多變量放在這里配置。一般情況下會(huì)將一些持久化的常量配置在這里，對(duì)于經(jīng)常需要變動(dòng)的量不建議用這個(gè)方法。

使用本地緩存

本地緩存是微信小程序提供的一個(gè)功能，可以將用戶(hù)產(chǎn)生的數(shù)據(jù)做本地的持久化，類(lèi)似于 NoSQL，可以進(jìn)行讀取和修改的操作。

那么在不同的頁(yè)面之間，如何利用它，進(jìn)行數(shù)據(jù)的交互呢？

假設(shè)我們?cè)?A 頁(yè)面保存了用戶(hù)的信息。

// pageA.js ... var developer = {

  name: 'raymond',

  gender: 'male' }

wx.setStorageSync('developer', developer);

這樣做，這個(gè)數(shù)據(jù)就存在了本地。當(dāng)在 B 頁(yè)面需要使用的時(shí)候，可以直接的獲取到數(shù)據(jù)池中的數(shù)據(jù)，并進(jìn)行 CRUD 操作：

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

  key: 'developer' })

需要注意的是，在回到 A 頁(yè)面的時(shí)候，小程序需要重新讀取數(shù)據(jù)。這時(shí)候，可以選擇放在生命周期的父級(jí)往子級(jí)頁(yè)面（模板）的數(shù)據(jù)傳遞

我們通常會(huì)在頁(yè)面之間進(jìn)行跳轉(zhuǎn)、重定向的操作。這時(shí)候，我們可以選擇將部分?jǐn)?shù)據(jù)放在pageC.js ... // Navigate wx.navigateTo({ url: '../pageD/pageD?name=raymond&gender=male',

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

})

在 D 頁(yè)面中，我們可以這樣接收到到所傳進(jìn)來(lái)的參數(shù)：

// pageD.js ...

Page({

  onLoad: function(option){

    console.log(option.name + 'is' + option.gender)

    this.setData({ option: option })

  }

})

wx.navigateTo 微信新提供的 wx.reLaunch 接口可以傳入?yún)?shù)。

另外，在頁(yè)面中我們通常會(huì)用到一些組件模板，因此在父子之間也會(huì)有相應(yīng)的數(shù)據(jù)傳遞。

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

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

然后將模板所需要的<template is="msgItem" data="{{...item}}"/>

Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' }

  }

})

傳入模板的除了變量，還可以是事件方法對(duì)象。例如，模板中的點(diǎn)擊事件，可以傳遞到使用模板的元素中。

通過(guò)獲取到頁(yè)面對(duì)象進(jìn)行數(shù)據(jù)操作

這個(gè)方法的精髓，是通過(guò)獲取到其他頁(yè)面的對(duì)象原型，然后通過(guò)原型方法//pageE.js ... Page({ data: { index: 1 }

})

當(dāng)跳轉(zhuǎn)到下一個(gè)頁(yè)面 F 之后，假定在 F 中有操作需要對(duì) E 中的數(shù)據(jù)有修改，則可以使用以下方法：

pageF.js

...

Page({

  changeIndexInE: function(){ var pages = getCurrentPages(); var prevPage = pages[pages.length - 2];

    prevPage.setData({

      index: 0 })

  }

})

這個(gè)方法可以操作頁(yè)面堆棧里面的頁(yè)面的數(shù)據(jù)，可以做到讓后一級(jí)頁(yè)面對(duì)上級(jí)頁(yè)面群的數(shù)據(jù)管理。

小結(jié)

在微信小程序中有以上并且不局限于以上幾種的方式進(jìn)行頁(yè)面間數(shù)據(jù)傳遞、交互，在實(shí)際應(yīng)用中可以組合使用。比如說(shuō)：

●一些常量，可以交由●涉及到下級(jí)頁(yè)面或者模板元素的數(shù)據(jù)，可以通過(guò)傳入?yún)?shù)的方式傳入。

●后級(jí)頁(yè)面可以通過(guò)獲取堆棧里的頁(yè)面對(duì)象快速修改上級(jí)的數(shù)據(jù)。

在實(shí)際應(yīng)用中結(jié)合使用，可以更好地管理小程序的數(shù)據(jù)。

本文如有不周到之處，可以留言進(jìn)行討論。

當(dāng)前標(biāo)題：如何在微信小程序的頁(yè)面間傳遞數(shù)據(jù)？
URL鏈接：http://www.bm7419.com/news33/98283.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有微信小程序等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)