直接在线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') } } }
