评论笔记 - Cordova 与 OpenHarmony 混合开发实战-深圳市維司達科技有限公司

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 模块概述

评论笔记模块是MovieTracker应用中用于记录和管理影片评论的功能。用户可以为影片添加详细的评论笔记，记录观影感受、剧情分析、演员表现等。评论笔记支持编辑、删除、搜索等操作，帮助用户保存和回顾观影记录。

该模块的主要功能包括：添加评论、编辑评论、删除评论、查看评论列表、搜索评论等。通过Cordova框架与OpenHarmony原生能力的结合，实现了完整的评论管理和文本处理。

评论笔记需要处理富文本内容，支持格式化、链接等功能。同时需要提供评论的时间戳和编辑历史。

🔗 完整流程

第一步：评论输入与编辑

用户可以为影片添加评论笔记。评论输入需要提供一个文本编辑器，支持基本的文本格式化。同时需要记录评论的创建时间和最后编辑时间。

评论编辑过程需要支持撤销和重做操作，提高用户的编辑体验。同时需要提供字数统计，告知用户当前的评论长度。

第二步：评论保存与管理

评论输入完成后需要保存到数据库。保存过程需要记录评论的内容、创建时间、编辑时间等信息。

同时需要支持评论的编辑和删除。编辑时需要加载现有的评论内容，删除时需要提供确认对话框。

第三步：评论展示与搜索

评论管理页面需要显示所有的评论，按时间倒序排列。同时需要支持评论的搜索功能，用户可以快速查找特定的评论。

评论展示需要考虑信息的组织和视觉层次，重要信息显示在前面。

🔧 Web代码实现

评论笔记HTML结构

<divid="notes-page"class="page"><divclass="page-header"><h2>评论笔记</h2><buttonclass="btn btn-primary"onclick="showAddNoteDialog()">➕ 新建评论</button></div><divclass="notes-container"><divclass="notes-search"><inputtype="text"id="notes-search"placeholder="搜索评论..."onkeyup="searchNotes()"></div><divclass="notes-list"id="notes-list"></div></div><divid="note-dialog"class="modal"style="display:none;"><divclass="modal-content"><h3id="note-dialog-title">新建评论</h3><divclass="form-group"><label>选择影片:</label><selectid="note-movie-select"class="form-select"><optionvalue="">请选择影片</option></select></div><divclass="form-group"><label>评论内容:</label><textareaid="note-content"placeholder="请输入评论内容..."class="form-textarea"rows="8"></textarea><divclass="char-count"><spanid="char-count">0</span>/ 5000</div></div><divclass="form-group"><label>标签:</label><inputtype="text"id="note-tags"placeholder="用逗号分隔多个标签"class="form-input"></div><divclass="modal-actions"><buttonclass="btn btn-primary"onclick="saveNote()">保存</button><buttonclass="btn btn-secondary"onclick="closeNoteDialog()">取消</button></div></div></div></div>

这个HTML结构定义了评论笔记页面的布局。包括评论列表、搜索框、新建评论对话框等部分。

评论管理实现

letcurrentEditingNoteId=null;asyncfunctionloadMoviesForNotes(){try{constmovies=awaitdb.getAllMovies();constselect=document.getElementById('note-movie-select');movies.forEach(movie=>{constoption=document.createElement('option');option.value=movie.id;option.textContent=`${movie.title}(${movie.year})`;select.appendChild(option);});}catch(error){console.error('加载影片失败:',error);}}functionshowAddNoteDialog(){currentEditingNoteId=null;document.getElementById('note-dialog-title').textContent='新建评论';document.getElementById('note-movie-select').value='';document.getElementById('note-content').value='';document.getElementById('note-tags').value='';document.getElementById('char-count').textContent='0';document.getElementById('note-dialog').style.display='flex';}asyncfunctioneditNote(noteId){try{constnote=awaitdb.getNote(noteId);currentEditingNoteId=noteId;document.getElementById('note-dialog-title').textContent='编辑评论';document.getElementById('note-movie-select').value=note.movieId;document.getElementById('note-content').value=note.content;document.getElementById('note-tags').value=note.tags?note.tags.join(', '):'';document.getElementById('char-count').textContent=note.content.length;document.getElementById('note-dialog').style.display='flex';}catch(error){console.error('加载评论失败:',error);showError('加载评论失败');}}asyncfunctionsaveNote(){constmovieId=parseInt(document.getElementById('note-movie-select').value);constcontent=document.getElementById('note-content').value.trim();consttagsStr=document.getElementById('note-tags').value;if(!movieId){showError('请选择影片');return;}if(!content){showError('评论内容不能为空');return;}try{consttags=tagsStr?tagsStr.split(',').map(t=>t.trim()):[];constnote={movieId:movieId,content:content,tags:tags,timestamp:Date.now()};if(currentEditingNoteId){awaitdb.updateNote(currentEditingNoteId,note);showSuccess('评论已更新');}else{awaitdb.addNote(note);showSuccess('评论已保存');}closeNoteDialog();loadNotes();}catch(error){console.error('保存评论失败:',error);showError('保存评论失败');}}functioncloseNoteDialog(){document.getElementById('note-dialog').style.display='none';currentEditingNoteId=null;}asyncfunctionloadNotes(){try{constnotes=awaitdb.getAllNotes();// 按时间倒序排列notes.sort((a,b)=>b.timestamp-a.timestamp);renderNotes(notes);}catch(error){console.error('加载评论失败:',error);showError('加载评论失败');}}asyncfunctionrenderNotes(notes){constcontainer=document.getElementById('notes-list');container.innerHTML='';if(notes.length===0){container.innerHTML='<p class="empty-message">暂无评论</p>';return;}for(letnoteofnotes){constmovie=awaitdb.getMovie(note.movieId);constnoteItem=document.createElement('div');noteItem.className='note-item';consttagsHtml=note.tags&&note.tags.length>0?`<div class="note-tags">${note.tags.map(t=>`<span class="tag">${t}</span>`).join('')}</div>`:'';constdate=newDate(note.timestamp).toLocaleString('zh-CN');noteItem.innerHTML=`<div class="note-header"> <h4>${movie?movie.title:'未知影片'}</h4> <span class="note-date">${date}</span> </div> <div class="note-content">${note.content}</div>${tagsHtml}<div class="note-actions"> <button onclick="editNote(${note.id})" class="btn btn-small">编辑</button> <button onclick="deleteNote(${note.id})" class="btn btn-small btn-danger">删除</button> </div>`;container.appendChild(noteItem);}}asyncfunctiondeleteNote(noteId){if(confirm('确定要删除该评论吗？')){try{awaitdb.deleteNote(noteId);showSuccess('评论已删除');loadNotes();}catch(error){console.error('删除评论失败:',error);showError('删除评论失败');}}}functionsearchNotes(){constkeyword=document.getElementById('notes-search').value.toLowerCase();constitems=document.querySelectorAll('.note-item');items.forEach(item=>{constcontent=item.textContent.toLowerCase();if(content.includes(keyword)){item.style.display='block';}else{item.style.display='none';}});}// 字数统计document.addEventListener('DOMContentLoaded',()=>{constcontentInput=document.getElementById('note-content');if(contentInput){contentInput.addEventListener('input',()=>{document.getElementById('char-count').textContent=contentInput.value.length;});}});

这个函数实现了评论的创建、编辑、删除和搜索功能。

🔌 OpenHarmony原生代码

评论笔记插件

// NotesPlugin.etsimport{webview}from'@kit.ArkWeb';import{common}from'@kit.AbilityKit';exportclassNotesPlugin{privatecontext:common.UIAbilityContext;constructor(context:common.UIAbilityContext){this.context=context;}publicregisterNotes(controller:webview.WebviewController):void{controller.registerJavaScriptProxy({object:newNotesBridge(),name:'notesNative',methodList:['formatNote','extractKeywords']});}}

笔记处理实现

exportclassNotesBridge{publicformatNote(noteJson:string):string{try{constnote=JSON.parse(noteJson);constformatted={content:note.content,wordCount:note.content.length,paragraphCount:note.content.split('\n').length,timestamp:this.formatDate(note.timestamp),preview:note.content.substring(0,100)+(note.content.length>100?'...':'')};returnJSON.stringify(formatted);}catch(error){returnJSON.stringify({error:error.message});}}publicextractKeywords(content:string):string{try{// 简单的关键词提取：按空格和标点符号分割constwords=content.split(/[\s\p{P}]+/u).filter(w=>w.length>2);// 统计词频constfrequency:any={};words.forEach(word=>{frequency[word]=(frequency[word]||0)+1;});// 返回频率最高的10个关键词constkeywords=Object.entries(frequency).sort((a:any,b:any)=>b[1]-a[1]).slice(0,10).map(([word])=>word);returnJSON.stringify({keywords:keywords,count:keywords.length});}catch(error){returnJSON.stringify({error:error.message});}}privateformatDate(timestamp:number):string{try{constdate=newDate(timestamp);returndate.toLocaleString('zh-CN');}catch{return'未知';}}}

Web-Native通信

调用原生处理功能

asyncfunctionformatAndDisplayNote(note){try{if(window.notesNative){constformatResult=window.notesNative.formatNote(JSON.stringify(note));constresult=JSON.parse(formatResult);console.log('格式化后的笔记:',result);// 提取关键词constkeywordResult=window.notesNative.extractKeywords(note.content);constkeywords=JSON.parse(keywordResult);console.log('提取的关键词:',keywords.keywords);}}catch(error){console.error('处理笔记失败:',error);}}