小程序本地存储传参接参

A页面带参跳tabbar页面

页面跳tabbar页面时最好用存储本地的方式传接
然后再把参传进去跳
当要跳其他页面可以用navigateTo来进行跳
上官方

因为官方不支持跳的时候带参
所以我们可以使用缓存存储的形式来进行跳转带参
wx.setStorage存
wx.getStorage取

效果图

代码

A页面
wxss
wxml

<view wx:for="{{list}}" wx:key="id" class="main" >
  <view >书名\t\t{{item.course_name}}</view>
  <view>作者\t\t{{item.autor}}</view> 
  <view bindtap="addnext" data-name="{{item.college}}">简介\t\t{{item.college}}</view> 
</view>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
        "id": 1000,
        "course_name": "马连白米且",
        "autor": "袁明",
        "college": "金并即总变史",
        "category_Id": 2
      },
      {
        "id": 1001,
        "course_name": "公拉农题队始果动",
        "autor": "高丽",
        "college": "先了队叫及便",
        "category_Id": 2
      }
    ]
  },
// 点击时获取点击时的状态
addnext(e){
  console.log(e)
  var {name}=e.currentTarget.dataset
  wx.setStorage({
    key:"item.category_Id",
    data:name//把值存起
  })
  //当要传值多个 添加多个 以下写法
  //wx.setStorage({  })
  //wx.setStorage({  })
  //wx.setStorage({  })
  wx.reLaunch({
    url: '/pages/3/3',//因为我们用本地存储的方式 所以直接在另一个页面使用这个存的值，
    //跳转不用加参数了
})
},


})

B页面(tabbar页面)
wxml

<view>
        <view>{{usename}}</view>
</view>

js

// pages/3/3.js
Page({

        /**
         * 页面的初始数据
         */
        data: {
                usename:'',
        },
      
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
                var that=this
                wx.getStorage({//获取本地缓存
                        key:"item.category_Id",
                        success:function(options){
                         that.setData({
                            usename:options.data//获取上个页面存的值,options后跟的是data
                            //data代表值
                          })
                         }});
        }
})

同页面不同页面之间的本地存储传参接参

需求
指在相同页面的不同接口，
比如a的请求获取到ID的值，然后b的请求也要得到a请求时获取的ID值。
这个时候我们可以把a的请求得到的ID值以本地存储的方式存下，
然后b的请求在使用时可以取a请求存下来的值。

需求:

在同页面当中请求数据
a请求的数据与b请求的数据有关联
b请求的数据的参数需是a请求的参数的值 比如需要id 与title 
如下所示

需求
在不同页面直接也可以进行传接 和同页面的接收是一样的

效果图

代码

wxml

<view>
        <!-- A页面 -->
        <view class="title" wx:for="{{list}}" wx:key="id" data-id="{{item.id}}"  data-title="{{item.title}}" bindtap="btnbutton">
                <view>序号{{item.id}}</view>
                <view>名称{{item.title}}</view>
        </view>
        <!-- B页面要用到A页面的数据 -->
        <view></view>
        <view></view>
</view>

wxss

.title{
  width: 80%;
  text-align: center;
  margin: 0 auto;
  border: 1px solid red;
  margin-bottom: 10px;
}

js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    currindex: 0, //定义一个数据用来接收显示的值
    list: [{
        title: '1号大棚',
        id: 1,
        src: '../../img/icon/index/product/label_brain.png',
      },
      {
        title: '2号大棚',
        id: 2,
      },
      {
        title: '3号大棚',
        id: 3,
      }, {
        title: '4号大棚',
        id: 4,
      }, {
        title: '5号大棚',
        id: 5,
      }
    ],
  },
  //点击获取值
  btnbutton(e) {
    console.log(e)
    let {
      id
    } = e.currentTarget.dataset;
    let {
      title
    } = e.currentTarget.dataset;
    //  把数据存起来 存入对应的ID title
    wx.setStorage({
      key: "id",
      data: id,
    })
    wx.setStorage({
      key: "title",
      data: title,
    })
    this.setData({
      currindex: id,
      currindex: title,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 取值 这里请求的参数需要上面请求的参数对应
    var id = wx.getStorageSync('id')
    var title = wx.getStorageSync('title')
    wx.getStorageSync({
      key: 'id',
    })
    wx.getStorageSync({
      key: 'title',
    })
    console.log(id)
    console.log(title)
    wx.request({
      url: 'http://8000?id='+id+'&title='+title,
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

不同页面

不同页面的效果与同页面的实现方法是一样的

不同页面与同页面实现的效果一样
都是存取