当前位置：首页 > news >正文

创建目标模块 Cordova 与 OpenHarmony 混合开发实战

news 2026/3/26 7:52:11

📌 概述

创建目标模块允许用户创建和编辑喝茶目标。该模块集成了 Cordova 框架与 OpenHarmony 原生能力，提供了完整的目标创建和编辑功能。用户可以设置目标名称、目标值、截止日期等信息。模块支持目标模板，帮助用户快速创建常见目标。

🔗 完整流程

第一步：目标表单初始化

当用户进入创建目标页面时，应用会加载目标模板列表。用户可以选择模板快速创建目标，或从空白表单开始。应用会显示当前日期作为默认值。

第二步：目标信息输入与验证

用户在表单中输入目标信息。应用会实时验证用户输入的数据，确保目标值、截止日期等信息有效。当用户输入不合法的数据时，应用会显示错误提示。

第三步：目标保存与同步

当用户点击保存按钮时，应用会进行最终的数据验证。如果所有字段都通过验证，应用会将目标保存到 IndexedDB 数据库中。同时，应用会通过 Cordova 调用原生插件，将数据同步到应用的关系型数据库中。

🔧 Web 代码实现

HTML 目标创建表单

<divid="create-goal-page"class="page"><divclass="page-header"><h1>创建目标</h1></div><divclass="template-selector"><label>选择模板:</label><selectid="goal-template"onchange="applyTemplate()"><optionvalue="">空白目标</option><optionvalue="monthly-count">月度喝茶次数</option><optionvalue="monthly-expense">月度消费金额</option><optionvalue="weekly-count">周度喝茶次数</option></select></div><formid="goal-form"class="form"><divclass="form-group"><labelfor="goal-name">目标名称 *</label><inputtype="text"id="goal-name"name="name"required></div><divclass="form-group"><labelfor="goal-description">目标描述</label><textareaid="goal-description"name="description"rows="3"></textarea></div><divclass="form-group"><labelfor="goal-target-value">目标值 *</label><inputtype="number"id="goal-target-value"name="targetValue"min="0"step="0.01"required></div><divclass="form-group"><labelfor="goal-deadline">截止日期 *</label><inputtype="date"id="goal-deadline"name="deadline"required></div><divclass="form-actions"><buttontype="submit"class="btn btn-primary">保存目标</button><buttontype="button"class="btn btn-secondary"onclick="navigateTo('goal-list')">取消</button></div></form></div>

创建目标页面包含模板选择器和目标表单。用户可以选择模板快速创建目标。

创建目标逻辑

constgoalTemplates={'monthly-count':{name:'月度喝茶目标',description:'每月喝茶次数目标',targetValue:20,daysOffset:30},'monthly-expense':{name:'月度消费目标',description:'每月消费金额目标',targetValue:500,daysOffset:30},'weekly-count':{name:'周度喝茶目标',description:'每周喝茶次数目标',targetValue:5,daysOffset:7}};functionapplyTemplate(){consttemplateId=document.getElementById('goal-template').value;if(!templateId){document.getElementById('goal-form').reset();return;}consttemplate=goalTemplates[templateId];if(template){document.getElementById('goal-name').value=template.name;document.getElementById('goal-description').value=template.description;document.getElementById('goal-target-value').value=template.targetValue;// 计算截止日期constdeadline=newDate();deadline.setDate(deadline.getDate()+template.daysOffset);document.getElementById('goal-deadline').value=deadline.toISOString().split('T')[0];}}asyncfunctionhandleCreateGoal(event){event.preventDefault();constformData=newFormData(document.getElementById('goal-form'));constgoalData={name:formData.get('name'),description:formData.get('description'),targetValue:parseFloat(formData.get('targetValue')),deadline:formData.get('deadline'),currentValue:0,createdAt:newDate().toISOString()};// 验证数据if(!goalData.name||goalData.targetValue<=0||!goalData.deadline){showToast('请填写所有必填字段','warning');return;}try{constgoalId=awaitdb.addGoal(goalData);if(window.cordova){cordova.exec(null,null,'TeaLogger','logEvent',['goal_created',{goalId:goalId,name:goalData.name}]);cordova.exec(null,null,'HapticFeedback','vibrate',[{type:'success'}]);}showToast('目标已创建','success');setTimeout(()=>navigateTo('goal-list'),1000);}catch(error){console.error('Failed to create goal:',error);showToast('创建失败，请重试','error');}}// 初始化表单document.addEventListener('DOMContentLoaded',function(){constform=document.getElementById('goal-form');if(form){form.addEventListener('submit',handleCreateGoal);// 设置默认截止日期为30天后constdeadline=newDate();deadline.setDate(deadline.getDate()+30);document.getElementById('goal-deadline').value=deadline.toISOString().split('T')[0];}});

这段代码实现了创建目标功能。applyTemplate()应用目标模板。handleCreateGoal()处理表单提交并保存目标。

🔌 OpenHarmony 原生代码

目标验证与保存

// entry/src/main/ets/plugins/GoalValidator.etsexportclassGoalValidator{staticvalidateGoal(goal:Goal):ValidationResult{consterrors:string[]=[];if(!goal.name||goal.name.trim()===''){errors.push('目标名称不能为空');}if(goal.targetValue<=0){errors.push('目标值必须大于0');}if(!goal.deadline){errors.push('截止日期不能为空');}constdeadline=newDate(goal.deadline);constnow=newDate();if(deadline<=now){errors.push('截止日期必须晚于当前日期');}return{valid:errors.length===0,errors:errors};}}interfaceGoal{name:string;description?:string;targetValue:number;deadline:string;}interfaceValidationResult{valid:boolean;errors:string[];}