微信小程序开发-页面数据传递（getStorage,setStorage)

以一个快递预约为例，两个页面index,logs。将index中提交的数据在logs中显示出来。需要用到数据缓存API，具体操作如下：

index.wxml

<!--index.wxml-->
<view class="content">
  <view class="common">
    <view class="hr">
      <text>快递预约</text>
    </view>
  <form bindsubmit="submitdate">
    <view class="order">
      <view class="date">
        <image src="/images/date.png"> </image>
          <input name="date" placeholder="请输入预定的日期....." placeholder-style="color:#eee" />
      </view>
      <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
      <view class="date">
        <image src="/images/person.png"></image>
          <input name="username" placeholder="请输入预定的人....." placeholder-style="color:#eee" />
      </view>
      <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
           <view class="date">
        <image src="/images/phone.png"></image>
          <input name="telpho" placeholder="请输入预定电话....." placeholder-style="color:#eee" />
      </view>
      <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
      <view class="date">
        <image src="/images/position.png"> </image>
          <input name="address" placeholder="请输入预定的地址....." placeholder-style="color:#eee" />
      </view>
      <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
      <view class="date">
        <image src="/images/info.png"> </image>
          <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>
  </view>
  </view>

index.wxss

   /**index.wxss**/
page{
  height:100%;
}
.content{
  width:100%;
  height:100%;
  background: #f2f2f2;
  font-family: "宋体";
}
.common{
  position: relative;
  padding:40rpx;
  font-size:28rpx;
  font-family: "微软雅黑";
}
.hr
{
  height:1px;
  background: #cecece;
}
.hr text{
  position:absolute;
  width:200rpx;
  text-align:center;
  background: #eeeeee;
  left:37%;
  top:20rpx;
}
.order{
margin-top:40rpx;
background: #fff;
padding:20rpx;
}
.order image{
  width:32px;
  height:38px;
}
.date{
  display:flex;
  align-items:center;
  font-family: "微软雅黑";
  font-size:40rpx;
  color:#448ef3;
}
.date input{
  padding-left:10rpx;
}
.order button{
  background: #448ef3;
  color:#fff;
}

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.wxss

.content{
  padding:20rpx;
}
.classname{
  margin-top:20rpx;
}

logs.js

Page({
  data: {
    orderInfo:{}
  },
  onLoad: function () {
    var that=this;
    wx.getStorage({
      key:'orderInfo',
      success:function(res){
        that.setData({
          orderInfo:res.data
        })
      }
    })
}
})

结束。具体数据缓存API用法，参考https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html#wxclearstoragesync