非鸿蒙官方低代码源码生成器 原创 精华

diygw_com
发布于 2024-2-1 22:54
浏览
4收藏

@[toc]ArkUI低代码源码生成器

介绍

鸿蒙低代码可视化开发神器快速对鸿蒙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助力,希望鸿蒙越来越好。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
7
收藏 4
回复
举报
10条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

插眼关注了

回复
2024-2-2 10:26:04
mb607a3af12aece
mb607a3af12aece

不错不错,支持一个

回复
2024-2-4 11:03:22
droidzxy
droidzxy

太酷啦

回复
2024-2-7 10:22:33
耳仔饼
耳仔饼

我还以为已经出了呢,支持一下吧

回复
2024-2-16 16:47:32
diygw_com
diygw_com

是的哟 已经支持生成代码了

回复
2024-2-18 13:48:53
qq58b7cd575efa1
qq58b7cd575efa1

不错不错,支持一个

回复
2024-2-20 10:42:43
耀华河马
耀华河马

低代码很实用

回复
2024-2-21 18:19:14
殇时云起
殇时云起

出了一定试试

回复
2024-5-13 16:43:16
FlashinMiami
FlashinMiami

现在有官网吗

回复
2024-5-14 11:49:44
diygw_com
diygw_com 回复了 FlashinMiami
现在有官网吗

DIYGW可视化 搜下就有了

回复
2024-6-11 22:07:47
回复
    相关推荐