微信小程序如何把一个页面的某个数据传到另一个页面去

Question

在首页明细这里，通过相加后变化数据的支出部分，将他的数据动态的传递给另一个页面，麻烦用代码讲讲，因为支出总额要随下面增加的账单而变化，用全局变量能实现吗？

Answer 1

Hi~ 少年我又带着不是最优解的案例来了。
简陋的效果:

粗糙的代码:
index/index.wxml

<view>总支出: {{totalExpenditure}} 元</view>
<view>支出条目</view>
<view wx:for="{{billFlow}}" wx:key="unique">
  {{item.content}} {{item.price}}元
</view>

index/index.js

const app = getApp()

Page({
  data: {
    totalExpenditure: 0,
    billFlow: []
  },
  onShow() {
    this.setData({
      totalExpenditure: app.totalExpenditure(),
      billFlow: app.billFlow
    })
  }
})

index2/index.wxml

<view>剩余预算: {{remainingBudget}}</view>
<view>本月预算: {{budget}}</view>
<view>本月支出: {{totalExpenditure}}</view>

<view bindtap="pay" wx:for="{{goods}}" wx:key="unique" data-price="{{item.price}}" data-content="{{item.content}}">买{{item.content}} {{item.price}} 元</view>

index2/index.js

const app = getApp()

Page({
  data: {
    totalExpenditure: 0,
    remainingBudget: 0,
    budget: 0,
    billFlow: [],
    goods: [
      {
        content: '棒棒糖',
        price: 1,
      },
      {
        content: '口香糖',
        price: 2,
      }
    ]
  },
  onShow() {
    this.setData({
      totalExpenditure: app.totalExpenditure(),
      billFlow: app.billFlow,
      budget: app.budget,
      remainingBudget: app.remainingBudget()
    })
  },
  pay(e) {
    const { price, content } = e.currentTarget.dataset;
    app.billFlow.push({
      content,
      price: -1 * price
    })
    this.onShow()
  }
})

app.js

App({
  // 预算
  budget: 100,
  // 账单流水
  billFlow: [
    {
      content: '餐饮',
      price: -73
    }
  ],
  // 总支出
  totalExpenditure() {
    return Math.abs(this.billFlow.filter(f => f.price < 0).reduce((t, i) => t + i.price, 0))
  },
  // 剩余预算 
  remainingBudget(){
    return this.budget - this.totalExpenditure();
  }
})

https://developers.weixin.qq.com/s/2gupefmd7SCi

Answer 2

• 这篇文章：微信小程序，判断页面来源，从一个页面返回并传递参数 也许有你想要的答案，你可以看看

Answer 3

放在缓存里面，一个页面存，另一个页面取值

Answer 4

起始页面---开始
let userCode = "test";
wx.navigateTo({
url: ../home/home?userCode=${userCode}
})
起始页面---结束
跳转到的页面--开始
onLoad: function (options) {
console.log("瞧一瞧你拿到的值",options);
}
跳转到的页面--结束

Answer 5

1、使用路由传递数据：
跳转时将数据拼接在URL后面；在另一个页面的onLoad()方法的参数中即可获取到传递的参数。
//home.js
wx.navigateTo({
     url: ../select/select?id=${id},
})
//select.js
onLoad(option){
    const id = option.id;
}

2、如果将对象类型的数据拼接在路径后面，到另一个页面获取时会发现是"[object,object]"，无法使用。
解决方法：利用JSON.stringify()和JSON.parse()。
//传递数据的页面
const selectData = JSON.stringify(this.data.selectData);
wx.redirectTo({
   url: ../order/order?selectData=${selectData}
})
//接收数据的页面
onLoad(option){
    const selectData = JSON.stringify(option.selectData);
}

3、如果数据中有 ? 等特殊字符，微信会做截取。
解决方法：利用 encodeURIComponent() 和 decodeURIComponent()。
//传递数据的页面
const selectData = encodeURIComponent(this.data.selectData);
wx.redirectTo({
   url: ../order/order?selectData=${selectData}
})
//接收数据的页面
onLoad(option){
    const selectData = decodeURIComponent(option.selectData);
}

4、如果使用wx.navigateBack()返回之前的页面，可以从页面路由栈中直接获取目标Page对象，将数据设置到目标页面的data中。
//将数据存到上一页面的data中
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; 
prevPage.setData({
     selectData: this.data.selectData
})
5、使用全局变量传递数据：
使用app.js中的globalData将数据存储为全局变量；在需要使用的页面通过getApp().globalData获取。
//app.js
App({
    globalData:{
        id: 1
    }
})
//select.js
const id =  getApp().globalData.id
6、使用本地存储传递数据：
//home.js
wx.setStorageSync('id', 1)
//select.js
wx.getStorageSync('id')

Answer 6

1.使用app.js中的全局变量,页面打开是show更新 页面数据
2.使用本地缓存 页面打开 show更新页面数据
3.如果还是不清楚,提供远程解答

Answer 7

app.js全局变量
wx.storage本地缓存
url地址参数传参在onLoad(option)获取
如果返回上一页获取上一页的数据onShow
onShow: function () {
// 传递参数
let pages = getCurrentPages();
let currPage = pages[pages.length - 1];
let inspect = currPage.data.inspect;
if (inspect) {
this.setData({
inspect
});
}
},

Answer 8

微信小程序全局变量
https://blog.csdn.net/weixin_41012767/article/details/121976159