HarmonyOS NEXT原生重榜发布-怎么能少一款鸿蒙可视化代码生成器
原创HarmonyOS NEXT原生重榜发布-怎么能少一款鸿蒙可视化代码生成器
原创
用户7154236
发布于 2024-10-25 10:45:02
发布于 2024-10-25 10:45:02
鸿蒙低代码可视化开发是华为鸿蒙（HarmonyOS）操作系统提供的一种高效、便捷的应用开发方式。以下是对鸿蒙低代码可视化的详细介绍：
一、概述
鸿蒙低代码可视化开发平台是基于华为鸿蒙操作系统构建的创新开发环境，旨在通过简化开发流程、降低技术门槛，加速应用从设计到上线的全过程。它融合了低代码开发的核心理念与鸿蒙系统的技术优势，为开发者提供了一条高效、便捷的应用开发之路。
二、特点
可视化设计：
- 开发者可以通过拖拽UI控件栏中的组件到画布上，轻松搭建出应用的界面布局。
- 同时，在属性样式栏中，开发者可以为每个组件设置详细的属性，如ID、大小、颜色、边距等，以实现精细化的界面设计。
丰富的组件库：
- 鸿蒙低代码开发平台提供了丰富的UI组件库和模板库，包括轮播Swiper、Flex、Image、Text等常用组件，以及api返回数据绑定和foreach循环绑定等高级功能。
- 这些组件和模板的集成极大地丰富了开发者的选择，提升了开发效率。
高效的数据交互：
- 平台支持与各种数据库和API接口进行数据交互，实现了数据的动态展示和更新。
- 开发者可以通过关联JS文件中的数据和方法，实现复杂的业务逻辑。
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')
}
}
} 无缝的代码衔接：
- 鸿蒙低代码开发平台支持整个项目源码的导出。开发者在完成可视化设计后，可以直接导出项目源码，并在DevEco Studio中继续编辑和优化。
- 这种无缝的衔接不仅提高了开发效率，还确保了设计成果能够顺利转化为可运行的应用程序。
多端适配：
- 鸿蒙低代码开发平台支持生成运行在不同设备和操作系统上的应用程序，实现了一次开发、多端运行的目标。
- 这极大地扩展了应用程序的适用范围和用户体验。
代码生成器
快速生成ArkUI、ArkTs代码生成器
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')
}
}
}三、应用场景
鸿蒙低代码可视化开发平台适用于各种应用场景，如企业信息化系统、移动应用、物联网设备等。它可以帮助企业快速构建出符合自身业务需求的应用程序，提高业务处理效率和用户体验。
综上所述，鸿蒙低代码可视化开发平台以其高效、易用、灵活的特点，为鸿蒙应用的开发带来了全新的可能。它不仅提高了开发效率、降低了技术门槛，还实现了应用的多端适配和快速迭代。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
腾讯云微搭低代码
微搭低代码是一个高性能的低代码开发平台，用户可通过拖拽式开发，可视化配置构建 PC Web、H5 和小程序应用。
支持打通企业内部数据，轻松实现企业微信管理、工作流、消息推送、用户权限等能力，实现企业内部系统管理。
连接微信生态，和微信支付、腾讯会议，腾讯文档等腾讯 SaaS 产品深度打通，支持原生小程序，助力企业内外部运营协同和营销管理。
腾讯云开发者
