鸿蒙可视化代码生成器神器来了

ArkTS 语言 ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。

自然简洁语法 ArkTS提供了简洁自然的声明式语法、组件化机制、数据-UI自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式，为开发者带来易学、易懂、极简开发的优质体验。

ArkUI ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具，帮助您提升HarmonyOS应用界面开发效率30%。您只需使用一套ArkTS API，就能在多个HarmonyOS设备上提供生动而流畅的用户界面体验。

但有了ArkUI后用户在使用官方可视化设计工具来设计界面上还是相当不给力的，DIY可视化团队对鸿蒙ArkUI快速可视化代码生成器做了改进，支持拖拉生成组件库代码，在线对接API快速集成第三方API能力，加快应用开发上线。DIY可视化拖拉生成ArkUI,让你解放前端界面布局的能力，快速生成自己的鸿蒙应用。

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 {

@Provide 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() {
    Column() {
        Navigation()
            .width('100%')
            .height('56vp')
            .backgroundColor('#07c160')
            .title(this.NavigationTitle())
            .titleMode(NavigationTitleMode.Mini)
            .align(Alignment.Center)
            .hideBackButton(true)
        Scroll() {
            Flex({
                direction: FlexDirection.Column
            }) {
                Flex() {
                    Swiper() {
                        Column() {
                            Image($r('app.media.pic1')).objectFit(ImageFit.Fill).width('100%').height('150vp')
                            Text('滑块一').width('100%').textAlign(TextAlign.Start).backgroundColor("rgba(0,0,0,0.28)").padding(10).position({
                                y: 110
                            })
                        }
                        Column() {
                            Image($r('app.media.pic2')).objectFit(ImageFit.Fill).width('100%').height('150vp')
                            Text('滑块二').width('100%').textAlign(TextAlign.Start).backgroundColor("rgba(0,0,0,0.28)").padding(10).position({
                                y: 110
                            })
                        }
                        Column() {
                            Image($r('app.media.pic3')).objectFit(ImageFit.Fill).width('100%').height('150vp')
                            Text('滑块三').width('100%').textAlign(TextAlign.Start).backgroundColor("rgba(0,0,0,0.28)").padding(10).position({
                                y: 110
                            })
                        }
                    }.interval(3000).autoPlay(true).loop(true)
                    .indicatorStyle({
                        size: 30,
                        selectedColor: '#fff',
                        color: 'rgba(51, 51, 51, 0.39)'
                    })
                }
                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(Math.ceil(this.data.data.length / 3) * 71 + 20).columnsTemplate('1fr 1fr 1fr ')
                .rowsGap(15).layoutDirection(GridDirection.Row)
                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('菜单一').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')
                }

            }.height('100%')
        }.height('100%').layoutWeight(1)
    }.alignItems(HorizontalAlign.Start).height('100%')
}

@Builder
NavigationTitle() {
    Column() {
        Text('首页')
            .width('100%')
            .textAlign(TextAlign.Center)
            .height('28vp')
            .fontSize('20fp')
            .fontWeight(500)
            .fontColor('#fff')
    }
}

}