利用本地缓存进行页面间传递数据 (wx.getStorage,wx.setStorage)
以一个快递预约为例,两个页面index,logs。
将index中提交的数据在logs中显示出来。需要用到数据缓存API,具体操作如下:
关键代码:
异步存:
var orderInfo = event.detail.value;
wx.setStorage({
key: 'orderInfo',
data: orderInfo,
success: function (res) {
wx.navigateTo({
url: '../logs/logs'
})
}
})
}
异步取:
onLoad: function () {
var that = this;
wx.getStorage({
key: 'orderInfo',
success: function (res) {
that.setData({
orderInfo: res.data
})
}
})
}
一、index.wxml
<form bindsubmit="submitdate">
<view class="order">
<view class="date">
<input name="date" placeholder="请输入预定的日期....." placeholder-style="color:#eee" />
</view>
<view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
<view class="date">
<input name="username" placeholder="请输入预定的人....." placeholder-style="color:#eee" />
</view>
<view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
<view class="date">
<input name="telpho" placeholder="请输入预定电话....." placeholder-style="color:#eee" />
</view>
<view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
<view class="date">
<input name="address" placeholder="请输入预定的地址....." placeholder-style="color:#eee" />
</view>
<view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
<view class="date">
<input name="other" placeholder="请输入预定的其他信息....." placeholder-style="color:#eee" />
</view>
<view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
<button form-type="submit">确认提交</button>
</view>
</form>
index.js
index.js
//获取应用实例
var app = getApp()
Page({
data: {
},
//事件处理函数
submitdate: function (event) {
var orderInfo = event.detail.value;
wx.setStorage({
key: 'orderInfo',
data: orderInfo,
success: function (res) {
wx.navigateTo({
url: '../logs/logs'
})
}
})
}
})
二、logs.wxml
logs.wxml
<view class="content">
<view class="classname">预约信息</view>
<view class="classname">预约日期:
<text>{{orderInfo.date}}</text>
</view>
<view class="classname">联系人姓名:
<text>{{orderInfo.username}}</text>
</view>
<view class="classname">联系人电话:
<text>{{orderInfo.telpho}}</text>
</view>
<view class="classname">联系人地址:
<text>{{orderInfo.address}}</text>
</view>
<view class="classname">其他备注信息:
<text>{{orderInfo.other}}</text>
</view>
</view>
logs.js
Page({
data: {
orderInfo: {}
},
onLoad: function () {
var that = this;
wx.getStorage({
key: 'orderInfo',
success: function (res) {
that.setData({
orderInfo: res.data
})
}
})
}
})