HarmonyOS鸿蒙Next《伴时匣》app开发技术分享--表单提交准备(4)
HarmonyOS鸿蒙Next《伴时匣》app开发技术分享–表单提交准备(4)
技术栈
Appgallery connect
开发准备
上一节我们实现了用户登录功能,现在我们进入首页,可以开始准备着手发布我们的日期计划了,在这之前我们先实现信息表的创建。在首页实现一个标题栏,一个悬浮的按钮。
功能分析
我们的信息表要展示的内容很多,首先是我们的事件名称,目标日期选择,公历农历,正数倒数,倒数类目的选择,是否实现置顶效果,是否显示精确时间,事件颜色,事件图标,事件心情,事件天气,跟用户绑定,跟绑定的关系用户绑定等。
功能开发
我们先实现对应的表的创建
{
"objectTypeName": "push_table_day",
"fields": [
{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
{"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
{"fieldName": "title", "fieldType": "String"},
{"fieldName": "day", "fieldType": "String"},
{"fieldName": "time_type", "fieldType": "Integer"},
{"fieldName": "menu_id", "fieldType": "Integer"},
{"fieldName": "is_show_top", "fieldType": "Boolean"},
{"fieldName": "is_show_time", "fieldType": "Boolean"},
{"fieldName": "tab_color_id", "fieldType": "Integer"},
{"fieldName": "tab_icon_id", "fieldType": "Integer"},
{"fieldName": "tab_mood_id", "fieldType": "Integer"},
{"fieldName": "tab_weather_id", "fieldType": "Integer"},
{"fieldName": "bind_user_id", "fieldType": "Integer"},
{"fieldName": "bind_type", "fieldType": "Integer"},
{"fieldName": "table_message_id", "fieldType": "Integer"}
],
"indexes": [
{"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
],
"permissions": [
{"role": "World", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
]
}
db类
import { cloudDatabase } from '@kit.CloudFoundationKit';
class push_table_day extends cloudDatabase.DatabaseObject {
public id: number;
public user_id = 0;
public title: string;
public day: string;
public time_type: number;
public menu_id: number;
public is_show_top: boolean;
public is_show_time: boolean;
public tab_color_id: number;
public tab_icon_id: number;
public tab_mood_id: number;
public tab_weather_id: number;
public bind_user_id: number;
public bind_type: number;
public table_message_id: number;
public naturalbase_ClassName(): string {
return 'push_table_day';
}
}
export { push_table_day };
实体类
class PushTableDay {
id: number;
user_id: number = 0;
title: string;
day: string;
time_type: number;
menu_id: number;
is_show_top: boolean;
is_show_time: boolean;
tab_color_id: number;
tab_icon_id: number;
tab_mood_id: number;
tab_weather_id: number;
bind_user_id: number;
bind_type: number;
table_message_id: number;
constructor() {}
setId(id: number): void {
this.id = id;
}
getId(): number {
return this.id;
}
setUser_id(user_id: number): void {
this.user_id = user_id;
}
getUser_id(): number {
return this.user_id;
}
setTitle(title: string): void {
this.title = title;
}
getTitle(): string {
return this.title;
}
setDay(day: string): void {
this.day = day;
}
getDay(): string {
return this.day;
}
setTime_type(time_type: number): void {
this.time_type = time_type;
}
getTime_type(): number {
return this.time_type;
}
setMenu_id(menu_id: number): void {
this.menu_id = menu_id;
}
getMenu_id(): number {
return this.menu_id;
}
setIs_show_top(is_show_top: boolean): void {
this.is_show_top = is_show_top;
}
getIs_show_top(): boolean {
return this.is_show_top;
}
setIs_show_time(is_show_time: boolean): void {
this.is_show_time = is_show_time;
}
getIs_show_time(): boolean {
return this.is_show_time;
}
setTab_color_id(tab_color_id: number): void {
this.tab_color_id = tab_color_id;
}
getTab_color_id(): number {
return this.tab_color_id;
}
setTab_icon_id(tab_icon_id: number): void {
this.tab_icon_id = tab_icon_id;
}
getTab_icon_id(): number {
return this.tab_icon_id;
}
setTab_mood_id(tab_mood_id: number): void {
this.tab_mood_id = tab_mood_id;
}
getTab_mood_id(): number {
return this.tab_mood_id;
}
setTab_weather_id(tab_weather_id: number): void {
this.tab_weather_id = tab_weather_id;
}
getTab_weather_id(): number {
return this.tab_weather_id;
}
setBind_user_id(bind_user_id: number): void {
this.bind_user_id = bind_user_id;
}
getBind_user_id(): number {
return this.bind_user_id;
}
setBind_type(bind_type: number): void {
this.bind_type = bind_type;
}
getBind_type(): number {
return this.bind_type;
}
setTable_message_id(table_message_id: number): void {
this.table_message_id = table_message_id;
}
getTable_message_id(): number {
return this.table_message_id;
}
}
export { PushTableDay };
我们实现首页标题栏和悬浮添加按钮
import { CommonTopBar } from './widget/CommonTopBar'
@Entry
@Component
struct Index {
build() {
Column(){
CommonTopBar({ title: "主页", alpha: 0, titleAlignment: TextAlign.Center ,backButton:false})
Stack({alignContent:Alignment.BottomEnd}){
Column(){
List(){}
}
.height('100')
.width('100%')
Text("+")
.fontSize(38)
.width(60)
.textAlign(TextAlign.Center)
.backgroundColor("#ff65c8ee")
.fontWeight(FontWeight.Bold)
.fontColor(Color.Black)
.height(60)
.borderRadius(30)
.margin({bottom:80,right:40})
}
.height('100%')
.width('100%')
}
.height('100%')
.width('100%')
.backgroundColor(Color.White)
}
}
这样我们就完成了表单的创建和标题栏悬浮按钮的实现
更多关于HarmonyOS鸿蒙Next《伴时匣》app开发技术分享--表单提交准备(4)的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
在HarmonyOS鸿蒙Next开发《伴时匣》表单提交时,需使用ArkUI声明式开发。主要步骤如下:
- 使用@State/@Link装饰器管理表单数据状态
- 通过TextInput/TextArea等组件构建表单UI
- 采用FormComponent容器组织表单元素
- 使用http模块发起网络请求提交数据
- 通过promise处理异步响应
关键代码结构:
@Entry
@Component
struct FormPage {
[@State](/user/State) formData: Object = {}
build() {
FormComponent() {
// 表单内容
}
}
submitForm() {
// 提交逻辑
}
}
更多关于HarmonyOS鸿蒙Next《伴时匣》app开发技术分享--表单提交准备(4)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
从技术实现来看,这个HarmonyOS Next应用开发案例展示了几个关键点:
- 云数据库设计规范:
- 表结构定义合理,包含主键、用户关联字段和各种业务字段
- 权限控制设置完善,覆盖了不同角色的CRUD权限
- 使用了AppGallery Connect的Cloud DB服务
- 代码结构清晰:
- 采用三层架构:数据库对象类(DB类)、业务实体类、UI组件
- 类型定义明确,字段注释完整
- 使用了ArkTS的装饰器语法(@Entry @Component)
- UI实现要点:
- 顶部导航栏使用自定义组件CommonTopBar
- 悬浮按钮通过Stack布局实现定位
- 响应式设计使用百分比布局
建议可以优化的地方:
- 数据库字段可考虑增加创建/更新时间戳
- 实体类可以使用更简洁的TypeScript语法
- 悬浮按钮建议使用官方FAB组件
整体实现符合HarmonyOS开发规范,后续可以继续完善表单验证和数据绑定部分。