回复
HarmonyOS NEXT原生重榜发布-怎么能少了一款鸿蒙可视化代码生成器
diygw_com
发布于 2024-10-25 11:12
浏览
0收藏
鸿蒙低代码可视化开发是华为鸿蒙（HarmonyOS）操作系统提供的一种高效、便捷的应用开发方式。以下是对鸿蒙低代码可视化的详细介绍：
一、概述
鸿蒙低代码可视化开发平台是基于华为鸿蒙操作系统构建的创新开发环境，旨在通过简化开发流程、降低技术门槛，加速应用从设计到上线的全过程。它融合了低代码开发的核心理念与鸿蒙系统的技术优势，为开发者提供了一条高效、便捷的应用开发之路。
二、特点
1. 可视化设计：
• 开发者可以通过拖拽UI控件栏中的组件到画布上，轻松搭建出应用的界面布局。
• 同时，在属性样式栏中，开发者可以为每个组件设置详细的属性，如ID、大小、颜色、边距等，以实现精细化的界面设计。
2. 丰富的组件库：
• 鸿蒙低代码开发平台提供了丰富的UI组件库和模板库，包括轮播Swiper、Flex、Image、Text等常用组件，以及api返回数据绑定和foreach循环绑定等高级功能。
• 这些组件和模板的集成极大地丰富了开发者的选择，提升了开发效率。
• 
3. 高效的数据交互：
• 平台支持与各种数据库和API接口进行数据交互，实现了数据的动态展示和更新。
• 开发者可以通过关联JS文件中的数据和方法，实现复杂的业务逻辑。
4. 无缝的代码衔接：
• 鸿蒙低代码开发平台支持整个项目源码的导出。开发者在完成可视化设计后，可以直接导出项目源码，并在DevEco Studio中继续编辑和优化。
• 这种无缝的衔接不仅提高了开发效率，还确保了设计成果能够顺利转化为可运行的应用程序。
快速查看arkui arkts源码
import {
navigateTo
} from '../common/Page'
import axios, {
AxiosResponse
} from '@ohos/axios'
interface IDataDataAttr {
"title": string
}
interface IDataData {
"img": string,
"remark": string,
"id": number,
"title": string,
"attr": IDataDataAttr
}
interface IData {
"msg": string,
"code": number,
"data": IDataData[]
}
@Entry
@Component
export struct Index {
@State data: IData = {
"code": 0,
"msg": "",
"data": [{
"title": "",
"remark": "",
"id": 0,
"attr": {
"title": ""
},
"img": ""
}]
}
async dataApi() {
try {
const response: AxiosResponse = await axios.post < IData,
AxiosResponse < IData > , null > ('https://php.diygw.com/article.php');
this.data = response ? response.data : null
} catch (error) {
console.error(JSON.stringify(error));
}
}
async onPageShow() {
await this.dataApi()
}
async aboutToAppear() {
await this.onPageShow()
}
build() {
Row() {
Navigation() {
Column() {
Scroll() {
Column() {
Flex() {
Swiper() {
Column() {
Image($r('app.media.pic1')).objectFit(ImageFit.Fill).width('100%').height('150vp') Text('滑块一').width('100%').textAlign(TextAlign.Start).backgroundColor("rgba(0,0,0,0.28)").padding(10).position({
y: 110
})
}
Column() {
Image($r('app.media.pic2')).objectFit(ImageFit.Fill).width('100%').height('150vp') Text('滑块二').width('100%').textAlign(TextAlign.Start).backgroundColor("rgba(0,0,0,0.28)").padding(10).position({
y: 110
})
}
Column() {
Image($r('app.media.pic3')).objectFit(ImageFit.Fill).width('100%').height('150vp') Text('滑块三').width('100%').textAlign(TextAlign.Start).backgroundColor("rgba(0,0,0,0.28)").padding(10).position({
y: 110
})
}
}.interval(3000).autoPlay(true).loop(true).indicatorStyle({
size: 30,
selectedColor: '#fff',
color: 'rgba(51, 51, 51, 0.39)'
})
}.width('100%')
Grid() {
ForEach(this.data.data, (item) => {
GridItem() {
Column({
space: 5
}) {
Image(item.img).objectFit(ImageFit.Fill).width('42vp').height('42vp') Text(item.title).fontSize('12fp').width('100%').textAlign(TextAlign.Center)
}.width('100%')
}
}, item => JSON.stringify(item));
}.padding({
top: '10vp',
bottom: '10vp'
}).height(this.data.data.length / 3 * 91 + 20).columnsTemplate('1fr 1fr 1fr ').rowsGap(15).layoutDirection(GridDirection.Row).width('100%')
List() {
ListItem() {
Flex({
direction: FlexDirection.Row,
alignItems: ItemAlign.Center,
}) {
Image($r('app.media.grid1')).flexShrink(0).objectFit(ImageFit.Fill).width('42vp').height('42vp') Column() {
Text('菜单一111').fontSize('14fp').width('100%') Text('说明文字').fontSize('12fp').width('100%')
}.padding({
left: 5
}) Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')
}.width('100%')
}.padding(15).borderWidth({
bottom: 1
}).borderColor('#efefef') ListItem() {
Flex({
direction: FlexDirection.Row,
alignItems: ItemAlign.Center,
}) {
Image($r('app.media.grid2')).flexShrink(0).objectFit(ImageFit.Fill).width('42vp').height('42vp') Column() {
Text('菜单二').fontSize('14fp').width('100%') Text('说明文字').fontSize('12fp').width('100%')
}.padding({
left: 5
}) Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')
}.width('100%')
}.padding(15).borderWidth({
bottom: 1
}).borderColor('#efefef') ListItem() {
Flex({
direction: FlexDirection.Row,
alignItems: ItemAlign.Center,
}) {
Image($r('app.media.grid3')).flexShrink(0).objectFit(ImageFit.Fill).width('42vp').height('42vp') Column() {
Text('菜单三').fontSize('14fp').width('100%') Text('说明文字').fontSize('12fp').width('100%')
}.padding({
left: 5
}) Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')
}.width('100%')
}.padding(15).borderWidth({
bottom: 1
}).borderColor('#efefef')
}.width('100%')
}.alignItems(HorizontalAlign.Start)
}
}.height('100%').alignItems(HorizontalAlign.Start).backgroundColor('#fff')
}
.width('100%')
.height('100%')
.backgroundColor('#07c160')
.title(this.NavigationTitle())
.titleMode(NavigationTitleMode.Mini)
.align(Alignment.Center)
.hideBackButton(true)
}.width('100%').height('100%')
}
@Builder
NavigationTitle() {
Column() {
Text('首页')
.width('100%')
.textAlign(TextAlign.Center)
.height('28vp')
.fontSize('20fp')
.fontWeight(500)
.fontColor('#fff')
}
}
}
ArkUI Column Row布局可视化代码生成器
import {
navigateTo
} from '../common/Page'
@Entry
@Component
export struct User {
async onPageShow() {}
async aboutToAppear() {
await this.onPageShow()
}
build() {
Row() {
Column() {
Scroll() {
Column() {
Column() {
Image($r('app.media.pic1')).objectFit(ImageFit.Fill).height('60vp').width('60vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('DIY可视化个人中心').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(HorizontalAlign.Center).width('100%').padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
Row() {
Column() {
Image($r('app.media.icon1_ht')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('消息私信').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(HorizontalAlign.Center).width('25%').padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
Column() {
Image($r('app.media.icon1_pl')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('浏览历史').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(HorizontalAlign.Center).width('25%').padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
Column() {
Image($r('app.media.icon1_tz')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('我的订单').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(HorizontalAlign.Center).width('25%').padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
Column() {
Image($r('app.media.icon1_sz1')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('创作中心').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(HorizontalAlign.Center).width('25%').padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(VerticalAlign.Top).width('100%')
Row() {
Column() {
Image($r('app.media.icon1_ht')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('消息私信').flexShrink(0).fontSize('15fp').fontColor('#ececec').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(HorizontalAlign.Center).width('22.33%').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).borderRadius({
topLeft: '6vp',
topRight: '6vp',
bottomLeft: '6vp',
bottomRight: '6vp'
}).backgroundColor("#f15a5a")
Column() {
Image($r('app.media.icon1_tz')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
}).backgroundColor("#03c92e")
Text('我的订单').flexShrink(0).fontSize('15fp').fontColor('#fdfdfd').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(HorizontalAlign.Center).width('22.33%').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).borderRadius({
topLeft: '6vp',
topRight: '6vp',
bottomLeft: '6vp',
bottomRight: '6vp'
}).backgroundColor("#01c84d")
Column() {
Image($r('app.media.icon1_sz1')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('创作中心').flexShrink(0).fontSize('15fp').fontColor('#e5e5e5').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(HorizontalAlign.Center).width('22.33%').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).borderRadius({
topLeft: '6vp',
topRight: '6vp',
bottomLeft: '6vp',
bottomRight: '6vp'
}).backgroundColor("#0151d8")
Column() {
Image($r('app.media.icon1_sz1')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('创作中心').flexShrink(0).fontSize('15fp').fontColor('#e9e9e9').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(HorizontalAlign.Center).width('22.33%').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).borderRadius({
topLeft: '6vp',
topRight: '6vp',
bottomLeft: '6vp',
bottomRight: '6vp'
}).backgroundColor("#e7066b")
}.alignItems(VerticalAlign.Top).width('100%')
Column() {
Row() {
Image($r('app.media.icon1_ht')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('消息私信').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(VerticalAlign.Center).width('97.33%').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).borderWidth({
bottom: '1vp'
}).borderColor({
bottom: "#a9a9a9"
}).borderStyle(BorderStyle.Solid)
Row() {
Image($r('app.media.icon1_pl')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('浏览历史').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(VerticalAlign.Center).width('97.33%').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).borderWidth({
bottom: '1vp'
}).borderColor({
bottom: "#a9a9a9"
}).borderStyle(BorderStyle.Solid)
Row() {
Image($r('app.media.icon1_tz')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('我的订单').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(VerticalAlign.Center).width('97.33%').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).borderWidth({
bottom: '1vp'
}).borderColor({
bottom: "#a9a9a9"
}).borderStyle(BorderStyle.Solid)
Row() {
Image($r('app.media.icon1_tz')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('我的订单').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(VerticalAlign.Center).width('97.33%').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).borderWidth({
bottom: '1vp'
}).borderColor({
bottom: "#a9a9a9"
}).borderStyle(BorderStyle.Solid)
Row() {
Image($r('app.media.icon1_tz')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('我的订单').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(VerticalAlign.Center).width('97.33%').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).borderWidth({
bottom: '1vp'
}).borderColor({
bottom: "#a9a9a9"
}).borderStyle(BorderStyle.Solid)
Row() {
Image($r('app.media.icon1_tz')).objectFit(ImageFit.Fill).height('40vp').width('40vp').borderRadius({
topLeft: '60vp',
topRight: '60vp',
bottomLeft: '60vp',
bottomRight: '60vp'
})
Text('我的订单').flexShrink(0).fontSize('15fp').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
})
}.alignItems(VerticalAlign.Center).width('97.33%').margin({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).padding({
left: '5vp',
right: '5vp',
top: '5vp',
bottom: '5vp'
}).borderWidth({
bottom: '1vp'
}).borderColor({
bottom: "#a9a9a9"
}).borderStyle(BorderStyle.Solid)
}.alignItems(HorizontalAlign.Start).width('100%')
}.alignItems(HorizontalAlign.Start)
}
}.height('100%').alignItems(HorizontalAlign.Start).backgroundColor('#fff')
}.width('100%').height('100%')
}
@Builder
NavigationTitle() {
Column() {
Text('个人中心')
.width('100%')
.textAlign(TextAlign.Center)
.height('28vp')
.fontSize('20fp')
.fontWeight(500)
.fontColor('#fff')
}
}
}
5. 多端适配：
鸿蒙低代码开发平台支持生成运行在不同设备和操作系统上的应用程序，实现了一次开发、多端运行的目标。
这极大地扩展了应用程序的适用范围和用户体验。
三、优势
- 提高开发效率：
• 鸿蒙低代码开发平台通过简化开发流程和减少编码量，显著提高了应用开发效率。
• 开发者可以更快地构建出功能丰富、界面美观的应用程序，满足市场需求。 - 降低技术门槛：
• 对于非专业开发者或初学者来说，鸿蒙低代码平台降低了技术门槛。
• 他们无需深入了解复杂的编程语言和框架，即可通过拖拽和配置的方式完成应用开发。 - 易于维护和升级：
• 由于代码量较少且结构清晰，鸿蒙低代码开发的应用更易于维护和升级。
• 开发者可以更快地定位和解决问题，确保应用程序的稳定性和安全性。
四、应用场景
鸿蒙低代码可视化开发平台适用于各种应用场景，如企业信息化系统、移动应用、物联网设备等。它可以帮助企业快速构建出符合自身业务需求的应用程序，提高业务处理效率和用户体验。
综上所述，鸿蒙低代码可视化开发平台以其高效、易用、灵活的特点，为鸿蒙应用的开发带来了全新的可能。它不仅提高了开发效率、降低了技术门槛，还实现了应用的多端适配和快速迭代。
赞
收藏
回复
相关推荐
