h5 mock 接入方案

1. 设置mock环境变量
   在根目录下添加.env.mock文件，文件内容如下

NODE_ENV = 'development'
VUE_APP_ENV = 'yapi'
// 下列中的mock/143仅供参考，具体BASE_URL 需要根据对应的yapi mock地址设置
VUE_APP_BASE_URL = 'https://yapi.smartmidea.net/mock/143'

2. 在package.json文件中添加mock脚本

scripts: {
  ...
  "serve:mock": "vue-cli-service serve --mode mock",
  ...
}

3. 根据环境变量，切换为mock环境，请求mock数据

// /src/http/request.js
import { Bridge } from '@dolphin-iot/jsbridge-sdk'

// 设置接口请求BASE_URL, 根据  .env.xxx 文件区分了BASE_URL
const HOST = process.env.VUE_APP_BASE_URL || `https://mp-${config.env}.smartmidea.net/mas/v5/app/proxy?alias=`

// 此处的serviceList[api][0]为具体的业务接口
const url = isMeijuFn() ? serviceList[api][0] : HOST + serviceList[api][0]

// 此文件考虑了美居端和非美居环境，美居内采用bridge，非美居采用axios请求
export async function requestWrapper(...) {
  ...
  return new Promise((resolve, reject) => {
    if(!isMeiju()) {
      // use axios
    } else {
      // use bridge
      let param = {
        ...
      }
      Bridge.sendCentralCloudRequest(param, useErrMagMap)
      ...
    }
  })
  ...
}

完成上述步骤后，若要切换到mock 环境，在对应的终端执行 npm run serve:mock 命令即可

tip: 以上代码基于 @dolphin-iot/cli 脚手架中 SPA 单页面模版 【vue2.x】 模板创建的项目代码进行的修改，查看详情 (opens new window)

其他情况补充

• 项目仅用于美居环境且只用bridge请求接口

  可在原本的 Bridge.sendCentralCloudRequest请求的参数中添加一个 mockService 值，用于表示mock源，将不会请求到mas中台，而是请求到yapi 服务。

  tip: mockService 功能尚未落地，后续落地后，将补充上生效的美居版本

  // /src/http/request.js
    // use bridge
    let param = {
      ...
    }
    if(process.env.VUE_APP_ENV === 'yapi') {
      param.mockService = process.env.VUE_APP_BASE_URL
    }
    Bridge.sendCentralCloudRequest(param, useErrMagMap)
    ...
  

• 项目中项目中需要灵活接入mock
  情况如下：
  1. 项目中接入多个yapi mock 项目，需要灵活判断采用不同的yapi源
  2. 项目中接口未全量接入yapi mock 服务，仅部分接口支持mock（如项目中迭代，新增模块中的新增部分接口支持mock）

  接入方案：

  1. 在.env.mock 文件中，维护多个yapi源以及启用对应yapi源的判断条件

  NODE_ENV = 'development'
  VUE_APP_ENV = 'yapi'
  
  //维护多个yapi源和对应的启用条件
  VUE_APP_OPEN_BASE_URL = true
  VUE_APP_BASE_URL = 'https://yapi.smartmidea.net/mock/001'
  
  VUE_APP_OPEN_BASE_URL_ACTIVITY = true
  VUE_APP_BASE_URL_ACTIVITY = 'https://yapi.smartmidea.net/mock/002'
  
  VUE_APP_OPEN_BASE_URL_SENCE = true
  VUE_APP_BASE_URL_SENCE = 'https://yapi.smartmidea.net/mock/003'
  

  2. 在原本维护api文件的地方，用数组的方式，添加yapi源

  // /src/http/api.js
  /*
    * 接口信息配置文件
    */
    const serviceList = {
      /**
      * 接口配置为k-v格式，k是接口引用名；v是配置信息，数据格式是数组，数组元素依次为：
      * @param 第1项：接口地址(必传)
      * @param 第2项：请求方式(非必传，默认POST)
      * @param 第3项：开启错误码表(非必传，默认true。取值true：接口code值不等于0时，统一Toast提示，提示文案在exceptionMap.js登记；取值false：接口code值不等于0时，自定义处理)
      * @params 第4项：是否启用yapi
      * @params 第5项： yapi源
      */
     //(美居内外通用)获取省市区数据列表
      getAreaList: [
        '/v1/activity/province/city/list', 
        'POST' ,
         true,
         'VUE_APP_OPEN_BASE_URL_ACTIVITY', 
         'VUE_APP_BASE_URL_ACTIVITY', 
      ], 
  
    }
    export default serviceList
  

  3. 在原本判断不同请求baseUrl处添加对应的yapi源判断

  // /src/http/request.js
  
  // 此处的serviceList[api][0]为具体的业务接口
  // const url = isMeijuFn() ? serviceList[api][0] : HOST + serviceList[api][0]
  let url = serviceList[api][0]
  if(!isMeijuFn()) {
    // 非美居环境下启用axios请求，若在mock环境下，对应接口的开启mock条件满足，对应yapi源有值，则拼接完整的yapi请求地址
    if(process.env.VUE_APP_ENV === 'yapi' &&
      serviceList[api][3] && serviceList[api][4] && 
      process.env[serviceList[api][3]] && process.env[serviceList[api][4]]) {
      url = process.env[serviceList[api][4]] +  serviceList[api][0]
    } else {
      // 非mock环境，则请求mas中台
      url = process.env.VUE_APP_BASE_URL + serviceList[api][0]
    }
  }
  
  export function apiCommon(name, params = {}) {
    try {
      let api = name
      return requestWrapper(url, params, serviceList[api][1], serviceList[api][2], serviceList[api][3], serviceList[api][4])
    } catch (e) {
      ...
    }
  }
  
  export async function requestWrapper(
    url,
    params = {},
    useErrMagMap = true,
    method = 'POST'
    useMock = false, // 新增mock参数
    mockOrigin = ''
  ) {
    ...
    return new Promise((resolve, reject) => {
      let param = {
        ...
      }
      // 当前展示的是用bride请求的情况
      // 当是mock环境下且对应接口的mock开关打开时，将 mockService 参数赋值为对应的yapi源
      if(process.env.VUE_APP_ENV === 'yapi' && 
        useMock && mockOrigin && 
        process.env[useMock] && process.env[mockOrigin]) {
        param.mockService = process.env[mockOrigin]
      }
      Bridge.sendCentralCloudRequest(param, useErrMagMap)
  
    })
    ...
  }