h5学习笔记：小程序 getAccountInfoSync 方法配置开发环境接口

我们在对接接口的时候，经常在开发服、体验服、和正式服的接口来回游走。前端里面经常需要调整这块接口内容，适应调试的目的。最近在工作项目学习到别的团队的一种思路（不唯一），现记录下来。

1. 获取环境的参数

微信小程序提供了一个获取方法接口。下面一起看看**wx.getAccountInfoSync()**的方法，该方法提供了小程序的账号信息和环境标记。

从官方的接口代码可以看到，环境的标记里面包含了三种标记develop(开发服)，trial（体验服），release(正式服)

 envVersion: 'develop' | 'trial' | 'release'

测试一下输出，在开发工具里面提供了其中一种标记，打印出develop

const accountInfo = wx.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
console.log(envVersion) //develop

2. 利用环境的参数配置不同接口

有了这三个标记，可以利用里面标记来实现不同的测试环境接口了。通过配置来实现对应的方法。

const accountInfo = wx.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
console.log(envVersion) //'develop' | 'trial' | 'release'

const URLMap= {
  develop:{
      BASE_URL:'https://test.aaa.com', 
  },
  trial:{
     BASE_URL:'https://test.aaa.com', 
  },
  release:{
     BASE_URL:'https://aaa.com', 
  }
}

module.exports = {
  host:URLMap[envVersion]
}

如果项目简单，这种约定的方式也可以简单实现请求接口的基础配置了。
同样支持多接口环境实现不同的环境目的。如果只是纯粹固定一个路径，这样就没必要。直接手动将envVersion 指定对应版本即可。配置好即可拿到这个路径去做请求路径了。

3. 总结

接触不同的项目和学习一些源码有助于提升一些项目上的工程化经验，这一点体会很深。随着小程序的能力越来越强，市场上多少会担忧业务变得复杂起来。外包市场似乎对小程序热点保持很高的关注度。在日常化公司上，个人会感觉到公司不养这块技术，这一点慢慢成了外包一个必备技能。其实，大前端流行趋势越来越明显化。vuejs 和reactjs 成了公司的业务必选项，小程序这个也是属于web 前端开发。很多人员会以为你会js 就会小程序开发了。其实想当然了。小程序在于业务上面临的问题会比js 的更多。小程序开发难度总体来讲偏向容易，它的基础还是js，css，和html这一点必须记住。
前端框架虽然众多，但是基础还是不能忘记了最基础的 js，css，和html 三样法宝。