介紹

鴻蒙低代碼可視化開發神器快速對鴻蒙ArkUI生成源碼，結合類似小程序類似設計，頁面設計底部菜單，支持宮格組件、輪播圖、圖文列表、圖片組件、文本內容組件，快速對接第三方HttpApi。通過鴻蒙擴展axios擴展庫加載數據源，在線API調試請求數據源、綁定數據源、生成源碼。在線的API源碼快速生成TS接口實現。

可視化低代碼神器

鴻蒙可視化拖拽開發神器無須編程 零代碼基礎 所見即所得設計工具輕松制作ArkUI、生成ArkTS源碼。
涵蓋ArkUI各個方面，助力HarmonyOS開發者。

設計完成快帶生成ArkUI源碼。

幫助您提升HarmonyOS應用界面開發效率80%

高效可視化開發工具快速與DevEco Studio開發聯調。

強大的代碼生成器，讓您感受先進的生產力，讓您的想法快速上線。

基本使用

組件使用

把組件拖過來，修改對應的屬性。選擇想要的組件拖至中央設計區，修改相對應的屬性。

生成源碼

點擊查看源碼，快速生成鴻蒙對應的源碼

API數據源綁定

鴻蒙低代碼可視化開發神器支持快速對接任意第三方http api接口，接口返回數據，然後進行數據綁定顯示。

連接第三方HTTPAPI

調用API返回結果集用變量保存存起

綁定數據源

根據API返回的數據結果集變量，快速綁定循環列表數組

綁定顯示數據源

循環綁定數據源子集

生成源碼

查看源碼，快速生成鴻蒙axios http請求接口及interface相關定義以及組件顯示綁定

表單組件

鴻蒙低代碼可視化開發神器目前支持了常見文本輸入、多行文本輸入、單選、復選、開關、下拉列表、下拉日期等常用的組件。

import {
    navigateTo
} from '../common/Page'
import {
    IDynamicObject
} from '../component/IType';
import DiygwRadio from '../component/Radio'
import DiygwInput from '../component/Input'
import DiygwTextarea from '../component/Textarea'
import DiygwCheckbox from '../component/Checkbox'
import DiygwSwitch from '../component/Switch'
import DiygwSelect from '../component/Select'
import DiygwDate from '../component/Date'
import DiygwSlider from '../component/Slider'
@Entry
@Component
export struct Diy {
    @State radioDatas: IDynamicObject[] = [{
        value: '1',
        label: '選項一'
    }, {
        value: '2',
        label: '選項二'
    }, {
        value: '3',
        label: '選項三'
    }];
    @State radio: string = '1';
    @State radio1Datas: IDynamicObject[] = [{
        value: '1',
        label: '選項一'
    }, {
        value: '2',
        label: '選項二'
    }, {
        value: '3',
        label: '選項三'
    }];
    @State radio1: string = '1';
    @State input: string = '';
    @State textarea: string = '';
    @State checkboxDatas: IDynamicObject[] = [{
        value: '1',
        label: '選項一'
    }, {
        value: '2',
        label: '選項二'
    }, {
        value: '3',
        label: '選項三'
    }];
    @State checkbox: string[] = ['1', '2'];
    @State checkbox1Datas: IDynamicObject[] = [{
        value: '1',
        label: '選項一'
    }, {
        value: '2',
        label: '選項二'
    }, {
        value: '3',
        label: '選項三'
    }];
    @State checkbox1: string[] = ['1', '2'];
    @State switched: number = 1;
    @State sctDatas: IDynamicObject[] = [{
        value: '1',
        label: '選項一'
    }, {
        value: '2',
        label: '選項二'
    }, {
        value: '3',
        label: '選項三'
    }];
    @State sct: string = '1';
    @State date: string = '';
    @State slider: number = 66;
    async onPageShow() {}
    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
                }) {
                    DiygwRadio({
                        label: '單選',
                        value: $radio,
                        list: $radioDatas
                    })
                    DiygwRadio({
                        label: '單選',
                        value: $radio1,
                        itemWidth: '100%',
                        list: $radio1Datas
                    })
                    DiygwInput({
                        label: '標題',
                        value: $input
                    })
                    DiygwTextarea({
                        label: '標題',
                        value: $textarea
                    })
                    DiygwCheckbox({
                        label: '復選',
                        value: $checkbox,
                        itemWidth: '100%',
                        list: $checkboxDatas
                    })
                    DiygwCheckbox({
                        label: '復選',
                        value: $checkbox1,
                        list: $checkbox1Datas
                    })
                    DiygwSwitch({
                        label: '開關',
                        value: $switched
                    })
                    DiygwSelect({
                        label: '下拉',
                        value: $sct,
                        list: $sctDatas
                    })
                    DiygwDate({
                        label: '日期',
                        value: $date
                    })
                    DiygwSlider({
                        label: '滑塊',
                        value: $slider
                    })
                }.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')
        }
    }
}
1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54.55.56.57.58.59.60.61.62.63.64.65.66.67.68.69.70.71.72.73.74.75.76.77.78.79.80.81.82.83.84.85.86.87.88.89.90.91.92.93.94.95.96.97.98.99.100.101.102.103.104.105.106.107.108.109.110.111.112.113.114.115.116.117.118.119.120.121.122.123.124.125.126.127.128.129.130.131.132.133.134.135.136.137.138.139.140.141.142.143.144.145.146.147.148.149.150.151.152.153.154.155.156.157.158.159.160.161.162.163.164.165.166.167.168.

全局底部菜單設置

源碼導出

源碼導出，會將整個設計項目導出。

目前工具也還在研發階段，也在對鴻蒙開發熟悉踩坑的過程。用自己實際行動對鴻蒙HarmonyOS ArkUI助力，希望鴻蒙越來越好。