微信小程序之页面传值(路由、页面栈、globalData、缓存)

微信小程序之页面传值(路由、页面栈、globalData、缓存)

感谢下面博主分享的文章，稍作整理当做小程序学习笔记。
https://blog.csdn.net/qq_28685759/article/details/78292012
https://www.cnblogs.com/cckui/p/10212398.html

方式一：通过url带参数传递

• 固定参数传递：通过navigator标签的url属性，实现跳转和传递参数

  <navigator url="../detail/detail?id=1&name=名称">点此进入 detail</navigator>
  

• 在detail页面的onLoad方法中取值

  onLoad: function (options) { 
  	console.log(options.id,options.name)
  }
  

知识延伸：我们要传递的实体是object类型

• 那么我们需要先把实体转成string类型进行传递
• 在详情页面接受到在逆向转成实体

如下面这段示例：

//这里我们跳转详情界面
queryItemClick: function (e) {
    var that = this
    //拿到点击的index下标
    var index = e.currentTarget.dataset.index
    //将对象转为string
    var queryBean = JSON.stringify(that.data.queryList[index])
    wx.navigateTo({
      url: '../queryResult/queryResult?queryBean=' + queryBean,
    })
  }

这里我们用JSON.stringify()函数将实体转成string类型进行传递，那么我们在看看接收参数

/***重点内容*
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
    var queryBean = JSON.parse(options.queryBean);
    that.setData({
      queryBean: queryBean
    })
    //console.log(that.data.queryBean)
  }

方式二：从列表取值

方法：从列表页进入详情页时，需要传递列表被点击项目的 id 至详情页

• 在列表页通过data-id=’{{item.id}}'给各个项目绑定一个 id ；
• 在详情页通过 onload 拿到 id;

list页面

<view class="list">
  <view class='box' wx:for='{{list}}' wx:key='{{index}}' data-id='{{item.id}}' bindtap='goDetail'>
    <image src='{{item.img}}'></image>
    <view class='tip'>
      <text>{{item.title}}</text>
      <text class='price'>￥{{item.price}}</text>
    </view>
  </view>
</view>

// 进入详情页时 传递 id
goDetail (e) {
    // 通过e.currentTarget.dataset.属性，接收自定义属性  data-属性
    console.log(e.currentTarget.dataset.id),
    wx.navigateTo({
        url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
    })
}

详情页：detail.js文件，接收传递的参数id

onLoad: function (options) {
    console.log(options.id)
},

方式三：通过页面栈传值

getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，

第一个元素为首页，最后一个元素为当前页面

注意：

• 不要尝试修改页面栈，会导致路由以及页面状态错误
• 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成

页面栈应用场景：

例如，在首页 index 进入列表页 list，再进入详情页 detail 后，如果需要能从detail页一键返回到index页，并且传值给index页，这里就可以用页面栈来实现。

首页：

<!--index.wxml-->
<view>{{tag}}</view>

//index.js 
Page({
  data: {
    tag: ''
  }
})

详情页：返回上一页面或多级页面。可通过 getCurrentPages()获取当前的页面栈，决定需要返回几层。

<!-- pages/detail/detail.wxml-->
<view bindtap='backToIndex'> 点此返回首页 </view>

// pages/detail/detail.js
Page({
  data: {
    tag: '土豆'
  },
  
  backToIndex () {
    let pages = getCurrentPages() // 获取页面栈，pages为一个数组，里面存储了从首页到当前页的所有页面，如下图所示
    console.log(pages)
    let tag = this.data.tag // 拿到当前页的tag
    wx.navigateBack({
      delta: 2,
      success () {
        pages[0].setData({
          tag: tag    // 将当前detail页的tag赋值给首页index中的tag
        })
      }
    })
  },
})

方式四：通过globalData

在 app.js 中定义全局变量

globalData：{
     name: '姓名'
 }

在其他页面可以取到全局变量

let app = getApp();    

console.log(app.globalData.userInfo) // 姓名

方式五：通过 缓存 setStorage

web中的本地存储和小程序中的本地存储的区别

1. 写代码的方式不一样
   web:   localStorage.setItem("key","value")   localStorage.getItem("key")
   小程序：wx.setStorageSync("key","value")   wx.getStorageSync("key")
2. 存的时候   有没有做类型转换
   web: 不管存入的是什么类型的数据，最终都会先调用以下 toString()把数据变成字符串再存入
   小程序：不存在类型转换这个操作，存什么类型的数据，获取的时候就是什么类型。

• 添加缓存：单个密钥允许存储的最大数据长度为1MB，所有数据存储上限为10MB。

  // 存储信息到storage 
  // 异步存储
  set() {
      wx.setStorage({
          key: 'user',
          data: 'cck',
          success: ()=> {
              console.log('存储成功');
          }
      })
  },
  
  // 同步存储
  set() {
      try {
          wx.setStorageSync('user', 'cck')
      } catch (e) { }
  }
  

• 获取缓存：从本地缓存中异步获取指定key的内容

  // 异步
  wx.getStorage({
    key: 'user',
    success (res) {
      console.log(res.data)
    }
  })
  
  // 同步
  try {
    var value = wx.getStorageSync('user')
    if (value) {
      // Do something with return value
    }
  } catch (e) {
    // Do something when catch error
  }
  

• 移除缓存：从本地缓存中移除指定 key

  // 异步
  wx.removeStorage({
    key: 'user',
    success (res) {
      console.log(res.data)
    }
  })
  
  // 同步
  try {
    wx.removeStorageSync('user')
  } catch (e) {
    // Do something when catch error
  }
  

方式六：input 搜索传值

• bindinput: 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值
• bindconfirm: 点击完成按钮时触发，event.detail = {value: value}

<!--/pages/search/search.wxml-->
<view class='search'>
    <image src='/images/search.png'></image>
    <input placeholder='Find your favourite food' auto-focus bindinput="bindKeyInput" bindconfirm='goSearch' ></input>
    <text bindtap='goSearch'>搜索</text>
</view>

// pages/search/search.js 
Page({ 
  data: {
    inputValue: ''
  }, 

  bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value
    })
    console.log(this.data.inputValue)
  },

  // 进入搜索结果页 -> list
  goSearch() {
    let content = this.data.inputValue
    if (!content) {
      console.log('内容为空')
      return
    } 

    wx.navigateTo({
      url: `/pages/list/list?content=${content}`,
    })
  }
})