wx-env-switch

微信小程序环境切换

安装教程

1, 安装

npm install wx-env-switch

2, 原生小程序,需要在开发者工具上,先构建一下npm

原生小程序下使用

1, 在app.js中初始化插件

import {init} from './miniprogram_npm/wx-env-switch/components/utils'
const arrData = [
  {
    label:'开发',
    wxEnvVersion:'develop',
    apiUrl:'http://xxxx-dev.com'
  },
  {
    label:'测试',
    wxEnvVersion:'trial',
    apiUrl:'http://xxxx-test.com'
  },
  {
    label:'生产',
    wxEnvVersion:'release',
    apiUrl:'http://xxxx-prod.com'
  },
]
init(arrData)

2, 在http请求的插件上,获取当前的环境配置

import { getCurrentEnvData } from './miniprogram_npm/wx-env-switch/components/utils'
const envData = getCurrentEnvData()
const axiosInstance = new Request({
  baseURL: envData.apiUrl,
  timeout: 30 * 1000, // 超时配置
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

3, 在需要展示切换入口的界面上json中引入组件

{
  "usingComponents": {
    "wxEnvSwitch":"../../miniprogram_npm/wx-env-switch/components"
  }
}

4,在界面中使用,根据自己的逻辑去判断是否显示该弹窗即可

一般建议可以根据微信小程序的环境判断,也就是wx.getAccountInfoSync().miniProgram.envVersion这个api的返回值,正式环境下小程序不应该显示这个组件以及入口即可

 <wxEnvSwitch bind:close='handleClose' wx:if="{{showSwitch}}"></wxEnvSwitch>

在vue-cli创建的uniapp写的微信小程序中使用

1,在src下创建一个wxcomponents的目录,这个是uniapp的官方要求,然后将插件的env-switch整个文件夹拷贝到wxcomponents中

2,在main.js中,初始化插件

import {init} from "../../wxcomponents/env-switch/utils.js"
// 你的环境配置数据
const arrData = [
  {
    label: '开发',
    wxEnvVersion: 'develop',
    apiUrl: 'http://xxxx-dev.com'
  },
  {
    label: '测试',
    wxEnvVersion: 'trial',
    apiUrl: 'http://xxxx-test.com'
  },
  {
    label: '生产',
    wxEnvVersion: 'release',
    apiUrl: 'http://xxxx-prod.com'
  }
]

init(arrData)

3, 在http请求的插件上,获取当前的环境配置

import {getCurrentEnvData} from "@/wxcomponents/env-switch/utils.js"

const envData = getCurrentEnvData()
const axiosInstance = new Request({
  baseURL: envData.apiUrl,
  timeout: 30 * 1000, // 超时配置
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

4, 在page.json下的globalStyle中注册这个组件, (注意这里vue-cli创建uniapp小程序跟IDE创建的项目不一样,IDE创建的注册这个组件要在这个界面下的style,具体可以看官方文档)

!!!这里有一个非常需要注意的点,uniapp使用微信原生编写的组件,组件名称不要使用wx开头,否则编译之后,组件名称会发生改变,导致无法使用

  "globalStyle": {
    "usingComponents": {
      "switch-env": "/wxcomponents/wx-switch-env/index",
      // "wx-switch-env": "/wxcomponents/wx-switch-env/index",不推荐使用,编译后名称会改变导致无法使用
    }
  }

5, 跟上述的原生小程序下一样,根据自己的需求去做插件页面的展示或者隐藏

<template>
  <custom-page>
    <custom-head title-text="测试"></custom-head>
    <view class="content-container">
      <view @click="handleShowSwtich">点击显示</view>
      <switch-env v-if="showSwitch" @close="showSwitch = false"></switch-env>
    </view>
  </custom-page>
</template>

<script setup>
const showSwitch = ref(false)

const handleShowSwtich = () => {
  showSwitch.value = true
}
</script>

utils函数列表

一般使用插件自带的切换环境的组件的话,使用 init 初始化函数即可

函数名称	说明	类型	默认值
init	初始化函数,其他的函数的调用需要放在初始化完成之后，props的参数见下面,sessionKey为字符串格式,用于保存切换环境之后的value	(arrData:props[],sessionKey:string = 'developKey')	([],'developKey')
changeEnv	切换环境时触发,传入的值是init方法初始化时数组中的value值,用于保存于匹配当前选中的环境数据	(string)	无
exit	退出小程序	无	无
getCurrentEnvData	获取当前的环境配置数据	无	无
getEnvList	获取init时传入的环境配置数组	无	无

组件参数

名称	说明	类型	参数
confirmFn	该参数有值,就只执行该函数,没有值就执行组件默认的逻辑.	function	(props{}) 当前选中的环境数据

props

参数	说明	类型	必填
label	显示在选择器的字段,一般为中文	string	必填
wxEnvVersion	微信小程序当前运行环境的标识,用于小程序在某个环境下的获取对应默认的配置,当选择某个value作为session保存之后,获取环境数据会优先根据session获取	'develop' | 'trial' | 'release'	必填
key: string	支持用户根据自己的业务以key:value的形式传入任何数据	any	非必填

组件事件

名称	说明	参数
close	点击蒙版时触发的回调事件	无