当前位置:   article > 正文

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

wx.getstorage

一、全局变量的设置

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

  1. App({
  2.   globalData: {
  3.     hasLogin: false,
  4.     openid: null
  5.   },
  6.   onLaunch: function () {
  7.   }
  8. })

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文件中修改:

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

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

  1. // Navigate
  2. wx.navigateTo({
  3.  url: '../pageD/pageD?name=raymond&gender=male',
  4. })
  5. // Redirect
  6. wx.redirectTo({
  7.  url: '../pageD/pageD?name=raymond&gender=male',
  8. })
  9. // pageB.js
  10. ...
  11. Page({
  12.  onLoad: function(option){ // option 可以接收传过来的值
  13.    console.log(option.name + 'is' + option.gender)
  14. }
  15. })

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

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

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

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

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

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

web:

  • 存: localStorage.setItem(key, value)

  • 取: localStorage.getItem(key)

小程序:

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

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

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

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

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

存储数据

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

拿数据

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/458646
推荐阅读
相关标签
  

闽ICP备14008679号