VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 微信小程序如何使用globalData的方法

    微信小程序在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重写了一遍.....浪费了一些时间,因为自己掉坑儿里了,所以出坑特意写了这篇文字,分享下填坑的经验。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • 微信小程序全局变量GLOBALDATA的定义和调用过程解析
    • 微信小程序在其他页面监听globalData中值的变化
    • 浅谈小程序globalData的那些事儿

    广而告之:
    热门推荐:
    简单的JS控制button颜色随点击更改的实现方法

    先上效果图: 默认“今日”是选中状态,是行内样式: <button type="button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;">今日</button> 上面的日期都是点击才会切换颜色: 点击其它颜色,“今日”颜色更换成灰色 再次点击“今日”,···

    MySQL5.6.17数据库安装 如何配置My.ini文件

    最近在做项目开发时用到了MySql数据库,在看了一些有关MySql的文章后,很快就上手使用了。在使用的过程中还是出现了一些问题,因为使用的是绿色免安装版的MySql所以在配置的时候出现了一些问题,该篇文章就主要针对MySql绿色版的配置及其使用进行讨论。 一、MySql概述   MySq···

    vue中路由验证和相应拦截的使用详解

    在web项目中,经常需要根据是否登录进行路由的验证和相应的拦截。 首先,在vuex里的store.js里边写一个存放登录状态,代码如下 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: false }, mutations: { // ···

    js代码规范之Eslint安装与配置详解

    什么是 ESLint ESLint(中文站点)是一个开源的 JavaScript 代码检查工具,使用 Node.js 编写,由 Nicholas C. Zakas 于 2013 年 6 月创建。ESLint 的初衷是为了让程序员可以创建自己的检测规则,使其可以在编码的过程中发现问题而不是在执行的过程中。ESLint 的所有规则都被···

    ThinkPHP5.1框架数据库链接和增删改查操作示例

    本文实例讲述了ThinkPHP5.1框架数据库链接和增删改查操作。分享给大家供大家参考,具体如下: 一、数据库的链接方式 <?php namespace app\index\controller; use think\Db; class Demo { //1、全局配置 config/database.php配置 public function dbTest() { return Db···

    php单文件版在线代码编辑器

    密码加密方式:  * md5(自设密码+$ace) //$ace为cdn镜像地址 使用方法:  * 1.确认 $pwd 变量值为 false, 上传本文件到PHP空间并访问  * 2.第一次访问提示设置密码,设置密码并牢记  * 3.使用第一次设置的密码登录后,默认编辑的是本php文件,  * 4.本文···

    PHP利用超级全局变量$

    利用$_POST超级全局变量接收表单的数据,然后利用echo输出到页面。 下面是代码: <!doctype html> <html> <head> <title>利用超级全局变量$_POST接收表单</title> <meta http-equiv="content-type" contnet="text/html" charset="utf-8"/>···

    php中使用$

    问题说起$_REQUEST,大家都知道的是它是$_GET和$_POST的集合。但是如果你有心的话,查一下文档,会看到: $_REQUEST An associative array that by default contains the contents of $_GET, $_POST and $_COOKIE. 这里说$_REQUEST默认是$_GET, $_POST, $_COOKIE的集合,···

    漂亮样式表在XHTML+CSS网页制作中的应用

    这是一篇很久以前的文章了,现在看来,其中的思想很值得大家学习,在jb51.net学习案例的同时,不仿学习一些理论的知识,对您知识的突破会很有帮助。大家加油!   自从看了Zeldman先生的力作“Designing with Web Standards”中文版为《网站重构》(第2版)···

    JS实现页面内跳转的简单代码

    使用js($.ajax中)实现页面内跳转(即:描点平滑跳转)的方法(aa为跳转目的标签的id):   在网络上有很多资料所说的:animate方法我试了并不好使,不知道是啥原因,欢迎大家指正,附上网络方法: var oneTop = $("#aa").offset().top; jQuery("html", "body").animate({ s···