低代码实现鸿蒙API返回JSON转TS及快速生成ArkUI代码

简介: 低代码实现鸿蒙API返回JSON转TS及快速生成ArkUI代码

直接在线API的JSON转TS代码

低代码实现鸿蒙API调用快速生成ArkUI代码只需要调用你的API接口返回JSON结构的数据,在线绑定变量后,采用了axios鸿蒙扩展插件来加载远程API。

生成的代码如下,程序可能也还有些不足之处,欢迎吐槽,不断优化完善。

import {
    navigateTo
} from '../common/Page'
import axios, {
    AxiosResponse
} from '@ohos/axios'
interface IDataDataAttr {
    "title": string
}
interface IDataData {
    "img": string,
    "remark": string,
    "id": number,
    "title": string,
    "attr": IDataDataAttr
}
interface IData {
    "msg": string,
    "code": number,
    "data": IDataData[]
}
@Entry
@Component
export struct Index {
    @State data: IData = {
        "code": 0,
        "msg": "",
        "data": [{
            "title": "",
            "remark": "",
            "id": 0,
            "attr": {
                "title": ""
            },
            "img": ""
        }]
    }
    async dataApi() {
        try {
            const response: AxiosResponse = await axios.post < IData,
                AxiosResponse < IData > , null > ('https://php.diygw.com/article.php');
            this.data = response ? response.data : null
        } catch (error) {
            console.error(JSON.stringify(error));
        }
    }
 
    async onPageShow() {
        await this.dataApi()
    }
 
    async aboutToAppear() {
        await this.onPageShow()
    }
 
    build() {
        Row() {
            Navigation() {
                    Column() {
                        Scroll() {
                            Column() {
                                Grid() {
                                        ForEach(this.data.data, (item) => {
                                            GridItem() {
                                                Column({
                                                    space: 5
                                                }) {
                                                    Image(item.img).objectFit(ImageFit.Fill).width('42vp').height('42vp')
                                                    Text(item.title).fontSize('12fp').width('100%').textAlign(TextAlign.Center)
                                                }.width('100%')
                                            }
                                        }, item => JSON.stringify(item));
                                    }.padding({
                                        top: '10vp',
                                        bottom: '10vp'
                                    }).height(this.data.data.length / 3 * 91 + 20).columnsTemplate('1fr 1fr 1fr ')
                                    .rowsGap(15).layoutDirection(GridDirection.Row)
                                    .width('100%')
                                List() {
                                        ListItem() {
                                            Flex({
                                                direction: FlexDirection.Row,
                                                alignItems: ItemAlign.Center,
                                            }) {
                                                Image($r('app.media.grid1')).flexShrink(0).objectFit(ImageFit.Fill).width('42vp').height('42vp')
                                                Column() {
                                                    Text('菜单一111').fontSize('14fp').width('100%')
                                                    Text('说明文字').fontSize('12fp').width('100%')
                                                }.padding({
                                                    left: 5
                                                })
                                                Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')
                                            }.width('100%')
                                        }.padding(15).borderWidth({
                                            bottom: 1
                                        }).borderColor('#efefef')
                                        ListItem() {
                                            Flex({
                                                direction: FlexDirection.Row,
                                                alignItems: ItemAlign.Center,
                                            }) {
                                                Image($r('app.media.grid2')).flexShrink(0).objectFit(ImageFit.Fill).width('42vp').height('42vp')
                                                Column() {
                                                    Text('菜单二').fontSize('14fp').width('100%')
                                                    Text('说明文字').fontSize('12fp').width('100%')
                                                }.padding({
                                                    left: 5
                                                })
                                                Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')
                                            }.width('100%')
                                        }.padding(15).borderWidth({
                                            bottom: 1
                                        }).borderColor('#efefef')
                                        ListItem() {
                                            Flex({
                                                direction: FlexDirection.Row,
                                                alignItems: ItemAlign.Center,
                                            }) {
                                                Image($r('app.media.grid3')).flexShrink(0).objectFit(ImageFit.Fill).width('42vp').height('42vp')
                                                Column() {
                                                    Text('菜单三').fontSize('14fp').width('100%')
                                                    Text('说明文字').fontSize('12fp').width('100%')
                                                }.padding({
                                                    left: 5
                                                })
                                                Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')
                                            }.width('100%')
                                        }.padding(15).borderWidth({
                                            bottom: 1
                                        }).borderColor('#efefef')
                                    }
                                    .width('100%')
                            }.alignItems(HorizontalAlign.Start)
                        }
                    }.height('100%').alignItems(HorizontalAlign.Start).backgroundColor('#fff')
 
                }
                .width('100%')
                .height('100%')
                .backgroundColor('#07c160')
                .title(this.NavigationTitle())
                .titleMode(NavigationTitleMode.Mini)
                .align(Alignment.Center)
                .hideBackButton(true)
        }.width('100%').height('100%')
    }
 
    @Builder
    NavigationTitle() {
        Column() {
            Text('首页')
                .width('100%')
                .textAlign(TextAlign.Center)
                .height('28vp')
                .fontSize('20fp')
                .fontWeight(500)
                .fontColor('#fff')
        }
    }
 
 
}
目录
相关文章
|
15天前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
50 3
|
12天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
54 8
|
13天前
|
人工智能 机器人 API
【通义】AI视界|谷歌Q3财报:Gemini API六个月增长14倍,公司超25%的新代码由AI生成
本文内容由通义自动生成,涵盖谷歌Q3财报、马斯克xAI融资、九巨头联盟挑战英伟达、Meta加大AI投入及麻省理工研究LLM与人脑相似性等热点资讯。更多精彩内容,请访问通通知道。
|
9天前
|
JSON API 数据格式
店铺所有商品列表接口json数据格式示例(API接口)
当然,以下是一个示例的JSON数据格式,用于表示一个店铺所有商品列表的API接口响应
|
22天前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索json数据格式示例(API接口)
拍立淘按图搜索API接口为电商平台和购物应用提供了强大的图像搜索功能,能够显著提升用户的购物体验和搜索效率。开发者可以根据自己的需求调用此接口,并处理返回的JSON格式数据来展示推荐商品
|
1月前
|
JSON JavaScript API
(API接口系列)商品详情数据封装接口json数据格式分析
在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦!
|
19天前
|
存储 数据管理 API
零代码能力:轻松搞定表单和API接口,少写80%后端代码,内含资源
小白接口(果创云 YesApi.cn)是一个零代码和低代码开发平台,提供一站式后端云服务,帮助开发者、学生、业余爱好者、工作室、中小企业及无IT技术人员的传统企业快速搭建应用、接口、服务和网站。平台提供500+免费API接口,支持在线API开发、在线表单、数据库管理、图片文件存储、会员管理等功能,无需后端开发经验,轻松实现数据处理和应用开发。
|
22天前
|
IDE 调度 开发工具
鸿蒙Flutter实战:08-如何调试代码
本文介绍了鸿蒙Flutter项目的开发环境搭建、配置、日志查看及调试方法。首先按照指南搭建开发环境,安装IDE插件;接着配置vscode的launch.json文件;通过IDE调试控制台或命令行查看日志;提供两种调试Flutter的方式,包括IDE直接运行和使用DevEco;最后介绍ArkTs和Webview的调试方法。
37 0
|
23天前
|
JSON API 数据格式
商品详情数据JSON格式示例参考(api接口)
JSON数据格式的商品详情数据通常包含商品的多个层级信息,以下是一个综合多个来源信息的JSON数据格式的商品详情数据示例参考:
|
26天前
|
JavaScript 前端开发
鸿蒙 NEXT 如何使用 @Styles 装饰器来优化我的组件代码?
【10月更文挑战第16天】在鸿蒙 NEXT 中,`@Styles` 装饰器用于优化组件的样式定义,使代码更清晰和易于维护。通过将样式属性封装到独立对象中,避免了冗长的内联样式,提高了代码的可读性和可维护性。使用步骤包括定义样式对象、在组件中引入并应用装饰器,支持多个样式对象的组合和动态应用。注意样式对象的属性名需与组件支持的样式属性一致,且后定义的样式会覆盖前者的同名属性。

热门文章

最新文章