微信小程序获取环境变量,对生产、测试、开发环境做区分

/ 0评 / 0

前言

在开发中我们经常会有在不同环境下一些区分,如基础的不同环境IP地址自动切换更改、生产和测试环境为了便于测试写的特殊功能、只有在生产和测试环境下可以访问的应用等等,这些在我们使用webpack等打包工具的时候都会有一个东西帮我们区分好,叫做环境变量。

但是在微信里好像并没有这个功能。

偶尔社区里会建议通过该文章https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html,写一个接口,通过微信返回给服务器的请求头来区分当前小程序环境,但是极其繁琐。

进入正题吧

但是前不久偶然发现微信里有一个变量叫做 __wxConfig,解决了这个问题,但是微信真的坑,你甚至在官方搜不到这个变量 = =,今天和大家分享一下

该变量的返回结果如下(本篇文章只讲到 envVersion ,其他具体用途需要自行发掘)

{
  "deprecated": true,
  "env": {
    "USER_DATA_PATH": "http://usr"
  },
  "appLaunchInfo": {
    "path": "pages/index/index",
    "query": {},
    "scene": 1001,
    "referrerInfo": {}
  },
  "ext": {},
  "wxAppInfo": {
    "maxRequestConcurrent": 10,
    "maxUploadConcurrent": 10,
    "maxDownloadConcurrent": 10,
    "maxWorkerConcurrent": 1,
    "maxWebsocketConnect": 5
  },
  "debug": false,
  "entryPagePath": "pages/index/index.html",
  "envVersion": "develop",
  "tabBar": {
    "custom": true,
    "color": "#333",
    "selectedColor": "#333",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index.html",
        "text": "首页",
        "iconPath": "assets/img/tab-bar/home.png",
        "selectedIconPath": "assets/img/tab-bar/home-active.png"
      },
      ...
    ]
  },
  "pages": [
    "pages/index/index",
    ...
  ],
  "page": {},
  "accountInfo": {
    "appId": "...",
    "icon": "...",
    "nickname": "..."
  },
  "global": {
    "window": {
      "backgroundColor": "#ffffff",
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "...",
      "navigationBarTextStyle": "black"
    }
  },
  "platform": "devtools",
  "appType": 0,
  "networkTimeout": {
    "request": 60000,
    "uploadFile": 60000,
    "connectSocket": 60000,
    "downloadFile": 60000
  },
  "extAppid": ""
}

经过测试得到 envVersion 的具体键值有:develop(开发版)trial(体验版)release(正式版)

可以愉快的在global.js里面做全局配置啦!

// 全局参数
const env = __wxConfig.envVersion
const baseUrls= {
    // develop: '开发环境url1',
    develop: '开发环境url2',
    release: '正式环境url',
    trial: '测试环境url'
}



export default{
    env,
    baseUrl: baseUrls[env],

    appId:  __wxConfig.accountInfo.appId,
    session_key: ''
}

也可以选择挂载到在app.js中

import global from './utils/global.js'
App({
    onLaunch() {
    },
    onShow(){
    },
    onError(err){
    },
    globalData: global,
})

随后我们就可以通过访问global.js或者app.js中的全局环境变量来做生产、测试、开发环境的区分了。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注