微信小程序全局变量功能与用法详解


Posted in Javascript onJanuary 22, 2019

本文实例讲述了微信小程序全局变量功能与用法。分享给大家供大家参考,具体如下:

全局变量的作用

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

例如:

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值这种只需要单独定义的,可以采用方法一,方便、简洁、不用单独创建文件。在请求地址这种批量全局变量的定义时,采用方法二,有利于后期的查找和修改。两种方法结合,更有利于开发!

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
微信小程序实现单选功能
Oct 30 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 #Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 #Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 #Javascript
JavaScript继承与聚合实例详解
Jan 22 #Javascript
JavaScript格式化json和xml的方法示例
Jan 22 #Javascript
基于vue的验证码组件的示例代码
Jan 22 #Javascript
JavaScript中的"=、==、==="区别讲解
Jan 22 #Javascript
You might like
php短域名转换为实际域名函数
2011/01/17 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
js如何打印object对象
2015/10/16 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
详解Python发送邮件实例
2016/01/10 Python
python基础教程项目二之画幅好画
2018/04/02 Python
python计算列表内各元素的个数实例
2018/06/29 Python
pandas 选择某几列的方法
2018/07/03 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
GWebs公司笔试题
2012/05/04 面试题
经理职责范文
2013/11/08 职场文书
美德好少年事迹材料
2014/01/19 职场文书
2014年征兵标语
2014/06/20 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
个人自我剖析材料
2014/09/30 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
先进基层党组织材料
2014/12/25 职场文书
论文答谢词
2015/01/20 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
Python OpenCV形态学运算示例详解
2022/04/07 Python