微信小程序详细讲解页面传值,globalData,wx.navigateTo,wx.getStorageSync,setStorageSync 区别、页面跳转传递多参数

一、全局变量的设置

在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'),
  },

  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有两把刷子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值