小程序环境切换自定义组件

背景：

最近一直有参与小程序的项目，发现切换环境时经常要上传然后再设置为体验版，比较麻烦，所以尝试做了个切换环境的组件，分享给大家，希望大家能用得上，提点建议

组件长这个样子

展开后

功能： 

该组件可全局拖拽，点击环境切换后，需重启小程序

原理：

利用小程序的storage，储存环境变量的切换，在加载appjs时，先获取环境变量，及时切换环境对应的资源地址

关键api：

wx.setStorage

wx.getStorage

wx.getStorageSync

关键代码：

components\envChange

import {
  envKey
} from './../../utils/util'
Component({
  data: {
    storageKey: envKey,
    show: false,
    showList: false,
    list: [{
        label: 'dev',
        value: 'develop',
      }, {
        label: 'test',
        value: 'test',
      }, {
        label: 'sit',
        value: 'sit',
      }, {
        label: 'uat',
        value: 'uat',
      },
      {
        label: 'trial',
        value: 'trial',
      }, {
        label: 'release',
        value: 'release',
      }, {
        label: '取消',
        value: 'cancel',
      }
    ],
    env: ""
  },
  methods: {
    async init() {
      let envWhiteList = ['develop', 'sit', 'test', 'trial', 'uat']
      let data = {
        show: envWhiteList.indexOf(__wxConfig.envVersion) !== -1 || false,
        showList: false,
        env: __wxConfig.envVersion
      }
      try {
        let cur = await this.getCurrentEvt()
        data.env = cur && cur.label
      } catch (error) {
        console.error(error)
      } finally {
        this.setData(data)
      }
    },
    showListFun() {
      this.setData({
        showList: true
      })
    },
    closeListFun() {
      this.setData({
        showList: false
      })
    },
    async envChoose(e) {
      const {
        item
      } = e.target.dataset
      if (item.value === 'cancel') {
        this.setData({
          showList: false
        })
      } else {
        await this.setEnv({
          key: this.data.storageKey,
          value: item.value
        })
        wx.showToast({
          icon: 'none',
          title: '请手动重启小程序(点击右上方三个点的气泡按钮里面的重新进入小程序)',
          duration: 5000
        })

        this.init()
      }
    },
    getCurrentEvt() {
      try {
        return this.getEnv(this.data.storageKey)
      } catch (error) {
        reject(error)
      }
    },
    setEnv(data) {
      return new Promise((resolve, reject) => {
        wx.setStorage({
          key: String(data.key),
          data: String(data.value),
          success: (res) => {
            resolve(res)
          },
          fail: (error) => {
            console.error(error)
            reject(error)
          }
        })
      })
    },
    getEnv(key) {
      return new Promise((resolve, reject) => {
        wx.getStorage({
          key,
          success: (res) => {
            const target = this.data.list.find(obj => obj.value === res.data)
            resolve(target)
          },
          fail: (error) => {
            reject(error)
          }
        })
      })
    }
  },
  ready() {
    this.init()
  },
})

config\modules.js

const develop = require('./develop')
const sit = require('./sit')
const test = require('./test')
const trial = require('./trial')
const uat = require('./uat')
const release = require('./release')

module.exports = {
    develop,
    sit,
    test,
    trial,
    release,
    uat,
}

config\getConfig.js

import {
  envKey
} from './../utils/util'
import modules from './modules'

function getConfig(arg) {
  const env = wx.getStorageSync(envKey)
  return modules[env || arg]
}

module.exports = getConfig

config\index.js

const getConfig = require('./getConfig')

module.exports = (function () {
    switch (__wxConfig.envVersion) {
        case 'develop':
            return getConfig(__wxConfig.envVersion);
            break;
        case 'trial':
            return getConfig(__wxConfig.envVersion);
            // return require('./trial.js');
            break;
        default:
            return require('./release.js');
            break;
    }
})()

全局引用该组件或局部引用都可以，最后别忘了全局引入config

源码在gittee:mini_program_code_part: 小程序代码片段https://gitee.com/qiu2046/mini_program_code_part.git

可以优化的点：

1.添加时间校验，过期删除

2.加密

tip：特别需要注意小程序的模块加载顺序和模块引入方式与常见项目的区别

参考资料：

pointer-events - CSS（层叠样式表） | MDN**pointer-events **CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events微信小程序自定义服务器环境切换_醉逍遥neo的博客-优快云博客_小程序多环境切换微信小程序由于生态圈的封闭性，很多功能不支持或者实现起来很繁琐，这次就分享一下项目里对于小程序服务器切换相关的配置及使用心得。首先要解释一下后面会出现的两个变量名：SERVER_MODE： 综合性的切换服务器模式，通过在代码里手动修改配置文件里的服务器模式值，用于测试、预发及上线时的版本切换及环境模式判断，包括各个接口服务器、h5域名服务器、第三方appId、自定义服务器等一键切换。SERVER_DEV_MODE：接口api的切换服务器，通过在特定入口里打开特定页面，在该页面里可选切换api服务器环境https://blog.youkuaiyun.com/u010059669/article/details/108979412wepy框架微信小程序api环境切换_穿不过的墙的博客-优快云博客wepy 小程序开发项目环境（开发环境，测试环境，预发环境，线上环境）原公司小程序环境使用非常奇怪 （测试体验版为测试环境）（正式版体验版为预发环境）现又新增开发环境，那么在使用的时候岂不是每切换一个环境都的重新打包（很麻烦）一般来项目都会封装request请求 那么当前的api环境一般会写在独立的js再去引入，// API_URL为当前的api环境请求地址 if(!!wx.getStorageSync("API_URL")){ switch(wx.getStorageSync("APhttps://blog.youkuaiyun.com/weixin_44969815/article/details/106857126【解决方法】微信小程序 module "xxx/xxx.js" is not defined（开发工具正常，真机预览报错）_Bottle的博客-优快云博客背景小程序开发，写了一个公共模块，方便其他页面使用。开发工具中使用一切正常，但是用真机预览的时候就会报错「module “xxx/xxx.js” is not defined」。查了一圈，基本确定了是小程序 js 加载顺序的问题，那解决思路自然就有了。解决方法将引用的代码放到页面的 onLoad 方法或者 app.js 的 onLaunch 方法中执行。比如我这里就是放到了 app.j...https://blog.youkuaiyun.com/zhyl8157121/article/details/105350698Javascript模块化编程（三）：require.js的用法 - 阮一峰的网络日志https://www.ruanyifeng.com/blog/2012/11/require_js.html