微信小程序如何使用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操作
Mar 24 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
jquery手风琴特效插件
Feb 04 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
easyui validatebox验证
Apr 29 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 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 数组入门教程小结
2009/05/20 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python实现证件照换底功能
2019/08/20 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
C语言笔试题回忆
2015/04/02 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
赔偿协议书范本
2014/09/12 职场文书
办理护照工作证明
2014/10/10 职场文书
冰峪沟导游词
2015/02/09 职场文书
大学生个人学习总结
2015/02/15 职场文书
作息时间调整通知
2015/04/22 职场文书
孟佩杰观后感
2015/06/17 职场文书
Redis入门教程详解
2021/08/30 Redis
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
Java版 简易五子棋小游戏
2022/05/04 Java/Android