微信小程序----全局变量
全局变量的作用
在微信小程序开发中,会遇到一个很实际的应用场景,就是一个变量会在多个页面进行使用。
例如:
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
这三个文件作用:
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
微信小程序----全局变量相关推荐
- 微信小程序全局变量(globalData)和缓存(StorageSync)的区别和具体用法
微信小程序全局变量(globalData)和缓存(StorageSync)的区别和具体用法 一.缓存(StorageSync)本地存储 1.小程序中的本地存储有同步功能,可用于保存用户信息(用户登录后 ...
- 微信小程序—-全局变量
文章目录 全局变量的作用 如何定义全局变量 方法一:用APP定义全局变量 方法二:用引入js的方法定义全局变量 方法三:使用全局状态管理库 方法四:引入redux组件 总结 全局变量的作用 在微信小程 ...
- 微信小程序 全局变量异步函数_微信小程序制作简述
在官网下载微信小程序开发工具,有前端基础就能做,语法类似VUE 微信小程序简单来说就是前端页面,接受后端数据再展现出来即可,所以样式操作占小程序开发的半壁江山 小程序单页面目录: CSS---> ...
- 微信小程序 全局变量异步函数_微信小程序【生命周期】
小程序分为应用.页面和组件三个部分,所以小程序的生命周期涉及以下 应用的生命周期 页面的生命周期 组件的声明周期 应用的生命周期对页面生命周期的影响 应用的生命周期 App() 函数用来注册一个小程序 ...
- 微信小程序全局变量注意这四点,让你轻松玩转全局变量
全局变量这一块,对于新手来说还是有很多坑的.注意好以下几点,让你轻松学会全局变量的使用. 第一.全局变量的定义 在你初次打开app.js文件时,很容易混淆.在onLaunch函数里是有个globalD ...
- 微信小程序全局变量改变监听
问题来源 最近工作需要写小程序页面,其中有个页面情况为:父页面中包含了一个组件页面,组件页面中又包含了另外一个组件页面.需求为:点击最后一个组件页面中的一个view,需要显示最外层父页面中的一个弹出层 ...
- 微信小程序全局变量(globalData)和缓存(StorageSync)的区别和用法
globalData和storage的区别 一.app.globalData 是全局变量,下次进入的时候,就要重新获取,一般用于: 1.保存一些可能涉及安全类的数据,例如资源类,每次需要很准确的,就建 ...
- 微信小程序全局变量的定义、使用、修改
1.全局变量的定义 找到根目录下的app.js 在app.js内定义全局变量 //app.js App({//定义全局变量globalData:{name:"狂徒张三",tel:& ...
- 微信小程序全局变量globalData
1.在app.js目录里写 // app.js App({onLaunch() {// 展示本地存储能力 const logs = wx.getStorageSync('logs') || []log ...
最新文章
- XML DOM 加载函数概述
- 整数、浮点数在计算机中的存储,-128二进制怎么表示,
- OpenCASCADE绘制测试线束:形状修复命令之转换命令
- 分布式系统概念 | 一致性协议:拜占庭将军问题、Paxos、Raft
- java 不识别enum_Java enum关键字不识别的快速解决办法
- Linux Shell编程之别名和常用快捷键
- HomeBrew 安装 国内源
- laravel-神奇的服务容器(转)
- 我对于大学软件专业的一些看法
- IT,大一,这里我有点建议
- 计算机建筑制图实践报告,工程建筑实习报告范文(精选5篇)
- popwindow详解
- Shell脚本 | 考勤统计
- 完美解决Win11无法启动安全中心
- html中<img src=““ alt=““>标签里面alt的作用
- BugkuCTF:宽带泄露;隐写2
- 【51nod】2589 快速讨伐
- linux网络掉线频繁怎么设置,解决ssh登录的时候,没操作总是会自动掉线的设置办法,100%有效...
- qt中各种类型转成uchar
- 小程序即将上线,现在就可以开发啦