版本控制 Cordova 与 OpenHarmony 混合开发实战
·

📌 模块概述
版本控制功能记录笔记的编辑历史,用户可以查看笔记的所有版本,并恢复到任何历史版本。版本控制提供了编辑的可追溯性和数据恢复的能力。
🔗 完整流程
第一步:记录版本
每当用户保存笔记时,系统自动记录当前版本。
第二步:查看历史
用户可以查看笔记的所有版本,包括编辑时间和编辑者。
第三步:恢复版本
用户可以选择任何历史版本来恢复笔记。
🔧 Web代码实现
// 版本控制页面
async renderVersionControl(noteId) {
const versions = await noteDB.getVersions(noteId);
return `
<div class="page active">
<div class="page-header">
<h1 class="page-title">📜 版本控制</h1>
</div>
<div class="versions-list">
${versions.map((version, index) => `
<div class="version-item">
<div class="version-info">
<span class="version-number">版本 ${versions.length - index}</span>
<span class="version-time">${Utils.formatDate(version.createdAt)}</span>
</div>
<div class="version-actions">
<button class="btn btn-sm btn-info" onclick="app.viewVersion(${version.id})">查看</button>
<button class="btn btn-sm btn-success" onclick="app.restoreVersion(${version.id})">恢复</button>
</div>
</div>
`).join('')}
</div>
</div>
`;
}
// 保存版本
async saveVersion(noteId, content) {
try {
const version = {
id: Date.now(),
noteId: noteId,
content: content,
createdAt: new Date().toISOString()
};
await noteDB.addVersion(version);
} catch (error) {
console.error('保存版本失败:', error);
}
}
// 恢复版本
async restoreVersion(versionId) {
try {
const version = await noteDB.getVersion(versionId);
if (!version) {
Utils.showToast('版本不存在', 'error');
return;
}
const note = await noteDB.getNote(version.noteId);
note.content = version.content;
note.updatedAt = new Date().toISOString();
await noteDB.updateNote(note);
Utils.showToast('版本已恢复', 'success');
} catch (error) {
console.error('恢复版本失败:', error);
Utils.showToast('操作失败,请重试', 'error');
}
}
🔌 OpenHarmony 原生代码
// VersionControlPlugin.ets - 版本控制插件
import { webview } from '@kit.ArkWeb';
import { common } from '@kit.AbilityKit';
import { fileIo } from '@kit.CoreFileKit';
@NativeComponent
export class VersionControlPlugin {
private context: common.UIAbilityContext;
constructor(context: common.UIAbilityContext) {
this.context = context;
}
// 初始化插件
public init(webviewController: webview.WebviewController): void {
webviewController.registerJavaScriptProxy(
new VersionControlJSProxy(this),
'versionControlPlugin',
['saveVersion', 'getVersions', 'restoreVersion']
);
}
// 保存版本
public saveVersion(noteId: number, content: string): Promise<boolean> {
return new Promise((resolve) => {
try {
const versionsPath = this.context.cacheDir + '/versions.json';
let versions: Array<any> = [];
try {
const fileContent = fileIo.readTextSync(versionsPath);
versions = JSON.parse(fileContent);
} catch {
versions = [];
}
versions.push({
id: Date.now(),
noteId: noteId,
content: content,
createdAt: new Date().toISOString()
});
fileIo.writeTextSync(versionsPath, JSON.stringify(versions, null, 2));
resolve(true);
} catch (error) {
console.error('Failed to save version:', error);
resolve(false);
}
});
}
// 获取版本列表
public getVersions(noteId: number): Promise<Array<any>> {
return new Promise((resolve) => {
try {
const versionsPath = this.context.cacheDir + '/versions.json';
const content = fileIo.readTextSync(versionsPath);
const versions = JSON.parse(content);
const noteVersions = versions.filter((v: any) => v.noteId === noteId);
resolve(noteVersions);
} catch (error) {
console.error('Failed to get versions:', error);
resolve([]);
}
});
}
// 恢复版本
public restoreVersion(versionId: number): Promise<string> {
return new Promise((resolve) => {
try {
const versionsPath = this.context.cacheDir + '/versions.json';
const content = fileIo.readTextSync(versionsPath);
const versions = JSON.parse(content);
const version = versions.find((v: any) => v.id === versionId);
resolve(version ? version.content : '');
} catch (error) {
console.error('Failed to restore version:', error);
resolve('');
}
});
}
}
// VersionControlJSProxy.ets - JavaScript代理类
class VersionControlJSProxy {
private plugin: VersionControlPlugin;
constructor(plugin: VersionControlPlugin) {
this.plugin = plugin;
}
saveVersion(noteId: number, content: string): void {
this.plugin.saveVersion(noteId, content).then(success => {
console.log('Version saved:', success);
});
}
getVersions(noteId: number): void {
this.plugin.getVersions(noteId).then(versions => {
console.log('Versions:', versions.length);
});
}
restoreVersion(versionId: number): void {
this.plugin.restoreVersion(versionId).then(content => {
console.log('Version restored');
});
}
}
📝 总结
版本控制功能展示了如何在Cordova与OpenHarmony混合开发中实现编辑历史管理。通过版本控制,用户可以安心地编辑笔记,知道可以随时恢复到任何历史版本。
欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.csdn.net
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)