微信小程序如何使用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的匿名函数小结
Dec 31 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue router demo详解
Oct 13 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
js+html实现点名系统功能
Nov 05 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 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
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
浅析Python中的多重继承
2015/04/28 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
厨师岗位职责
2013/11/12 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
教师考核评语
2014/04/28 职场文书
环境整治工作方案
2014/05/18 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis
Nginx配置根据url参数重定向
2022/04/11 Servers
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技
css弧边选项卡的项目实践
2023/05/07 HTML / CSS