微信小程序详细讲解页面传值

在miniprogram > app.js 文件中设置，globalData对象就是存储全局变量的。

App({
    globalData: {
      hasLogin: false,
      openid: null
    },
    onLaunch: function () {
    }
})

2.全局变量的使用

在app.js文件中，直接使用，如：this.globalData.hasLogin

在其他非app.js文件中使用，需要先申明app变量，如：

const app = getApp()   console.log(app.globalData.hasLogin)

3.全局变量的修改

在app.js文件中：this.globalData.hasLogin = true

在其他非app.js文件中修改：

var app = getApp()
app.globalData.hasLogin = true

二、使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候初始化

// Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// pageB.js
...
Page({
  onLoad: function(option){ // option 可以接收传过来的值
    console.log(option.name + 'is' + option.gender)
  }
})

需要注意的问题：wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面 onLoad 只执行一次

假如在A页面有一个固定的值要传递到B页面，比如说一个固定的值id要传递给B

<navigator url="../index/pageB?id='12345678'">跳转b页面</navigator>

在事件中写入参数，当然如果是传多个参数的话就要在后面加 & （按得符号）

// 传入多个值这样传
goSsarch(e){
  let val = e.currentTarget.dataset.item.name
  wx.navigateTo({
    url: '/pages/detail/detail?val='+val, // 传入单个值
    url: '/pages/detail/detail?val='+val + '&id='+ 123, // 传多个值
    url:`/pages/detail/detail?val=${val}&id=123` // 磨板字符串
  })
}

二、或者使用本地缓存 Storage 相关

web:

存: localStorage.setItem(key, value)

取: localStorage.getItem(key)

小程序:

存: setStorageSync(key ,value) 是微信小程序同步缓存方法

取: getStorageSync(key) 是微信小程序同步缓存方法

wx.setStorage(Object object) 是微信小程序异步缓存方法

wx.getStorage(Object object) 是微信小程序异步缓存方法
以Sync 结尾同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。
异步就是不管保没保存成功,程序都会继续往下执行.同步是等保存成功了,才会执行下面的代码.
使用异步,性能会更好;而使用同步,数据会更安全
一般都使用同步，异步是为了用户体验的情况而选择，同步相对简单。

存储数据

  //  把数据 num++ 
  numAdd(e) {
    let shopObject = wx.getStorageSync('shopObject') // 将数据取出来操作
    shopObject.forEach(item => {
      if (item.goods_id == e.detail) {
        item.num++
      }
    })
    wx.setStorageSync('shopObject', shopObject) // 把修改完的数据再次存放本地
  },

拿数据

  // 接收数据可以这样玩
  data: {
    checkAll: wx.getStorageSync('checkAll'),
    address: wx.getStorageSync('address'),
  },

微信小程序详细讲解页面传值

猜你喜欢