微信小程序如何使用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 相关文章推荐
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 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
php5.5新数组函数array_column使用
2013/07/08 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php实现的验证码文件类实例
2015/06/18 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
jquery插件之easing使用
2010/08/19 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
授权委托书格式模板
2014/04/03 职场文书
学生请假条
2014/04/11 职场文书
竞选部长演讲稿
2014/04/26 职场文书
政府门卫岗位职责
2014/04/29 职场文书
经典团队口号
2014/06/06 职场文书
医学生求职自荐书
2014/06/12 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
班主任开场白
2015/06/01 职场文书
英语投诉信范文
2015/07/03 职场文书
电力培训学习心得体会
2016/01/11 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript