测试:"小程序前端切一下生产服务器" 前端: "你自己切换就行啦"

前言

作为前端工程师.标题中所说的情况大家估计都遇到过,小程序测试环境测试完之后,需要手动切换配置到预发布环境再次验证,然后再手动切换配置到生产环境,纯纯的体力劳动,那我们能不能验证阶段 让测试人员直接手动切换 ,而发布之后我们又可能根据当前小程序版本自动切换呢?

想要直接使用插件的同学,直接滑到文章末尾

需求分析

前端不需要在切换环境时重新再手动修改配置,提交到体验版
测试人员可以手动切换服务器地址,因为很多时候测试验证问题发现测试环境有问题,会需要切换回开发看一下是否也存在问题
需要根据当前小程序版本,开发版,体验版,正式版自动切换配置,这个很重要,防止出现连着测试环境的小程序发版到了生产环境,这种失误很低级,但是很致命

手动修改环境配置

1.将所有环境配置放到一个数组当中保存

javascript 复制代码

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'
  },
]

写一个界面,选择某个环境配置

javascript 复制代码

 <view class='wx-env-section-item'>
     <view class="wx-env-section__title">当前环境</view>
       <picker bindchange="bindPickerChange" value="{{index}}" range="{{envList}}" range-key="label">
         <view class="wx-env-picker">
              {{currentEnvData.label ? currentEnvData.label : '请选择环境 >'}}
          </view>
       </picker>
  </view>

保存选择的配置

这里我们选择以wxEnvVersion 作为value 值保存到storage中

javascript 复制代码

setStorageSync('currentEnvKey',data)

在http请求插件中配置

javascript 复制代码

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

重启小程序生效

由于并没有直接重启小程序的api,所以我们就选择退出小程序,让测试人员重新手动打开

javascript 复制代码

   exit()

手动切换的流程基本就完成了,下面是优化与自动根据版本切换配置

自动切换配置

获取当前版本

我们可以使用wx.getAccountInfoSync().miniProgram.envVersion 这个微信小程序自带的api获取当前的版本,返回的值分别是develop--开发版,trial--体验版,release--正式版

所以我们可以直接根据这个返回值来设置到我们的数组当中去

javascript 复制代码

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'
  }
]

然后我们在修改一下http配置,让它在正式版本时,就不管选择配置,只获取生产环境

javascript 复制代码

let envData = getStorageSync('currentKey')

const wxVersion = wx.getAccountInfoSync().miniProgram.envVersion

if(wxVersion === 'release'){
    // 获取默认的生产环境
    envData = releaseData
}

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

至此我们基本逻辑已经完成了,但是还是有需要解决的问题,比如我们切换环境的按钮不应该让用户看到.

优化

生产版本不显示切换按钮

上面所说到的优化点,我们可以直接通用给该按钮增加微信版本的判断即可,非生产的版本才显示该按钮,下面是伪代码

javascript 复制代码

    clickShowEnvSwitch() {
      if (!this.wxIsRelease) {
        this.showEnvSwitch = true
      }
    },

开发者模式

增加上面的代码感觉可以了,但是还有一个问题...小程序提审之后,审核员看到的是体验版 .所以审核员也会看到这个按钮...会有被驳回的风险 (不要问我为什么知道),所以我们学习手机开发者模式,增加一个连点5下才会显示切換即可(这个只是一种参考做法,你喜欢画星星也行)

javascript 复制代码

 clickShowEnvSwitch() {
      this.clickNumber++
      if (this.clickNumber > 5 && !this.wxIsRelease) {
        this.showEnvSwitch = true
      }
    },

到这里全部逻辑就都完成了,但是还有一些优化的点,比如uniapp项目跟微信原生小程序的storage用法不同需要兼容,而且也出现过正式版与体验版公用了相同的storage数据的问题,所以作者直接封装npm的插件,方便直接使用

插件

上述的逻辑跟优化的点,作者都封装成了插件npm小程序切换插件这个插件,小程序的原生组件,支持uniapp 和原生小程序两种格式的项目.

uniapp插件地址