小程序 mock 接入规范

小程序 mock 接入规范

小程序采用全局接入yapi mock 的方案,前提条件是所有业务接口都已经配置了yapi

#接入步骤

  1. 定义mock 变量
// /config.js
const config = {
  enviroment: 'prod',
  isMock: true,
  mockBaseUrl: 'https://yapi.smartmidea.net/mock/xxx'
}
  1. 在接口请求处,通过环境变量区分请求
// utils/requestService.js
import config from '/config.js'

var requestService = {
  request: (apiName, params, method, headerObj, timeout) => {
    return new Promise((resolve, reject) => {
      ...
      let apiObj = api[apiName]
      let url
      if (apiObj) {
        //已有接口配置
        if(config.enviorment !== 'prod' && config.isMock) {
          // 启用mock
          url = config.mockBaseUrl + apiObj.url
        } else {
          url = api.isMasEnv ? api[apiName].masUrl : api[apiName].url
        }
        
      } else {
        ...
      }
      wx.request({
        url: url,
        data: params,
        ...
        success(resData) {
          ...
        },
        fail(error) {
          ...
        }
      })
    })
  }
}

完成上述操作后,需求启用mock环境时,在config.js中的设置environment不为prodisMock值为true即可。

#补充情况

  • 按需接入yapi (考虑到实际业务中,不一定满足全局接入yapi的情况)
  1. 在配置文件中配置不同的yapi源和对应源的开启条件
// /config.js
const config = {
  enviroment: 'prod',
  isMock: true, // 全局mock 开关
  mockBaseUrl: 'https://yapi.smartmidea.net/mock/xxx',
  // 多yapi源情况, 形参命名建议是按照接口服务功能命名,此处仅做示例
  mockBaseUrlSence:  'https://yapi.smartmidea.net/mock/xxx',
  openMockSence: false,
  mockBaseUrlCard:  'https://yapi.smartmidea.net/mock/xxx',
  openMockCard: false,
}
  1. 在接口文档中配置对应yapi源和启用判断
// /api/main/scene-api.js
  
  const api = {
    //场景id列表查询
    getSceneIdList: {
      ...
      api: '/v2/scene/id/list',
      openMock: 'openMockSence',
      mockOrigin: 'mockBaseUrlSence'
    },
  }
  export default api
  1. 在请求方法中,判断是否为接口请求yapi服务
// utils/requestService.js
import config from '/config.js'

var requestService = {
  request: (apiName, params, method, headerObj, timeout) => {
    return new Promise((resolve, reject) => {
      ...
      let apiObj = api[apiName]
      let url
      if (apiObj) {
        //已有接口配置
        if(config.enviorment !== 'prod' && config.isMock &&
          apiObj.openMock && api.mockOrigin &&
          config[apiObj.openMock] && config[apiObj.mockOrigin]) {
          // 启用mock
          url = config[apiObj.mockOrigin] + apiObj.url
        } else {
          url = api.isMasEnv ? api[apiName].masUrl : api[apiName].url
        }
        
      } else {
        ...
      }
    })
  }
}
posted on 2024-12-16 09:41  AtlasLapetos  阅读(19)  评论(0)    收藏  举报