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

全局变量的作用

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


例如:
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,Linux系统目录实时同步

1.当操作系统根分区空间不够时(有大量的日志写入或应用部署在根分区),可以将单个或多个目录进行同步出来,源目录是磁盘较大的分区,目标目录是在根分区下,实际文件写入在较大的分区。[rootmysql01 ~]# mkdir /home/123 /123 …

byte转化为Bitmap,防止内存溢出

Java代码 ByteArrayInputStream is new ByteArrayInputStream(byte[]); BitmapFactory.Options optionsnew BitmapFactory.Options(); options.inPurgeable true; options.inInputShareable true; options.inSampleSize 2; try …

Hadoop点滴-HDFS命令行接口

1、-help[cmd] 显示命令的帮助信息 ./hdfs dfs -help ls1 2、-ls(r) 显示当前目录下的所有文件 -R层层循出文件夹 ./hdfs dfs -ls /log/map ./hdfs dfs -lsr /log/ (递归的)1 3、-du(s) 显示目录中所有文件大小,或者当只指定一个文件时,显示此文件的大小 ./hdfs d…

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…

两种常见挂载Jenkins slave节点的方法

1、挂载slave节点的方法 在Jenkins的Master上,进入Mange node页面,可以管理node节点,例如新加、删除等操作。 其中, Name是节点名字; Description是节点描述; // of executors是该节点可以同时运行job的数…

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

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

spinlock与linux内核调度的关系

作者:刘洪涛,华清远见嵌入式学院高级讲师,ARM公司授权ATC讲师。 关于自旋锁用法介绍的文章,已经有很多,但有些细节的地方点的还不够透。我这里就把我个人认为大家容易有疑问的地方拿出来讨论一下。 一、自旋锁&#x…

Python参数类型

位置参数默认参数可变参数命名关键字参数关键字参数1 def position_only(a, b):2 print(a, b)3 4 def keyword(aa, bb):5 print(a, b)6 7 def arg(a, *args):8 print(a, args)9 10 def kw(a, **kwargs): 11 print(a, kwargs) 12 13 def many1(a, b, cc, *arg…

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

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

24c语言程序设计是啥,《C语言程序设计》作业答案.docx

精心整理《 C 语言程序设计》作业答案1.第 4题以下程序的输出结果是______。main(){intn[3][3],i,j;精心整理for(i0;ifor(j0;jfor(i0;ifor(j0;j)n[i1][j1]n[i][j];printf("%d\n",n[i][j]);---来源网络,仅供分享学习2/145精心整理}A.14B.0C.6D.…

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

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

c语言读入文件排序,帮忙-如何对文件排序啊

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼楼主加分哦,看看吧#include #include //#include #include #include using namespace std;void dfsFolder(string folderPath){ _finddata_t FileInfo; string strfind folderPath "\\*.*"; long Handle _…

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

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

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

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

c语言编写贪吃蛇代码无错,刚学C语言,想写一个贪吃蛇的代码

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#include#include#include#includetypedef struct snake{int a;int b;struct snake *u;struct snake *n;}snake,*snake1;typedef struct food{int a;int b;}food;void main(){char c,c0 d;int i,j,k,n1,t,at;snake p,q;snake *dd,…

blockchain_eth客户端安装 geth使用 批量转账(二)

回顾一下,前面我们讲到启动geth geth --rpc --datadir "F:/geth/Geth/" --light console 2>console.log 这一篇接着上面讲geth的使用,分为4个部分 1、创建账户 2、验证区块是否更新完毕 3、解锁账户 4、转账 此时进入到命令行模式 1、首先&…

CGContextAddLines和CGContextAddLineToPoint在线条半透明时候的区别

这两种都可以用来画线&#xff0c;前一种将整条线加入后画出&#xff0c;后一种对每个点进行和前一个点的连线。 sample1-(void)drawLine:(YJLines *)line{ int count [line.points count]; CGPoint addLines[count]; for (int j0; j< [line.points count]; j) { CGPoint …

android xml获取指定,android:如何从xml文件中获取信息?

我得到一个程序&#xff0c;从一个链接的服务器获取天气。我已经做了一些将字符串结合到URL的字符串。我现在需要从XML文件中获取信息。android&#xff1a;如何从xml文件中获取信息&#xff1f;这是我的代码&#xff1a;(我更换了&#xff0c;为了安全起见API KEY)package com…

科研入门之在web of science

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