在首页明细这里,通过相加后变化数据的支出部分,将他的数据动态的传递给另一个页面,麻烦用代码讲讲,因为支出总额要随下面增加的账单而变化,用全局变量能实现吗?
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
放在缓存里面,一个页面存,另一个页面取值
起始页面---开始
let userCode = "test";
wx.navigateTo({
url: ../home/home?userCode=${userCode}
})
起始页面---结束
跳转到的页面--开始
onLoad: function (options) {
console.log("瞧一瞧你拿到的值",options);
}
跳转到的页面--结束
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')
1.使用app.js中的全局变量,页面打开是show更新 页面数据
2.使用本地缓存 页面打开 show更新页面数据
3.如果还是不清楚,提供远程解答
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
});
}
},
微信小程序全局变量
https://blog.csdn.net/weixin_41012767/article/details/121976159