# weex mock 接入规范

# 接入步骤

1. 添加启动mock环境的脚本,

// package.json
 "scripts": {
  ...
    "dev:mock": "npm run clean:all && npm run serve:mock",
    "serve:mock": "cross-env CATE_NAME=demo IS_MOCK=true FILE_TYPE= webpack-dev-server --env.NODE_ENV=development  --progress",
  ...

 }

2. 将mock变量写入到环境变量中

  // /configs/webpack.dev.conf.js
  /**
   * Webpack configuration for browser.
   */
  const devWebpackConfig = webpackMerge(commonConfig[0], {
    ...
    plugins: [
      ...
      // 在原本环境变量定义处，添加mock定义
      new webpack.DefinePlugin({
        "process.env": {
          NODE_ENV: config.dev.env,
          IS_MOCK: !!process.env.IS_MOCK // 新增mock环境标识
        }
      }),
  ...
  }
  ...
  /**
   * Webpack configuration for weex.
   */
  const weexConfig = webpackMerge(commonConfig[1], {
    ...
    plugins: [
      ...
      new webpack.DefinePlugin({
        "process.env": {
          NODE_ENV: config.dev.env,
          IS_MOCK: !!process.env.IS_MOCK  // 新增mock环境标识
        }
      }),
  ...
  }

3. 在业务变量配置文件中，配置mock标识和mock接口baseUrl

// /src/js/config.js

const mockConfig = {
  isMockEnv: !!process.env.IS_MOCK
  mockBaseUrl:  `https://yapi.smartmidea.net/mock/${projectId}`
}
export { ..., mockConfig}

4. 在统一的请求函数中，添加mockBaseUrl

// /src/service/nativeService.js
import { mockConfig } from '../js/config'

function sendCentralCloundRequest(name, params, options = { isShowLoading: true }) {
    return new Promise((resolve, reject) => {
      ...
      var sendData = params || {}
      sendData.url = this.serviceList[name] ? this.serviceList[name] : name
      // 若是mock环境，添加mockBaseUrl, 则bridge请求将不转发到mas中台。
      // 此功能已规划但尚未落地，后续将补充落地生效的美居版本
      if(mockConfig.isMockEnv) {
        sendData.mockService = mockConfig.mockBaseUrl
      }
      ...
      bridgeModule.sendCentralCloundRequest(
        sendData,
        resData => {
          ...
          resolve(resData)
        },
        error => {
          ...
          reject(error)
        }
      )

完成上述步骤，在对应终端执行npm run dev:mock 即可进入mock环境
tips:

1. 以上代码修改基于 dolphin-weex-cli 脚手架创建的项目代码进行的修改，查看详情
2. 若是其他版本的weex项目，可结合具体项目与此规范，适当修改以接入mock

# 补充情况

• 项目中存在多yapi源，或者部分接口满足yapi mock 的情况
  改进措施：

  1. 在config.js文件中维护设置多个yapi源，并设置开启对应的条件值

  // /src/js/config.js
  
  ...
  const mockConfig = {
    isMockEnv: !!process.env.IS_MOCK, // 是否是在mock环境
    mockBaseUrlOpen: true,
    mockBaseUrl: `https://yapi.smartmidea.net/mock/${projectId}`,
    mockBaseUrlSenceOpen: true,
    mockBaseUrlSence: `https://yapi.smartmidea.net/mock/${projectId2}`,
    ...
  }
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  
  2. 在业务接口维护处，为每个接口添加对应yapi源以及开启条件

  // /src/service/api.js
  
  // 业务接口维护
  const serviceList = {
    getUserList: {
      url: 'xxxx',
      openMock: 'mockBaseUrlSenceOpen',
      mockOrigin: 'mockBaseUrlSence'
    }
  }
  export default serviceList
  ...
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  
  3. 在原本添加 mockService 添加接口对应的yapi源

  //  /src/service/nativeService.js
  
  import { mockConfig } from '/src/js/config.js'
  import serviceList from './api.js'
  
  function sendCentralCloundRequest(name, params, options = { isShowLoading: true }) {
    return new Promise((resolve, reject) => {
      ...
      var sendData = params || {}
      ...
      // 新增：判断传入的是接口是否配置了yapi
      const apiObj = serviceList[name] || null
      if(apiObj && apiObj.url) {
        sendData.url = apiObj.url
        if(mockConfig.isMockEnv && 
          apiObj.openMock && apiObj.mockOrigin &&
          mockConfig[apiObj[openMock]] && mockConfig[apiObj[mockOrigin]]) {
          sendData.mockService = mockConfig[apiObj[mockOrigin]]
        }
      } else {
        sendData.url = name
      }        
  
       bridgeModule.sendCentralCloundRequest(
        sendData,
        resData => {
          ...
          resolve(resData)
        },
        error => {
          ...
          reject(error)
        }
      )
    })
  }
  
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  

  tips:

  1. 对每个接口做参数配置，采用数组和对象皆可，基于项目中的原本的请求封装做灵活改动
  2. 上述中，仅对sendCentralCloundRequest接口做demo展示，其余原生业务请求后端接口参照上述改动即可