微信小程序在JavaScript文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。如果希望在各个页面之间共同使用某些信息,并且可以对共享数据进行修改设置,以便于其他页面根据数据变化进行对应的调整,最好使用全局数据globalData。

  globalData在app.js文件中app()全局应用实例中:

  1. // app.js
  2. App({
  3. globalData: 1
  4. })

  由于它具有共享属性,对于它的设置和修改,需要分两方面来说明。

  第一,在app.js文件中,怎样设置和修改。设置其实跟在其他js文件中设置data值是一样的:

  1. //app.js
  2. App({
  3. globalData: {
  4. name: '张三',
  5. age: 18
  6. }
  7. })

  你可以根据自己的需求,设置任何数据。在app.js中读取globalData,使用this就可以了:

  1. //app.js
  2. App({
  3. globalData: {
  4. name: '张三',
  5. age: 18
  6. },
  7. onLoad: function(){
  8. console.log(this.globalData.name);
  9. }
  10. })

  同样的,如果我们需要在app.js中修改globalData,只需要给对应的变量重新赋值就可以了:

  1. //app.js
  2. App({
  3. globalData: {
  4. name: '张三',
  5. age: 18
  6. },
  7. onLoad: function(){
  8. this.globalData.name = '李四'
  9. }
  10. })

  第二,在其他页面读取以及修改globalData。不论是读取还是修改,首先需要在应用的页面js文件中,引用app()实例,所以在js文件中,第一句要写上这句:

  1. var app = getApp();

  然后,我们来看怎么获取globalData:

  1. //index.js
  2. var app = getApp();
  3. Page({
  4. onLoad: function() {
  5. console.log(app.globalData.name);
  6. }
  7. })

  下面看下在其他页面怎么设置或者修改globalData。这里需要用到全局函数 getApp()

  1. //index.js
  2. var app = getApp();
  3. Page({
  4. onLoad: function() {
  5. getApp().globalData.name = "王二麻子";
         getApp().globalData.favorite = "集邮";
  6. }
  7. })

  这样,就可以在index.js文件中,重新设置或者修改globalData的数据了。上面的例子,我们修改了globalData的name值,并且添加了一个集邮的爱好的属性。

  PS:这段时间,开发了一款微信小程序,因为平时H5开发,都是用本地缓存来存储一些共享的变量,所以开发的时候,翻看微信小程序的官方文档,看到有数据缓存的API,就直接用了,就在项目上线前做付款测试的时候(因为之前的测试环境不成熟,所以我把付款成功的测试放在了最后),结果付款成功后,显示微信的付款成功页面,我点击完成页面关闭了,付款成功的回调也触发了,也成功的进入到我想要去的订单信息展示页面了,由于这个页面需要依赖缓存里的某些信息作为接口参数,结果我发现接口报错,仔细查了下,参数为空,再查一下,缓存没了!!不知道为啥,也查了半天,没查到原因,就看到大家都说微信小程序别用缓存,有时候会莫名其妙的消失,坑多,然后我就吭哧吭哧的把用缓存共享的数据,都用globalData重写了一遍.....浪费了一些时间,因为自己掉坑儿里了,所以出坑特意写了这篇文字,分享下填坑的经验。

微信小程序 如何使用globalData的更多相关文章

  1. 微信小程序onLaunch修改globalData的值

    //app.js App({ onLaunch: function (options) { //设置场景值到缓存中: //wx.setStorageSync("scene", op ...

  2. 微信小程序全局数据globalData的使用问题

    如果在A页面设置全局属性,但在B页面无法使用的话,可能是这个问题: app.js globalData: { helpPage:0, }, A页面 A(e) { getApp().globalData ...

  3. 微信小程序 app.js globalData 赋值报错

    //success方法要用用success: res => {}的格式 success: res => { } //赋值报错 success:function(e){ } //报错内容: ...

  4. 微信小程序之页面传值(路由、页面栈、globalData、缓存)

    1. 通过url带参数传递 1.1 固定参数传递 例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: <!--pages/list/list.js--&g ...

  5. 微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法

    前段时间开发了一款微信小程序,运行了也几个月了,在index.js中的onLoad生命周期里获取app.js中onLaunch生命周期中在接口里动态设置的globalData一直没有问题,结果昨天就获 ...

  6. 微信小程序:页面全局参数(注意不是小程序的全局变量globalData)

    为什么要使用页面全局参数:方便使用数据. 由于总页数需要再另外的一个方法中使用,所以要把总页数变成一个页面全局参数.因为取数据使用this.xxx即可,中间不用加data,给页面全局参数赋值页方便,直 ...

  7. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  8. 微信小程序前端源码逻辑和工作流

    看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...

  9. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

随机推荐

  1. docker学习路线

    http://www.simapple.com/320.html DOCKER 官网 :https://docs.docker.com/docker-for-mac/

  2. poj 1410 Intersection 线段相交

    题目链接 题意 判断线段和矩形是否有交点(矩形的范围是四条边及内部). 思路 判断线段和矩形的四条边有无交点 && 线段是否在矩形内. 注意第二个条件. Code #include & ...

  3. 25深入理解C指针之---传递数组

    一.传递数组:将数组作为参数传入函数,或将数组作为数据当成是函数的返回值 1.定义:可以传入和传出数组 2.特征: 1).将数组作为参数传递给函数的本质是传递数组的地址,这种传递无需复制数组元素,所以 ...

  4. 使用 IntelliJ IDEA 开发一般 Java 应用程序时配置 Allatori 进行代码混淆

    使用 IntelliJ IDEA 开发一般 Java 应用程序时通过 Allatori 进行代码混淆非常容易配置,下面总结一下本人经验,介绍一下配置方法. 首先在 IDEA 的 Module 所在硬盘 ...

  5. Widows下利用OpenSSL生成证书

    1.下载OpenSSL的windows版本 32位:openssl-1.0.2a-i386-win32.zip 64位:openssl-1.0.2a-x64_86-win64.zip 下载之后解压即可 ...

  6. MySQL通用编程

    第一阶段:基础入门 第一章:关系模型 第二章:基本查询 第三章:复杂查询 第四章:权限控制 第五章:查询优化 第二阶段:模型设计 第六章:设计选择 第七章:函数依赖 第八章:分解算法 第九章:设计过程 ...

  7. CDOJ_327 BerOS file system

    原题地址:http://acm.uestc.edu.cn/#/problem/show/327 The new operating system BerOS has a nice feature. I ...

  8. python学习笔记之heapq内置模块

    heapq内置模块位于./Anaconda3/Lib/heapq.py,提供基于堆的优先排序算法 堆的逻辑结构就是完全二叉树,并且二叉树中父节点的值小于等于该节点的所有子节点的值.这种实现可以使用 h ...

  9. openfire Android学习(六)----总结

    Xmpp的一些方法整理到一个工具类中了 XmppConnection.java [java] view plaincopy [java] view plaincopy import java.io.B ...

  10. LINUX下GDB反汇编和调试

    Linux下的汇编与Windows汇编最大的不同就是第一个操作数是原操作数,第二个是目的操作数.而Windows下却是相反. 1. 基本操作指令 简单的操作数类型说明.一般有三种. (1)马上数操作数 ...