微信小程序如何使用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中DOM事件冒泡实例分析
Jun 13 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
element ui分页多选,翻页记忆的实例
Sep 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
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
python框架django基础指南
2016/09/08 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
python中几种自动微分库解析
2019/08/29 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
简单了解python列表和元组的区别
2020/05/14 Python
python中元组的用法整理
2020/06/15 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
高中同学会活动方案
2014/08/14 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
2014年小学工作总结
2014/11/26 职场文书
社区母亲节活动总结
2015/02/10 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript