微信小程序全局变量(globalData)和缓存(StorageSync)的区别和用法

globalData和storage的区别

一、app.globalData 是全局变量,下次进入的时候,就要重新获取,一般用于:

1、保存一些可能涉及安全类的数据,例如资源类,每次需要很准确的,就建议用全局变量。

2、全局变量每次关闭小程序重新打开的时候,都会进行初始化更新。

二、缓存(StorageSync)本地存储,storage 更像是本地的数据库,可以保存更久,一般用于:

1、小程序中的本地存储有同步功能,可用于保存用户信息(用户登录后的一些基本信息)

2、缓存的更新需要使用setStorageSync方法。

globalData的用法

app.js中

app.globalData初始化数据,在app.js中,入口js中,

App({
    onLaunch: function() {
    },
    onShow: function(options) {
    },
    onHide: function() {},
    getUserInfo: function(cb) {},
    globalData: {
        changeshop: null
    }
})

app.globalData 存储数据

const app = getApp();
//缓存全局保存
app.globalData.changeshop = changeshop;

在需要使用的地方

const app = getApp()
let changeshop = app.globalData.changeshop;
if (changeshop) {
    self.setData({
        addrs: changeshop
    });
}

StorageSync的用法

1、存入缓存
var addressList= wx.setStorageSync(key,value)

2、取出缓存

var addressList= wx.getStorageSync(key)

3、清除缓存

wx.removeStorageSync(key)

4、清除所有缓存

wx.clearStorageSync()

目前需要实现的是小程序首页在今日最右边放隐藏/显示摘要开关,只显示标题
image.png
我第一想法是后端写一个接口,来控制这里显示/隐藏摘要,后面发现其实用StorageSync就能实现了。

这里的swich的样式需要改一下,小程序自带的有点丑,而且有点大,样式如下:
app.wxss

/*swtich整体以及true背景色*/
.wx-switch-input{
  width:80rpx !important;
  height:40rpx !important;
  background: #43A0E9 !important;
  border: #43A0E9 !important;
}
/*开关为false背景样式)*/
.wx-switch-input::before{
  width:82rpx !important;
  height: 40rpx !important;
  background: #F3F3F3 !important;
  border: #F3F3F3 !important;
}
/*中间小球*/
.wx-switch-input::after{
  width: 40rpx !important;
  height: 40rpx !important;
}

wxml

<view class="date-box">
   <view class="f50">今日</view>
   <view>
     <text class="f14">隐藏摘要</text>
     <switch class="ml5" checked="{{isChecked}}" bindchange="changeSwitch"/>
   </view>
</view>

js

const app = getApp()
Component({
  data: {
    isChecked: false
  },
  methods: {
    getSwitch(){
      let isCheck = wx.getStorageSync("isChecked") //取出缓存中的isChecked
      if(isCheck){
        this.setData({
          isChecked: isCheck
        })
      }
    },
    changeSwitch(){
      this.setData({
        isChecked: !this.data.isChecked
      })
      wx.setStorageSync('isChecked', this.data.isChecked) //将isChecked存入缓存
    }
  }
})
  • 13
    点赞
  • 69
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
微信小程序中的全局变量是在App.js文件中设置的,通过globalData对象来存储全局变量的值。在这个对象中,可以定义和存储需要在整个小程序中使用的变量。例如,可以定义一个名为hasLogin的全局变量,并设置初始值为false,还可以定义一个名为openid的全局变量,并初始化为null。 全局变量的使用可以在小程序的任何页面中进行。通过在页面中引入App.js文件,并使用`getApp()`方法获取到App实例,就可以访问和使用全局变量了。例如,可以通过`getApp().globalData.hasLogin`来获取或修改全局变量的值。 除了使用微信小程序原生的方式设置和使用全局变量外,还可以使用其他框架或工具来实现全局状态管理,如uni-app可以使用Vuex来定义和管理全局变量。通过在Vuex中定义全局变量的状态,并在需要使用的页面中引入并使用对应的状态值,可以实现全局变量的共享和修改。 总结起来,微信小程序全局变量是通过在App.js文件中设置globalData对象来存储的,可以在整个小程序中共享和使用。具体的使用方式可以根据需求选择原生方式或使用框架提供的方法来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [微信小程序 全局变量](https://blog.csdn.net/JxufeCarol/article/details/117735950)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [wx小程序、uni-app全局变量](https://blog.csdn.net/hbiao68/article/details/102898031)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值