微信小程序如何使用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 来操作字符串(一些字符串函数)
Feb 15 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
解读ES6中class关键字
Nov 20 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php5数字型字符串加解密代码
2008/04/24 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python字典get()方法用法分析
2015/04/17 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python中is与==判断的区别
2017/03/28 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
药品采购员岗位职责
2014/02/08 职场文书
财务内勤岗位职责
2014/04/17 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
活动总结书
2014/05/08 职场文书
建筑结构施工求职信
2014/07/11 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
检讨书范文
2015/01/27 职场文书
同学聚会邀请函
2015/01/30 职场文书
避暑山庄导游词
2015/02/04 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫