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

缺乏、安全感 2023-07-13 03:56 3阅读 0赞

例如：

1.  在微信小程序开发中使用高德地图的微信小程序开发，其中key值就需要在多个页面使用；
2.  在微信小程序开发电商平台时同样，比如客服电话，就需要在多个页面使用。

# 如何定义全局变量 #

### 方法一：用APP定义全局变量 ###

app.js

// 引入高德地图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的方法定义全局变量 ###

实例：我在公用文件夹src下的js文件夹中创建的三个保存全局变量的文件：base64.js、config.js、data.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70][]

这三个文件作用：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020031014121824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ==,size_16,color_FFFFFF,t_70