📌 模块概述

笔记模板功能允许用户创建和使用预定义的笔记模板。用户可以创建多个模板，每个模板包含特定的结构和内容。使用模板可以快速创建新笔记，而无需每次都从零开始。

笔记模板提高了用户的工作效率，特别是对于那些需要创建结构相似的笔记的用户。

🔗 完整流程

第一步：创建模板

用户可以从现有笔记创建模板，或者直接创建新模板。创建模板时需要给模板命名，并设置模板的内容。

第二步：管理模板

用户可以查看、编辑、删除模板。编辑模板时可以修改模板的内容和结构。

第三步：使用模板

用户可以选择一个模板来创建新笔记。使用模板时，新笔记会自动填充模板的内容。

🔧 Web代码实现

第一步：加载模板列表

const templates = await noteDB.getAllTemplates();

从数据库获取所有保存的模板。

第二步：渲染模板卡片

const templatesListHTML = templates.map(template => `
  <div class="card template-card" data-template-id="${template.id}">
    <h3>${Utils.escapeHtml(template.name)}</h3>
    <p>${template.description || '无描述'}</p>
  </div>
`).join('');

将模板列表转换为HTML卡片，显示模板名称和描述。

第三步：添加模板操作按钮

<button class="btn btn-success" onclick="app.useTemplate(${template.id})">使用</button>
<button class="btn btn-info" onclick="app.showEditTemplateModal(${template.id})">编辑</button>
<button class="btn btn-danger" onclick="app.deleteTemplate(${template.id})">删除</button>

为每个模板提供三个操作按钮：使用、编辑、删除。

第四步：使用模板创建笔记

const template = await noteDB.getTemplate(templateId);
const newNote = {
  id: Date.now(),
  title: `${template.name} - ${new Date().toLocaleDateString()}`,
  content: template.content,
  createdAt: new Date().toISOString(),
  updatedAt: new Date().toISOString()
};
await noteDB.addNote(newNote);

根据模板创建新笔记。标题由模板名称和当前日期组成，内容直接复制模板内容。

第五步：验证模板名称

if (!name || name.trim() === '') {
  Utils.showToast('模板名称不能为空', 'error');
  return;
}

验证模板名称不能为空。如果为空，显示错误提示。

第六步：创建新模板

const newTemplate = {
  id: Date.now(),
  name: name.trim(),
  description: description.trim(),
  content: content,
  createdAt: new Date().toISOString()
};
await noteDB.addTemplate(newTemplate);

创建新的模板对象，包含名称、描述和内容，然后保存到数据库。

第七步：删除模板

const template = await noteDB.getTemplate(templateId);
if (confirm(`确定要删除模板"${template.name}"吗？`)) {
  await noteDB.deleteTemplate(templateId);
  Utils.showToast('模板已删除', 'success');
}

删除前显示确认对话框，防止误操作。确认后从数据库中删除该模板。

🔌 OpenHarmony 原生代码

第一步：导入模块

import { webview } from '@kit.ArkWeb';
import { common } from '@kit.AbilityKit';
import { fileIo } from '@kit.CoreFileKit';

导入必要的HarmonyOS库。

第二步：定义TemplatesPlugin类

@NativeComponent
export class TemplatesPlugin {
  private context: common.UIAbilityContext;
  private templatesCache: Array<any> = [];
}

使用缓存来减少文件I/O操作。

第三步：初始化JavaScript代理

public init(webviewController: webview.WebviewController): void {
  webviewController.registerJavaScriptProxy(
    new TemplatesJSProxy(this),
    'templatesPlugin',
    ['getAllTemplates', 'addTemplate', 'deleteTemplate']
  );
}

注册JavaScript代理。

第四步：获取所有模板

const templatesPath = this.context.cacheDir + '/templates.json';
const content = fileIo.readTextSync(templatesPath);
const templates = JSON.parse(content);
this.templatesCache = templates;

从文件系统加载模板并缓存。

第五步：添加模板

const newTemplate = {
  id: Date.now(),
  name: name,
  description: description,
  content: content,
  createdAt: new Date().toISOString()
};
templates.push(newTemplate);
fileIo.writeTextSync(templatesPath, JSON.stringify(templates, null, 2));

创建新模板并保存到文件。

第六步：删除模板

const index = templates.findIndex((t: any) => t.id === templateId);
if (index > -1) {
  templates.splice(index, 1);
  fileIo.writeTextSync(templatesPath, JSON.stringify(templates, null, 2));
}

查找并删除指定的模板。

第七步：JavaScript代理类

class TemplatesJSProxy {
  private plugin: TemplatesPlugin;
  
  getAllTemplates(): void {
    this.plugin.getAllTemplates().then(templates => {
      console.log('Templates loaded:', templates.length);
    });
  }
}

代理类作为Web端和原生端的桥梁。

Web-Native 通信

第一步：获取模板列表

cordova.exec(
  function(templates) {
    console.log('Templates from native:', templates);
  },
  function(error) {
    console.error('Failed to get templates:', error);
  },
  'TemplatesPlugin',
  'getAllTemplates',
  []
);

调用原生方法获取所有模板。

第二步：添加模板

cordova.exec(
  function(success) {
    if (success) {
      Utils.showToast('模板已创建', 'success');
    }
  },
  function(error) {
    Utils.showToast('创建失败', 'error');
  },
  'TemplatesPlugin',
  'addTemplate',
  [name, description, content]
);

调用原生方法添加新模板。

第三步：删除模板

cordova.exec(
  function(success) {
    if (success) {
      Utils.showToast('模板已删除', 'success');
    }
  },
  function(error) {
    Utils.showToast('删除失败', 'error');
  },
  'TemplatesPlugin',
  'deleteTemplate',
  [templateId]
);

调用原生方法删除模板。

📝 总结

笔记模板功能展示了如何在Cordova与OpenHarmony混合开发中实现一个提高用户效率的功能。通过提供预定义的模板，我们为用户提供了快速创建笔记的途径。

笔记模板的实现涉及到模板管理、内容复制和快速创建等功能，展示了混合开发中处理用户效率工具的能力。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net