非鸿蒙官方低代码源码生成器

介绍

鸿蒙低代码可视化开发神器快速对鸿蒙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%')}@BuilderNavigationTitle() {Column() {Text('可视化').width('100%').textAlign(TextAlign.Center).height('28vp').fontSize('20fp').fontWeight(500).fontColor('#fff')}}}

##全局底部菜单设置
 

源码导出

源码导出，会将整个设计项目导出。

目前工具也还在研发阶段，也在对鸿蒙开发熟悉踩坑的过程。用自己实际行动对鸿蒙HarmonyOS ArkUI助力，希望鸿蒙越来越好。