微信小程序 使用页面栈 修改上一个页面的data数据

本文介绍了微信小程序中页面A到页面B数据变化后,如何将数据同步回页面A的方法。包括使用本地缓存、全局变量及页面栈实现数据传递,重点讲解了利用页面栈进行数据同步的细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微信小程序中从一个页面A进入一个页面B,如果页面B的数据有改变,再返回页面A的时候需要把数据同步到页面A。

一般的方法有:

1. 使用本地缓存 wx.setStorage() 和 wx.getStorage()

// 页面B
wx.setStorage({
  key: "name",
  data: "mossbaoo"
})
// 页面A
wx.getStorage({
  key: 'name',
  success (res) {
    console.log(res.data)
  }
})

2. 使用app.js的全局变量

// 页面B
getApp().globalData.name = 'mossbaoo';
// 页面A
console.log(getApp().globalData.name)

以上两种方法,不仅可以用于返回上一页时更新数据,它们是全局通用的;但是,有些数据也就仅用于两个页面间的数据同步,如果使用全局来存储的话,就会有反作用了,一是耗内存耗性能,二是不利于后期维护。

那么,接下来介绍的是怎么使用页面栈去实现:

首先,可以先到微信小程序官方文档了解一下页面路由:《页面路由》

获取当前页面栈的实例可以通过 getCurrentPages() 函数,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意:

  1. 不要尝试修改页面栈,会导致路由以及页面状态错误
  2. 不要在 App.onLaunch 的时候调用 getCurrentPages(),此时page还没有生成。

以下是页面栈的使用栗子:

// 页面A
data: {
  name: ''
},
changeDataPageA(name){
  this.setData({
    name: name
  })
}
// 页面B
changeDataPageB() {
  // 获取页面栈
  var pages = getCurrentPages();
  var currPage = pages[pages.length - 1]; // 当前页
  var prevPage = pages[pages.length - 2]; // 上一个页面
  var data = prevPage.data // 获取上一页data里的数据
  // 如果存在上一页
  if(prevPage){
    // 可以调用上一页的函数
    prevPage.changeDataPageA('mossbaoo');
    // 可以修改上一页的数据
    prevPage.setData({
      name: 'mossbaoo'
    })
    // 返回上一页
    wx.navigateBack();
  }
}

这样就可以实现数据传递给上一个页面,要注意页面页面A必须使用 wx.navigateTo() 跳转到下一页面B,不能使用wx.redirectTo等其它的跳转方式,这样会关闭上一个页面,导致页面B无法获取上一页的Page实例。

 

### 微信小程序页面嵌套与包含的实现方法 在微信小程序中,“一个页面包含另一个页面”的概念通常可以通过以下几种方式实现,这些方式涵盖了组件化设计、模板复用以及条件渲染等内容。 --- #### 1. **使用自定义组件** 微信小程序提供了强大的自定义组件功能,允许开发者将常用的功能封装为可重用的模块。通过这种方式,可以在一个页面中引入并展示其他页面的内容。 ##### 创建自定义组件 首先,在项目的 `components` 文件夹下创建一个新的组件文件夹(如 `subpage`),并在其中编写 WXML 和 WXSS 文件。 ```wxml <!-- components/subpage/subpage.wxml --> <view class="subpage"> 这是被包含的子页面内容。 </view> ``` 然后注册该组件: ```json { "component": true, "usingComponents": {} } ``` 最后,在父页面中引入这个组件: ```wxml <!-- pages/mainPage/mainPage.wxml --> <import src="../../components/subpage/subpage.wxml"/> <template is="subpage"></template> <!-- 或者直接使用 component 标签 --> <subpage></subpage> ``` 这种方法非常适合需要频繁重复使用的 UI 片段或逻辑块[^5]。 --- #### 2. **利用模板(Template)进行内容复用** 如果只是想简单地共享一些静态 HTML 结构,而不是完整的交互逻辑,可以借助模板来完成这一任务。 ##### 定义模板 在一个页面内定义一段通用的代码片段作为模板: ```wxml <!-- pages/mainPage/mainPage.wxml --> <template name="sharedContent"> <view>这是共享的部分。</view> </template> ``` ##### 引入模板 在同一页面或其他页面中引用已定义好的模板: ```wxml <template is="sharedContent"></template> ``` 虽然这种方法较为轻量级,但它缺乏动态性和灵活性,因此更适合处理简单的视觉样式复制工作[^6]。 --- #### 3. **通过网络请求加载远程数据** 有时所谓的“包含”实际上是指从服务端拉取额外的数据,并将其填充到现有界面上。此时并不涉及到真正的物理页面嵌套,而是基于 JSON 数据更新 DOM 元素的过程。 假设我们有一个接口 `/api/getSubPageData` 返回如下格式的结果: ```json [ {"title":"新闻标题一","content":"正文内容"}, {"title":"新闻标题二","content":"更多详情..."} ] ``` 那么可以在前端发起 GET 请求获取上述信息后绑定到视图层变量上: ```javascript // pages/mainPage/mainPage.js Page({ data:{ subPages:[] }, onLoad:function(){ var that = this; wx.request({ url:'https://example.com/api/getSubPageData', success(res){ that.setData({subPages:res.data}) } }) } }) ``` 接着修改对应的 wxml 文件以适应新的数据源结构: ```html <block wx:for="{{subPages}}" wx:key="index"> <text>{{item.title}}</text><br/> <paragraph>{{item.content}}</paragraph><hr/> </block> ``` 以上步骤展示了如何模拟多页效果却只维护单一入口的技术路线[^7]。 --- #### 4. **结合 iframe 嵌入 H5 页面** 尽管严格意义上讲这不是纯粹意义上的小程序内部操作,但在某些特殊情况下确实有必要混合使用两种技术的优势互补特性。正如之前提到过的那样,借助 `<web-view>` 组件能够轻松达成目的: ```wxml <web-view src="http://www.example.org/embedded.html"></web-view> ``` 不过值得注意的是,出于安全考量并非所有的网页都适合作为此种用途的选择标准之一便是对方站点是否开放 CORS 支持等等因素均需提前确认清楚才行[^8]。 --- ### 总结 综上所述,针对不同的业务需求可以选择相应的解决方案:如果是追求极致效率的话推荐采用组件化的思路;而对于那些只需要偶尔借用一点外观样式的场合则完全可以依靠内置指令搞定一切; 当然也不排除特殊情况下的跨界融合尝试比如加入第三方库之类的扩展玩法等待探索发现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mossbaoo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值