![cover](https://img-blog.csdnimg.cn/img_convert/4908e9fac49dfcfa647128a9269fcbcd.png)
非鸿蒙官方低代码源码生成器
鸿蒙低代码可视化开发神器快速对鸿蒙ArkUI生成源码,结合类似小程序类似设计,页面设计底部菜单,支持宫格组件、轮播图、图文列表、图片组件、文本内容组件,快速对接第三方HttpApi。通过鸿蒙扩展axios扩展库加载数据源,在线API调试请求数据源、绑定数据源、生成源码。在线的API源码快速生成TS接口实现。
介绍
鸿蒙低代码可视化开发神器快速对鸿蒙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助力,希望鸿蒙越来越好。
更多推荐
所有评论(0)