旅行记录应用关于应用 - Cordova & OpenHarmony 混合开发实战

本文介绍了开源鸿蒙跨平台开发中关于应用页面的实现方法。主要内容包括：应用信息管理 - 从配置文件中读取应用名称、版本号、开发者等基本信息更新检查机制 - 通过原生层检查版本更新，提示用户下载新版本 Web端实现 - 包含HTML页面结构、加载应用信息函数和检查更新函数关键代码展示了如何：显示应用基本信息调用原生插件检查更新弹出更新提示对话框该实现适用于Cordova与OpenHarm

2501_94622431

395人浏览 · 2025-12-25 00:58:53

2501_94622431 · 2025-12-25 00:58:53 发布

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

📌 概述

关于应用页面展示应用的基本信息，如版本号、开发者信息、许可证等。关于应用页面还可以提供反馈、检查更新等功能。在 Cordova 与 OpenHarmony 的混合开发框架中，关于应用需要实现版本管理和更新检查。

🔗 完整流程

第一步：应用信息管理

关于应用需要定义应用的基本信息，如名称、版本号、开发者等。这些信息可以从应用配置文件中读取。

第二步：更新检查与提示

关于应用可以检查是否有新版本可用。如果有新版本，可以提示用户更新。

第三步：原生层版本管理与更新

OpenHarmony 原生层可以实现版本检查和应用更新。

🔧 Web 代码实现

关于应用页面 HTML 结构

<div id="about-page" class="page">
    <div class="page-header">
        <h1>关于应用</h1>
    </div>
    
    <div class="about-container">
        <div class="app-info">
            <div class="app-icon">✈️</div>
            <h2>旅行记录</h2>
            <p class="app-version">版本 <span id="appVersion">1.0.0</span></p>
        </div>
        
        <div class="info-section">
            <h3>应用信息</h3>
            <div class="info-item">
                <span class="label">应用名称</span>
                <span class="value">旅行记录</span>
            </div>
            <div class="info-item">
                <span class="label">版本号</span>
                <span class="value" id="versionNumber">1.0.0</span>
            </div>
            <div class="info-item">
                <span class="label">构建号</span>
                <span class="value" id="buildNumber">1</span>
            </div>
            <div class="info-item">
                <span class="label">发布日期</span>
                <span class="value" id="releaseDate">2024-01-01</span>
            </div>
        </div>
        
        <div class="info-section">
            <h3>开发者信息</h3>
            <div class="info-item">
                <span class="label">开发者</span>
                <span class="value">旅行记录团队</span>
            </div>
            <div class="info-item">
                <span class="label">官方网站</span>
                <span class="value"><a href="https://example.com">https://example.com</a></span>
            </div>
            <div class="info-item">
                <span class="label">联系邮箱</span>
                <span class="value"><a href="mailto:support@example.com">support@example.com</a></span>
            </div>
        </div>
        
        <div class="info-section">
            <h3>许可证</h3>
            <p>本应用采用 MIT 许可证。详见 LICENSE 文件。</p>
        </div>
        
        <div class="action-section">
            <button class="btn btn-primary" onclick="checkForUpdates()">
                🔄 检查更新
            </button>
            <button class="btn btn-secondary" onclick="sendFeedback()">
                💬 发送反馈
            </button>
            <button class="btn btn-secondary" onclick="viewLicense()">
                📄 查看许可证
            </button>
        </div>
    </div>
</div>

HTML 结构包含应用信息、开发者信息和操作按钮。

加载应用信息函数

async function loadAppInfo() {
    try {
        // 获取应用信息
        const appInfo = {
            name: '旅行记录',
            version: '1.0.0',
            buildNumber: '1',
            releaseDate: '2024-01-01',
            developer: '旅行记录团队',
            website: 'https://example.com',
            email: 'support@example.com'
        };
        
        // 填充页面
        document.getElementById('appVersion').textContent = appInfo.version;
        document.getElementById('versionNumber').textContent = appInfo.version;
        document.getElementById('buildNumber').textContent = appInfo.buildNumber;
        document.getElementById('releaseDate').textContent = appInfo.releaseDate;
    } catch (error) {
        console.error('Error loading app info:', error);
    }
}

加载应用信息函数显示应用的基本信息。

检查更新函数

async function checkForUpdates() {
    try {
        showToast('正在检查更新...');
        
        // 通知原生层检查更新
        if (window.cordova) {
            cordova.exec(
                (result) => {
                    if (result.hasUpdate) {
                        showUpdateDialog(result.newVersion, result.updateUrl);
                    } else {
                        showToast('已是最新版本');
                    }
                },
                (error) => console.error('Check error:', error),
                'UpdatePlugin',
                'checkForUpdates',
                [{ currentVersion: '1.0.0', timestamp: Date.now() }]
            );
        }
    } catch (error) {
        console.error('Error checking for updates:', error);
        showToast('检查更新失败');
    }
}

检查更新函数调用原生层检查是否有新版本。

显示更新对话框函数

function showUpdateDialog(newVersion, updateUrl) {
    const message = `发现新版本 ${newVersion}，是否立即更新？`;
    
    if (confirm(message)) {
        // 打开更新链接
        if (window.cordova) {
            cordova.exec(
                (result) => console.log('Update started:', result),
                (error) => console.error('Update error:', error),
                'UpdatePlugin',
                'startUpdate',
                [{ updateUrl: updateUrl, timestamp: Date.now() }]
            );
        }
    }
}

显示更新对话框函数提示用户更新应用。

发送反馈函数

function sendFeedback() {
    const feedback = prompt('请输入您的反馈意见:');
    
    if (feedback) {
        try {
            // 通知原生层发送反馈
            if (window.cordova) {
                cordova.exec(
                    (result) => {
                        showToast('反馈已发送，感谢您的建议！');
                    },
                    (error) => console.error('Send error:', error),
                    'FeedbackPlugin',
                    'sendFeedback',
                    [{ feedback: feedback, timestamp: Date.now() }]
                );
            }
        } catch (error) {
            console.error('Error sending feedback:', error);
            showToast('发送反馈失败');
        }
    }
}

发送反馈函数收集用户反馈并发送。

查看许可证函数

function viewLicense() {
    const license = `
    MIT License
    
    Copyright (c) 2024 旅行记录团队
    
    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:
    
    The above copyright notice and this permission notice shall be included in all
    copies or substantial portions of the Software.
    `;
    
    alert(license);
}

查看许可证函数显示应用的许可证信息。

🔌 OpenHarmony 原生代码实现

更新和反馈插件

// UpdatePlugin.ets
import { BusinessError } from '@ohos.base';

export class UpdatePlugin {
    // 检查更新
    checkForUpdates(args: any, callback: Function): void {
        try {
            const currentVersion = args[0].currentVersion;
            
            console.log(`[Update] Checking for updates from version ${currentVersion}`);
            
            // 模拟检查更新
            callback({
                success: true,
                hasUpdate: false,
                message: '已是最新版本'
            });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
    
    // 开始更新
    startUpdate(args: any, callback: Function): void {
        try {
            const updateUrl = args[0].updateUrl;
            
            console.log(`[Update] Starting update from ${updateUrl}`);
            
            callback({ success: true, message: '更新已开始' });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
}

// FeedbackPlugin.ets
export class FeedbackPlugin {
    // 发送反馈
    sendFeedback(args: any, callback: Function): void {
        try {
            const feedback = args[0].feedback;
            
            console.log(`[Feedback] Feedback received: ${feedback}`);
            
            callback({ success: true, message: '反馈已发送' });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
}