微信小程序----全局变量

全局变量的作用

在微信小程序开发中,会遇到一个很实际的应用场景,就是一个变量会在多个页面进行使用。


例如:
1. 在微信小程序开发中使用高德地图的微信小程序开发,其中key值就需要在多个页面使用;
2. 在微信小程序开发电商平台时同样,比如客服电话,就需要在多个页面使用。


在以上两种类似的场景中,开发者就需要使用全局变量,当然也有开发者说不能每个page页面都定义一个?如果客服电话改变,如果客服要求采用他的高德key,这个时候只需要修改全局,就能进行整个小程序的修改,如果每个page一个变量,将会在修改中花费大量的时间做低效的工作。所以可以看出全局变量在这里的作用就是提高开发效率!

如何定义全局变量

方法一:用APP定义全局变量

在app.js中的APP({})传入对象中定义一个全局属性globalData,作为保存全局变量的对象。

示例代码:

声明变量进行引入!


// 引入高德地图js
const amap = require('./src/js/amap-wx.js');
// 引入接口js
const urlList = require('./src/js/config.js');
// 引入wetoast插件js
const { WeToast } = require('./src/wetoast/wetoast.js');
// 全局变量高德地图key
const key = 'c290b7e016c85e8f279b2f80018c';
// 全局变量服务电话
const phone = '400-007-859';

进行全局变量的赋值!


App({globalData: {//全局变量amap: amap,key: key,phone: phone,urlList: urlList.urlList}
})

方法一全局变量的使用:


//在page页面引入app,同时声明变量,获得所需要的全局变量
const app = getApp();
const urlList = app.globalData.urlList;

方法二:用引入js的方法定义全局变量

在公用js文件夹中创建一个保存全局变量的js文件


实例:我在公用文件夹src下的js文件夹中创建的三个保存全局变量的文件:base64.js、config.js、data.js
创建全局变量js的位置
这三个文件作用:
1. base64.js保存背景图标转化的base64码
2. config.js保存request请求数据的路径
3. data.js 保存初次开发的模拟数据


示例代码:

let basePath = 'https://xxxxx.com';
let urlList = {goodsListUrl: basePath + '/goodsList',shopCartUrl: basePath + '/shopCart',...
}
module.exports = {urlList: urlList
}

使用方法:

// 引入接口js
const urlList = require('./src/js/config.js');
wx.request({url: urlList.urlList.goodsListUrl,data: {},success: res => {}
})

总结

其实两种方法都可以定义全局变量,那么在什么时候采用哪一种方法?我个人建议,在像高德地图的key值这种只需要单独定义的,可以采用方法一,方便、简洁、不用单独创建文件。在请求地址这种批量全局变量的定义时,采用方法二,有利于后期的查找和修改。两种方法结合,更有利于开发!

DEMO下载

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

转载于:https://www.cnblogs.com/linewman/p/9918449.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/267273.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux centos-6.5,Linux(CentOS 6.5)安装 mysql

linux下安装软件的方式很多,这里是使用简单而方便的yum来安装一、使用yum 安装mysql服务,客户端1、检查是否已经安装: yum list installed | grep mysql2、 yum list installed | grep MYSQL3、查询结果:4、这是我已经安装的mysq…

amcharts应用

查看选中的软件的下载量,通过amchart报表工具显示出软件日下载量,月下载量以及年下载量,下面简单介绍,amchart在struts2中的应用。 amCharts提供JavaScript/HTML5图表。一套包括串行(列,栏,线&a…

linux下makefile中cp,make与makefile 的理解

当我们写程序过程中存在多个文件之间有复杂的包含关系时,若修改了其中一个源文件,就重新编译所有文件,一般是不必要的,并且当文件很多时,就显得非常笨拙。所有包含该文件的文件需要重新编译,而其它无关系的…

keil用c语言怎么编辑器,用keil软件编写单片机程序的步骤

猜你感兴趣:新手教程:单片机的学习实践步骤运用单片机便是了解单片机硬件结构,以及内部资源的运用,在汇编或C语言中学会各种功用的初始化设置,以及完成各种功用的程序编制。 运用按钮输入信号,发光二极管显…

体重 年龄 性别 身高 预测鞋码_【新手扫盲】身高体重性别年龄身体素质影响玩滑板吗?...

很多新手在迈入滑板大门之前都会有诸多顾虑,以为滑板跟其他运动一样,门槛很高我想说,滑板是项自由友好的运动下到3岁小宝宝,上到60岁以上老人只要你想玩,那就可以参与进来没有任何因素能阻止你玩滑板1、你比他高吗&…

html5点击按钮出现弹窗 怎么实现_HTML5游戏开发过程中的二三事

文/ Luiu最近跟的一款项目是HTML5手游,在这个项目中遇到并解决了诸多问题,也学习到了很多项目开发过程中需要注意的事情。这个项目自立项到现在已经过了5个多月,如今项目研发已经过了早期的忙乱阶段,于是借此机会梳理下思绪&#…

HDU 2063 过山车【二分图最大匹配】

Problem DescriptionRPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了。可是,过山车的每一排只有两个座位,而且还有条不成文的规矩,就是每个女生必须找个个男生做partner和她同坐。但是,每个女孩都有…

科研入门之在web of science

ISI Web of Science是全球最大、覆盖学科最多的综合性学术信息资源,收录了自然科学、工程技术、生物医学等各个研究领域最具影响力的超过8700多种核心学术期刊。利用Web of Science丰富而强大的检索功能-普通检索、被引文献检索、化学结构检索,可以方便快…

手动生成 XML

2019独角兽企业重金招聘Python工程师标准>>> private void Button1_Click(object sender, System.EventArgs e) { //创建新的xml XmlDocument doc new XmlDocument(); doc.LoadXml("<company></company>"); //设置版本信息 XmlDeclaration x…

android 资源如何下沉,个推安卓手机报告: 华为一路领跑,OV下沉市场表现不俗

近日&#xff0c;国内专业的数据智能服务商个推(股票代码&#xff1a;每日互动 300766.sz)发布《 2019 年度安卓智能手机报告》&#xff0c;对华为、小米、OPPO、vivo、三星等国内主要智能手机品牌进行盘点。数据显示&#xff0c;华为手机 2019 年表现不俗&#xff0c;不仅以25…

ISA Server 2006 升级到 TMG2010

ISA Server的下个版本TMG2010已经发布有一段时间了&#xff0c;现在正在逐渐将原来的ISA Server 2006升级到TMG2010。由于TMG2010需要64位的CPU与Windows Server 2008操作系统&#xff0c;所以&#xff0c;如果原来的ISA Server 2006是安装在32位的CPU的服务器中&#xff0c;则…

nike附近门店查询_不止5折!200+入手Nike、adidas,比“11.11”还便宜!

此次劲浪体育的“劲享万购节”优惠折扣来的非常猛&#xff01;会长先把各种活动给大家整理一下这份《如何买更省钱的详细指南》大家赶紧拿好咯&#xff01;这次活动整体分为5大部分线下实体店劲浪官方微商城京东劲浪官方旗舰店会员积分翻倍兑换当现金直播尖货限时抢总结就是一句…

Android常用类库包介绍

为什么80%的码农都做不了架构师&#xff1f;>>> 在Android 类库中&#xff0c;各种包写成android.*的方式&#xff0c;重要包的介绍如下&#xff1a; android.app&#xff1a;提供高层的程序模型、提供基本的运行环境。 android.content&#xff1a;包含各种的对设…

fastdfs 吗 支持windows_主流开源文件存储系统-fastdfs是否支持windows?你可以选择minio...

首先答案是肯定的&#xff0c;fastdfs不支持windows。 其次建议你使用Minio一、引言一般来说文件存储花钱就选择阿里云oss、七牛云等产品&#xff0c;开源的话&#xff0c;目前开源的分布式文件存储系统非常多&#xff0c;上网一搜 "Ceph&#xff0c;GlusterFS,Sheepdog,L…

Android电视关闭的闪屏动画效果

老式电视机关闭的时候画面一闪消失的那个效果&#xff1a; 首先创建一个TVOffAnimation继承于Animation&#xff1a; 首先创建一个TVOffAnimation继承于Animation 然后在initialize里面设置一些参数import android.graphics.Matrix;import android.view.animation.Accelerat…

SocketServer源码学习(二)

SocketServer 中非常重要的两个基类就是&#xff1a;BaseServer 和 BaseRequestHandler在SocketServer 中也提供了对TCP以及UDP的高级封装&#xff0c;这次我们主要通过分析关于TCP的处理逻辑来对SocketServer模块进行一个很好的理解和学习 TCPServer TCPServer 继承了BaseServ…

430f149有几种封装类型_高速光调制器的发展与封装技术研究

共读好书汪冰 黄平 杨磊摘 要&#xff1a;文章分析了100 Gbps(以下简称100 G)以太网光通信光调制器及其封装的技术发展动向&#xff0c;对比分析了10 G/40 G/100 G高速光调制器及其封装的结构特点。通过对高速光调制原理的浅析&#xff0c;论述了40 G/100 G高速光调制器在100 …

vsftp账号_Linux入门-CentOS7安装vsftp

前言vsftpd是用于类Unix系统(包括Linux)的FTP服务器。那怎么搭建呢&#xff1f;请看下文在CentOS7 64位进行安装。为了调试顺利&#xff0c;关闭selinux&#xff0c;防火墙iptables一.yum安装vsftp# yum -y install vsftpd二.启动服务# systemctl start vsftpd.service三.配置文…

android n模拟器,BlueStacks推出Android N模拟器

原标题&#xff1a;BlueStacks推出Android N模拟器IT之家1月23日消息&#xff0c;相信有不少玩家都有过在电脑上玩手游的经历&#xff0c;打怪升级这类游戏在操作似乎还是交给键盘和鼠标比较高效&#xff0c;电脑端体验安卓游戏自然就要用到模拟器了&#xff0c;但是尴尬的是似…

为UIKeyboardTypeNumberPad增加自定义按键

在 iPhone 上面開發應用程式時, 在使用輸入鍵盤時, 或多或少都會遇到客制化鍵盤的問題, 這邊筆者以簡單的數字鍵盤來示範客制化的動作. 這部份我想網路上已經有不少 sample code , 但大部份基本上都是以 SDK 3.x 的版本去實作, 以"特定寫法"來實作客制化在 iOS4 會有…