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


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 trim函数 去空格函数与正则集锦
Nov 20 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
JS中多层次排序算法的实现代码
Jan 06 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
ip签名探针
2006/10/09 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
javascript 日期常用的方法
2009/11/11 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python新手入门最容易犯的错误总结
2017/04/24 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python判断链表是否有环的实例代码
2020/01/31 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
优秀三好学生事迹材料
2014/08/31 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
在pyCharm中下载第三方库的方法
2021/04/18 Python