3.2.5本地开发配置

本地开发配置

本小节将介绍如何在本地开发及调试。

1. 定制响应数据

在没有内网无法访问 testdaily环境时,可以创建一个本地 js 来模拟响应数据。 另外,在智能中台配置意图的资源 ID 后,也可能存在 3-10 分钟的延迟,如不想等待,也可以使用该方法来模拟响应数据。

需要注意的是,该方法比较危险,可能会因为数据结构不匹配而导致页面无法正常渲染。所以在使用该方法时,需要对数据结构有一定的了解。 其次,开启了模拟以后,就无法再使用真实的数据了,所以在开发过程中,需要时刻注意。必要的时候,通过isMock 来控制是否开启模拟。

.config/mock目录中,创建文件 chat.js,内容如下:

module.exports = {
  use: true,
  handler: (data) => {
    if (data.msg === 'hello') { // 'hello'表示用户的输入
      return {
        responses: [ // 对用户输入的'hello'后台做出的返回
          {
            data: {
              vpaUIResourceID: '1752828998961332224', // VPA平台会根据后台返回的`vpaUIResourceID`显示对应的卡片
              data: {
                extendParams: {},
                text: data.msg
              },
              modelID: 101 
            }
          }
        ]
      }
    }
  }
}

该代码需要默认导出一个对象,主要包括两个属性:

  • use
    boolean: 是否启用模拟数据。该属性为 true 时,才会启用模拟数据。方便在开发过程中,可以随时开启或关闭模拟数据。

  • handler
    data=>unkown|response:处理函数。该函数接收一个参数 data,该参数为向服务端发送的整个数据(可以通过network 面板查看)。 可以根据 data 的不同,返回不同的结果。如果返回结果中没有 responses,或者 responses 为空数组,则不会进行模拟,而是使用真实的数据。

下图为后台返回的数据 开发中后台返回的数据

其中,usetrue时,才会启用模拟数据。 如果返回结果中没有responses,或者 responses 为空数组,则不会进行模拟,而是使用真实的数据。

responses 为模拟的响应数据,可以有多个。 responses 中的数据结构,需要拟合后端返回的数据结构。

如果 vpaUIResourceID 暂时没有的话,可以先任意填写一个,例如 xxx ,然后配置好映射也可以快速开发。

2. 本地开发拦截

在开发过程中,我们往往是先在本地开发,然后再发布到资源管理平台。如果还没有,可以先任意写一个,然后仍然在模拟响应的文件中配置:

.config/mock/devMap.js,中,增加内容如下:

module.exports = {
  '1737189330811617283': '@remote/xxx',
  'xxx': '@remote/xxx'
}

该文件中,导出了一个对象,用于配置本地开发拦截。该对象的 key 为资源 ID,value 为该资源需要加载的本地开发组件的路径(以 @remote 开头,相对于 src 目录)。

这样就可以先不走资源管理平台,直接加载本地的开发组件。

需要注意的是,键的类型是 string,资源 ID 往往长得像数字,但是实际上应该加上引号,按字符串处理。

如果开发完成并且打包发布到资源管理平台后,可以将该字段删除或者注释掉,进而可以测试资源管理平台的资源加载。

到这一步假如开发的卡片不需要调用用友内部的资源,则就可以在本地调试了。

3. 模拟 vpa.notify 回调数据

在开发过程中,如果需要调友有空间的资源,例如通知则会用到本小节内容,使用 vpa.notify 向宿主环境发送一些通知进行通信。

在绝大多数的时候,可能还需要在通知后获得结果。但是在开发过程中,我们无法获得宿主环境的返回结果,这时候我们可以使用以下方法模拟返回结果。

在项目 .config/mock 目录中,创建一个名为 notify.js 的文件,内容如下:

module.exports =  {
    signType: 'diworkSignSucess',
    message: '2020-10-10 10:10:10'
  }

这样,当我们使用 vpa.notify 时,就会返回这个结果。

如果需要根据不同的 action 模拟一些逻辑,可以返回一个函数。下面是一个例子:

module.exports = function (option) {

  const ret = {
    signType: 'diworkSignSucess',
    message: '2020-10-10 10:10:10'
  }

  const ret2 = {
    signType: 'diworkSignError',
    message: '外勤'
  }

  return Math.random() > 0.5 ? ret : ret2
}

其中,option 参数为 vpa.notify 的参数,ret 为模拟的返回结果。可以根据 option 参数的不同,返回不同的结果。

当您不再需要模拟返回数据时,可以在 .config/mock 目录中删除 notify.js 文件。

4. 手动设置配置信息

由于登录友空间需要token,本地调试我们可以自行配置,配置方式如下:

1)新建配置文件

在项目根目录下的 .config 目录中,新建一个配置文件。

文件名可以随意,假设叫做 prod-xxx.ts,后缀需要是 .ts 。 文件内容如下:

export default {
"host": "https://c2.yonyoucloud.com",
"yhtAccessToken": "xxx" // 可以从工作台 网站控制台获取
}

需要注意:可能存在多个 yht_access_token ,注意是目标域名即可。

2)使用配置文件

在项目根目录下的 .env.local 文件中,添加如下配置:

REACT_APP_INIT_CONFIG=prod-xxx

注意:配置文件名不需要带后缀,只需要填写文件名即可。

是否仍需要帮助? 请保持联络!
最后更新于 2024/05/31