微信小程序之页面传值

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

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

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

在detail页面的onLoad方法中取值

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

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

如下面这段示例：

//这里我们跳转详情界面
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)
  }

 

方式二：从列表取值

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