【HarmonyOS】一文教你快速解决低代码连接器返参数据结构嵌套错误问题

【关键字】

低代码平台、连接器、返参数据结构嵌套

【写在前面】

关于低代码平台中的连接器如何使用，请参考以下内容：

https://blog.51cto.com/u_15687416/6414269

下文将会介绍连接器在实际使用中遇到的一个常见的问题。

【问题描述】

1、云侧接口定义

首先来一起看一下云侧定义的连接器：

然后来看一下连接器中添加的方法：

这里注意需要开启用户免登录功能，接着来看入参：

以及HTTP配置，根据实际请求配置：

经过方法测试和出参映射之后，该接口的返参就会自动添加到出参一栏中：

2、端侧页面布局

页面布局比较简单：List组件内部是ListItem组件，在ListItem中是横向左右排列的两个Text组件

页面结构效果如下图：

3、端侧数据绑定

端侧在PageData页面点击Add Data按钮添加连接器之后会自动生成端侧调用云侧的代码，但是如果接口数据是有数组这种结构时，自动生成的数据对象是有问题的，如下：

可以发现这里会多了一层数据对象，实际运行时出现了页面空白加载不出数据的问题。那该怎么办呢？

【解决方案】

首先，原有的自动生成的这种数据结构的代码我们不用管，这里在data里面重新创建正确的数据结构：

然后在外面定义一个接收数据的回调方法：

然后PageData页面，先把原有的连接器点击右下角"X"删除，然后重新点击Add Data按钮重新添加，在Success CallBack中选择上面创建的回调方法：

点击Submit就重新添加进来了，自动生成的代码如下：

然后回到index.visual文件中，给组件设置数据。这里选中ListItem使用For属性循环渲染：

这里可以直接使用weather对象了，然后给ListItem中的Text对象设置文本：

通过上述这种方式，我们就可以实现正常的数据展示了。

完整代码index.js：

import "@hw-agconnect/lowcode-harmony";
import agconnect from "@hw-agconnect/core-harmony";

export default {
    // Start of auto-generated Super Visual code. DO NOT MODIFY
    refreshqueryWeather_ltjyugetWeather_blvjo() {
        agconnect.lowCode().callConnector({
            connectorId: "自己的ConnectorID", methodName: "queryWeather_ltjyu", params: JSON.stringify({
                key: "SsTbBP4EOakE6sbKq",
                location: "nanjing",
                language: "zh-Hans",
                unit: "c",
                start: "0",
                days: "3"
            })
        }).then(res => {
            const ret = res.getValue().ret;
            if (ret.code !== 0) {
                throw new Error(JSON.stringify(ret));
            }
            this.queryWeather_ltjyugetWeather_blvjo = JSON.parse(res.getValue().response);
            this.showWeather(res);
        }).catch(e => {
            ;
        });
    },
    // End of auto-generated Super Visual code. DO NOT MODIFY
    data: {
        // Start of auto-generated Super Visual code. DO NOT MODIFY
        queryWeather_ltjyugetWeather_blvjo: {
            results: {
                results: [{
                    location: {
                        id: "",
                        name: "",
                        country: "",
                        path: "",
                        timezone: "",
                        timezone_offset: ""
                    }, daily: {
                        daily: [{
                            date: "",
                            text_day: "",
                            code_day: "",
                            text_night: "",
                            code_night: "",
                            high: "",
                            low: "",
                            rainfall: "",
                            precip: "",
                            wind_direction: "",
                            wind_direction_degree: "",
                            wind_speed: "",
                            wind_scale: "",
                            humidity: ""
                        }]
                    }, last_update: ""
                }]
            }
        },
        // End of auto-generated Super Visual code. DO NOT MODIFY
        weather: {
            results: [{
                location: {
                    id: "",
                    name: "",
                    country: "",
                    path: "",
                    timezone: "",
                    timezone_offset: ""
                },
                daily: [{
                    date: "",
                    text_day: "",
                    code_day: "",
                    text_night: "",
                    code_night: "",
                    high: "",
                    low: "",
                    rainfall: "",
                    precip: "",
                    wind_direction: "",
                    wind_direction_degree: "",
                    wind_speed: "",
                    wind_scale: "",
                    humidity: ""
                }], last_update: ""
            }]
        },
    },
    onInit() {
        // Start of auto-generated Super Visual code. DO NOT MODIFY
        this.refreshqueryWeather_ltjyugetWeather_blvjo();
        // End of auto-generated Super Visual code. DO NOT MODIFY
    },
    showWeather(res) {
        this.weather = this.queryWeather_ltjyugetWeather_blvjo;
    }
}

以上就是关于解决连接器返参数据结构嵌套错误问题的全部流程。