温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何在微信小程序中使用全局变量

发布时间:2021-05-10 17:42:36 来源:亿速云 阅读:315 作者:Leah 栏目:web开发

如何在微信小程序中使用全局变量?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

全局变量的作用

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

例如:

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 => {}
})

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI