介绍
鸿蒙低代码可视化开发神器快速对鸿蒙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') } } }
##全局底部菜单设置
源码导出
源码导出，会将整个设计项目导出。
目前工具也还在研发阶段，也在对鸿蒙开发熟悉踩坑的过程。用自己实际行动对鸿蒙HarmonyOS ArkUI助力，希望鸿蒙越来越好。
