微信小程序如何使用globalData的方法


Posted in Javascript onJune 06, 2019

微信小程序在JavaScript文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。如果希望在各个页面之间共同使用某些信息,并且可以对共享数据进行修改设置,以便于其他页面根据数据变化进行对应的调整,最好使用全局数据globalData。

globalData在app.js文件中app()全局应用实例中:

// app.js
App({
 globalData: 1
})

由于它具有共享属性,对于它的设置和修改,需要分两方面来说明。

第一,在app.js文件中,怎样设置和修改。设置其实跟在其他js文件中设置data值是一样的:

//app.js
App({
  globalData: {
    name: '张三',
    age: 18
  }
})

你可以根据自己的需求,设置任何数据。在app.js中读取globalData,使用this就可以了:

//app.js
App({
  globalData: {
    name: '张三',
    age: 18
  },
  onLoad: function(){
    console.log(this.globalData.name);
  }
})

同样的,如果我们需要在app.js中修改globalData,只需要给对应的变量重新赋值就可以了:

//app.js
App({
  globalData: {
    name: '张三',
    age: 18
  },
  onLoad: function(){
    this.globalData.name = '李四'
  }
})

第二,在其他页面读取以及修改globalData。不论是读取还是修改,首先需要在应用的页面js文件中,引用app()实例,所以在js文件中,第一句要写上这句:

var app = getApp();

然后,我们来看怎么获取globalData:

//index.js
var app = getApp();
Page({
  onLoad: function() {
    console.log(app.globalData.name);
  }
})

下面看下在其他页面怎么设置或者修改globalData。这里需要用到全局函数 getApp():

//index.js
var app = getApp();
Page({
  onLoad: function() {
    getApp().globalData.name = "王二麻子";

 getApp().globalData.favorite = "集邮";
  }
})

这样,就可以在index.js文件中,重新设置或者修改globalData的数据了。上面的例子,我们修改了globalData的name值,并且添加了一个集邮的爱好的属性。

PS:这段时间,开发了一款微信小程序,因为平时H5开发,都是用本地缓存来存储一些共享的变量,所以开发的时候,翻看微信小程序的官方文档,看到有数据缓存的API,就直接用了,就在项目上线前做付款测试的时候(因为之前的测试环境不成熟,所以我把付款成功的测试放在了最后),结果付款成功后,显示微信的付款成功页面,我点击完成页面关闭了,付款成功的回调也触发了,也成功的进入到我想要去的订单信息展示页面了,由于这个页面需要依赖缓存里的某些信息作为接口参数,结果我发现接口报错,仔细查了下,参数为空,再查一下,缓存没了!!不知道为啥,也查了半天,没查到原因,就看到大家都说微信小程序别用缓存,有时候会莫名其妙的消失,坑多,然后我就吭哧吭哧的把用缓存共享的数据,都用globalData重写了一遍.....浪费了一些时间,因为自己掉坑儿里了,所以出坑特意写了这篇文字,分享下填坑的经验。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
AngularJS快速入门
Apr 02 Javascript
JS简单随机数生成方法
Sep 05 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
JavaScript WeakMap使用详解
Feb 05 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 #Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 #Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
JS根据json数组多个字段排序及json数组常用操作
Jun 06 #Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 #Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 #Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 #Javascript
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
杏林同学录(四)
2006/10/09 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
PHP7 标准库修改
2021/03/09 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python continue继续循环用法总结
2018/06/10 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
python利用opencv实现颜色检测
2021/02/23 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
银行求职信模板
2015/03/20 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript