背景

本方案适用于组织具备全码组件的开发条件，并且想使用iPaaS连接器作为数据源的业务场景。什么是全码组件点击文档查看，什么是iPaaS连接器可以点击文档查看。

开发步骤

配置连接器

可以采用存量已有的连接器，也可以配置一个全新的连接器，本案例通过一个Http的API配置一个数据源，请求入参为test，返回值为JSON格式，数据源返回一个JSON字符串作为全码的数据源

后续全码组件集成连接器，即在全码组件中获取上面的返回结果供全码组件内的变量消费。即全码组件通过系统的能力调用连接器获取到如下的返回值：

json 复制代码

{
  "args": {
    "test": "123456789"
  }
}

使用IDE开发全码组件

全码组件的开发教程，可以查看具体文档，可以通过Mock数据源的方式进行IDE模拟验证是否请求数据成功。

IDE的Mock直接请求前端代码

kotlin 复制代码

 async didMount() {
    getLifecycleSdk().didMount(this.props.componentName);
    // 这里读到的props，和config.json文件中定义的props相对应，详见config.json文件说明
    const props = this.props.componentProps;
    // 业务代码写到下方

    /**
     * 这里的第一个参数 this.props.componentProps.gateWayApi 就是连接器数据源的占位符，
     * 其中gateWayApi就是config.json里的Setter属性，该值通过设计器的组件数据源设置来绑定
     * 这里的第二个参数就是透出的参数名和参数值，该参数名和参数值会透传给连接器
     * 
     * 这里的返回值 data 就是连接器的返回数据
     * 
     */
    const data =  await getSdk().request(this.props.componentProps.gateWayApi,{
      test:'123',
    },
    {
      // 这里是IDE直接Mock请求Http接口
      url: 'https://httpbin.org/get',
      // 这里apiKey任意填写，只在IDE里生效
      apiKey: 'MOCK',
      httpMethod: 'GET',
      params:"test",
       // 这里apiSecret任意填写，只在IDE里生效
      apiSecret: 'MOCK',
    }
    );
    console.log(data);

    //渲染本地页面
    this.setData({data:data.args.test})
  },

IDE的Mock请求效果

集成数据源请求

在小程序插件的的js逻辑模块方法didMount里，可以发起连接器数据源的请求调用。

注意目前还无法在IDE的模拟器里直接调用连接器数据源，需要到设计器真机（PC或者移动端）环境里调试。

kotlin 复制代码

  async didMount() {
    getLifecycleSdk().didMount(this.props.componentName);
    // 这里读到的props，和config.json文件中定义的props相对应，详见config.json文件说明
    const props = this.props.componentProps;
    // 业务代码写到下方

    /**
     * 这里的第一个参数 this.props.componentProps.gateWayApi 就是连接器数据源的占位符，
     * 其中gateWayApi就是config.json里的Setter属性，该值通过设计器的组件数据源设置来绑定
     * 这里的第二个参数就是透出的参数名和参数值，该参数名和参数值会透传给连接器
     * 
     * 这里的返回值 data 就是连接器的返回数据
     * 
     */
    const data =  await getSdk().request(this.props.componentProps.gateWayApi,{
      test:'123',
    });
    console.log(data);

    //渲染本地页面
    this.setData({data:JSON.stringify(data)})
  },

TIPS

当前的用的组织corpId和userId工作台会通过系统参数的方式透传到连接器请求的Header，用来方便连接器来识别客户身份，连接器具体请求入参如下所示：

json 复制代码

{
    "headers": {
        "x-ddpaas-corpid": "ding49679e81291f7b9135c2f4657eb6378f", 
        "x-ddpaas-actionid": "G-ACT-102141D22795213CCBB80008", 
        "x-ddpaas-flowid": "G-FLOW-W-FFB52921E32895CAFD367F", 
        "x-ddpaas-requestid": "da3a30a5bc6f831366a43319cde-a-t_", 
        "x-ddpass-traceid": "0bbb2fb617006352900611547d18cb", 
        "x-ddpaas-userid": "020865534328-514298257"
    }, 
    "limitStrategy": {
        "args": [ ], 
        "checkInterval": "PT0.05S", 
        "maxCheckTimes": 1, 
        "resourceName": "", 
        "timeout": 10500
    }, 
    "method": "GET", 
    "contentType": "application/json", 
    "timeout": 10000, 
    "url": "https://httpbin.org/get?test=123"
}

其中入参里的x-ddpaas-corpid和x-ddpaas-userid分别对应当前用户的组织corpId和userId

设计器绑定连接器数据源

组件完成开发并上传后，发布灰度并全量组件，在设计器的左边物料即可找到全码组件，把全码组件拖到布局内，点击组件在右下角的"数据来源"内，贴入连接器的ID，并且选中对应的数据源，即可实现效果预览。

复制连接器ID

点击连接器，进入连接器详情，复制连接器ID

配置连接器

选中组件，在右下角选择连接器并贴入连接器ID，选择提交后再下拉框选择出数据源，保存刷新后就可预览实际效果

发布上线

预览符合预期后，保存发布后，启用工作台页面即可完成工作台全码组件集成iPaaS连接器上线

注意点

全码组件和连接器开发都需要一定的成本，建议具备开发能力的用户（诸如服务商或者企业IT管理员等）使用；
可以在IDE里请求数据源采用Mock的写法，但是否请求到正式的连接器以实际真机调试为准
全码组件要完成提交「上传版本」-「插件管理」-「版本管理」-「插件管理」-「配置」-「提交上架」-「提交发布」-「设置灰度」-「全量发布」，才能在设计器的物料库的【自建组件】Tab内看到

更多精彩内容，关注公众号：ali老蒋，或点击加我好友深度沟通：ali老蒋 - java开发者