介紹

鴻蒙低代碼可視化開(kāi)發(fā)神器快速對(duì)鴻蒙ArkUI生成源碼，結(jié)合類似小程序類似設(shè)計(jì)，頁(yè)面設(shè)計(jì)底部菜單，支持宮格組件、輪播圖、圖文列表、圖片組件、文本內(nèi)容組件，快速對(duì)接第三方HttpApi。通過(guò)鴻蒙擴(kuò)展axios擴(kuò)展庫(kù)加載數(shù)據(jù)源，在線API調(diào)試請(qǐng)求數(shù)據(jù)源、綁定數(shù)據(jù)源、生成源碼。在線的API源碼快速生成TS接口實(shí)現(xiàn)。

可視化低代碼神器

鴻蒙可視化拖拽開(kāi)發(fā)神器無(wú)須編程零代碼基礎(chǔ) 所見(jiàn)即所得設(shè)計(jì)工具輕松制作ArkUI、生成ArkTS源碼。
涵蓋ArkUI各個(gè)方面，助力HarmonyOS開(kāi)發(fā)者。

設(shè)計(jì)完成快帶生成ArkUI源碼。

幫助您提升HarmonyOS應(yīng)用界面開(kāi)發(fā)效率80%

高效可視化開(kāi)發(fā)工具快速與DevEco Studio開(kāi)發(fā)聯(lián)調(diào)。

強(qiáng)大的代碼生成器，讓您感受先進(jìn)的生產(chǎn)力，讓您的想法快速上線。

基本使用

組件使用

把組件拖過(guò)來(lái)，修改對(duì)應(yīng)的屬性。選擇想要的組件拖至中央設(shè)計(jì)區(qū)，修改相對(duì)應(yīng)的屬性。

非鴻蒙官方低代碼源碼生成器（鴻蒙代碼開(kāi)源）

生成源碼

點(diǎn)擊查看源碼，快速生成鴻蒙對(duì)應(yīng)的源碼

非鴻蒙官方低代碼源碼生成器（鴻蒙代碼開(kāi)源）

API數(shù)據(jù)源綁定

鴻蒙低代碼可視化開(kāi)發(fā)神器支持快速對(duì)接任意第三方http api接口，接口返回?cái)?shù)據(jù)，然后進(jìn)行數(shù)據(jù)綁定顯示。

連接第三方HTTPAPI

調(diào)用API返回結(jié)果集用變量保存存起

非鴻蒙官方低代碼源碼生成器（鴻蒙代碼開(kāi)源）

綁定數(shù)據(jù)源

根據(jù)API返回的數(shù)據(jù)結(jié)果集變量，快速綁定循環(huán)列表數(shù)組

非鴻蒙官方低代碼源碼生成器（鴻蒙代碼開(kāi)源）

綁定顯示數(shù)據(jù)源

循環(huán)綁定數(shù)據(jù)源子集

非鴻蒙官方低代碼源碼生成器（鴻蒙代碼開(kāi)源）

生成源碼

查看源碼，快速生成鴻蒙axios http請(qǐng)求接口及interface相關(guān)定義以及組件顯示綁定

非鴻蒙官方低代碼源碼生成器（鴻蒙代碼開(kāi)源）

表單組件

鴻蒙低代碼可視化開(kāi)發(fā)神器目前支持了常見(jiàn)文本輸入、多行文本輸入、單選、復(fù)選、開(kāi)關(guān)、下拉列表、下拉日期等常用的組件。

非鴻蒙官方低代碼源碼生成器（鴻蒙代碼開(kāi)源）

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@Componentexport struct Diy { @State radioDatas: IDynamicObject[] = [{ value: '1', label: '選項(xiàng)一' }, { value: '2', label: '選項(xiàng)二' }, { value: '3', label: '選項(xiàng)三' }]; @State radio: string = '1'; @State radio1Datas: IDynamicObject[] = [{ value: '1', label: '選項(xiàng)一' }, { value: '2', label: '選項(xiàng)二' }, { value: '3', label: '選項(xiàng)三' }]; @State radio1: string = '1'; @State input: string = ''; @State textarea: string = ''; @State checkboxDatas: IDynamicObject[] = [{ value: '1', label: '選項(xiàng)一' }, { value: '2', label: '選項(xiàng)二' }, { value: '3', label: '選項(xiàng)三' }]; @State checkbox: string[] = ['1', '2']; @State checkbox1Datas: IDynamicObject[] = [{ value: '1', label: '選項(xiàng)一' }, { value: '2', label: '選項(xiàng)二' }, { value: '3', label: '選項(xiàng)三' }]; @State checkbox1: string[] = ['1', '2']; @State switched: number = 1; @State sctDatas: IDynamicObject[] = [{ value: '1', label: '選項(xiàng)一' }, { value: '2', label: '選項(xiàng)二' }, { value: '3', label: '選項(xiàng)三' }]; @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: '標(biāo)題', value: $input }) DiygwTextarea({ label: '標(biāo)題', value: $textarea }) DiygwCheckbox({ label: '復(fù)選', value: $checkbox, itemWidth: '100%', list: $checkboxDatas }) DiygwCheckbox({ label: '復(fù)選', value: $checkbox1, list: $checkbox1Datas }) DiygwSwitch({ label: '開(kāi)關(guān)', 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.