数据mock

如何mock api请求

如果需要mock多个域名的api请参见api多域名mock。

1、 使用内置网络请求接口发起网络请求。例如：

import cml from "chameleon-api";
cml.get({
  url: '/api/getdriver'
})
.then(res => {
  cml.showToast({
    message: JSON.stringify(res),
    duration: 2000
  })
}, 
err => {
  cml.showToast({
    message: JSON.stringify(err),
    duration: 2000
  })
});

调用方法的参数url中只需要写api的路径。那么本地dev开发模式如何mock这个api请求以及build线上模式如何请求线上地址，就需要在配置文件中配置apiPrefix。

2、 配置apiPrefix dev开发模式和build模式配置的apiPrefix会拼接到网络请求的url前，dev模式不配置时，默认为当前启动web服务的ip+端口。上面的例子中如果本地ip为198.168.1.1 启动端口为8000。dev模式发起的网络请求为198.168.1.1:8000/api/getdriver, build模式发起的网络请求为http://api.chameleon.com/api/getdriver。

// 设置api请求前缀
const apiPrefix = 'http://api.chameleon.com';
cml.config.merge({
  wx: {
    dev: {
    },
    build: {
      apiPrefix
    }
  }
})

3、 配置本地mock数据

前两步操作实现了网络请求dev模式请求本地，build模式请求线上，这一步就讲解如何mock本地请求数据。

在/mock/api/文件夹下创建mock数据的js文件。文件内容格式如下：

module.exports = [
  {
    method: 'get',
    path: '/api/getdriver',
    controller:  function (req, res, next) {
      console.log('/api/driver/getList')
        res.json({
          total: 100,
          driverList: []
        });
    },
  }
]

• method指定请求方法，默认值['get','post']
• path指定请求的路径
• controller 是express的中间件形式，在中间件中可以做任何操作最后调用res的方法返回结果。

启动dev模式后，通过ip+端口+path即可访问配置的api请求。结合上面讲到的网络请求方法，即可实现本地的api数据mock。

【扩展】如何在本地dev模式请求线上数据？

可以在mock文件的controller中请求对应的线上数据，例如可以使用request模块实现请求。

注：apiPrefix、publicPath、router.config.json、chameleonUrl的关系

如何mock php模板下发数据

/mock/template/文件夹下存放的php文件是下发的模板数据，php文件内将下发的数据赋值给$chameleon对象，例如：

<?php
  $chameleon = array(
    "errno" => 0,
    "errmsg" => "",
    "pageData" => array(
      "pageInfo" => array(
        "title" => "chameleon",
        "content" => "chameleon跨端"
      )
    )
  );
?>

在模板中通过变量pageData,errno,errmsg接收。

  <script>
  var pageData = {json_encode($pageData)}
  var errno = {json_encode($errno)}
  var errmsg = {json_encode($errmsg)}
  </script>

同时还模拟了与模板下发的pageData相同的ajax请求，只需在当前访问页面的url上添加puredata=1参数。

{
  errno: 0,
  errmsg: '',
  pageData: {
    pageInfo: {
      title: 'chameleon',
      content: 'chameleon跨端'
    }
  }
}