微信小程序多页面共用一个数据globalData，并及时同步更新各页面的数据的做法

2024-07-05 16:03| 来源: 网络整理| 查看: 265

使用场景：比如有A、B、C 三个页面都有收货地址这么一个数据，这个收货地址的数据源是一样的，而这3个页面都可以独立修改收货地址。在其中一个页面修改收货地址后，另外两个页面的收货地址数据也要同步更新。

因为小程序里globalData存储的是全局对象，多个页面使用到的数据我们就放到globalData这里面了。

做法思路：

1.在A页面获取globalData 里的地址存在变量 a，在B页面获取globalData 里的地址存在变量 b；

2.当在A页面修改了地址后，重新赋值a=新地址，globalData.地址 = 新地址；

3.在打开B页面时，再重新获取最新的地址；

贴上代码：

1.需要先在app.js里定义全局变量：

App({ globalData: { //收货地址 receivingAddress:{ latitude:23.12463, //纬度 longitude:113.36199, //经度 name:'广州市天河区人民政府', address:'广东省广州市天河区天府路1号' } } })

2.在需要使用的页面index.js里面定义：（哪个页面需要就在哪个页面加上类如以下的代码即可）

const app = getApp(); Page({ data: { receivingAddress: app.globalData.receivingAddress }, onShow(){ //每次进入页面的时候，都重新获取收货地址数据（这样才能让页面的收货地址实时更新） this.setData({ receivingAddress: app.globalData.receivingAddress }) }, //选择地图（修改地址） chooseMap() { var that = this wx.chooseLocation({ success: function (res) { app.globalData.receivingAddress = { latitude: res.latitude, longitude: res.latitude, name: res.name, address: res.address } // 当前页面修改地址后，更新globalData的数据 that.setData({ receivingAddress: app.globalData.receivingAddress }) } }) })

到此就结束啦！是不是很简单呢~

【本文地址】

公司简介

联系我们