请先把音频mp3文件，放到www/audio目录下面

我们是演示项目，所以这里把一个b.mp3放到目录中就可以。

方式1-HTML5播放

通过WEBVIEW的支持的HTML5 Audio来播放音频，无序插件

修改main.js 内容如下

// Dữ liệu phụ âm tiếng Việt
const consonants = [
    {char: "b", pronounce: "/ɓ/", desc: "Phụ âm bật môi"},
    {char: "c", pronounce: "/k/", desc: "Phụ âm vòm ngạc cứng"},
    {char: "ch", pronounce: "/tɕ/", desc: "Phụ âm xát vòm"},
    {char: "d", pronounce: "/ɗ/", desc: "Phụ âm bật răng lợi"},
    {char: "đ", pronounce: "/ɗ/", desc: "Phụ âm đệm răng lợi"},
    {char: "g", pronounce: "/ɣ/", desc: "Phụ âm xát vòm ngạc"},
    {char: "gh", pronounce: "/ɣ/", desc: "Dùng trước e, i"},
    {char: "h", pronounce: "/h/", desc: "Phụ âm thanh hơi"},
    {char: "k", pronounce: "/k/", desc: "Phụ âm tắc ngạc cứng"},
    {char: "kh", pronounce: "/x/", desc: "Phụ âm xát ngạc cứng"},
    {char: "l", pronounce: "/l/", desc: "Phụ âm bên răng lợi"},
    {char: "m", pronounce: "/m/", desc: "Phụ âm mũi môi"},
    {char: "n", pronounce: "/n/", desc: "Phụ âm mũi răng lợi"},
    {char: "ng", pronounce: "/ŋ/", desc: "Phụ âm mũi ngạc mềm"},
    {char: "ngh", pronounce: "/ŋ/", desc: "Dùng trước e,i"},
    {char: "nh", pronounce: "/ɲ/", desc: "Phụ âm mũi vòm ngạc"},
    {char: "p", pronounce: "/p/", desc: "Phụ âm tắc môi không bật"},
    {char: "ph", pronounce: "/f/", desc: "Phụ âm xát môi răng"},
    {char: "q", pronounce: "/kw/", desc: "Luôn đi với u"},
    {char: "r", pronounce: "/r/", desc: "Phụ âm rung răng lợi"},
    {char: "s", pronounce: "/s/", desc: "Phụ âm xát răng lợi"},
    {char: "t", pronounce: "/t/", desc: "Phụ âm tắc răng lợi"},
    {char: "th", pronounce: "/θ/", desc: "Phụ âm xát răng"},
    {char: "v", pronounce: "/v/", desc: "Phụ âm xát môi răng"},
    {char: "x", pronounce: "/s/", desc: "Phụ âm xát răng lợi"}
];

let favList = JSON.parse(localStorage.getItem("vn_consonant_fav")) || [];
let currentAudio = null; // 全局音频对象，用于停止上一首

const gridEl = document.getElementById("consonant-grid");
const favGridEl = document.getElementById("favorite-grid");
const modal = document.getElementById("modal");
const modalChar = document.getElementById("modal-char");
const modalPro = document.getElementById("modal-pronounce");
const modalDesc = document.getElementById("modal-desc");
const btnFav = document.getElementById("btn-fav");
const closeModal = document.getElementById("close-modal");

let currentItem = null;

// ====================== HÀM PHÁT MP3 ======================
function playAudio(charName) {
    // Dừng âm thanh đang phát
    if(currentAudio){
        currentAudio.pause();
        currentAudio.currentTime = 0;
    }
    // Tạo audio
    currentAudio = new Audio(`audio/${charName}.mp3`);
    currentAudio.volume = 1;
    currentAudio.play().catch(err=>{
        console.log("Không phát được file: ", charName, err);
        alert(`Không tìm thấy file âm thanh: ${charName}.mp3`);
    });
}

// Render thẻ phụ âm
function renderCards(){
    gridEl.innerHTML = "";
    consonants.forEach(item=>{
        const div = document.createElement("div");
        div.className = "bg-cardBg rounded-lg py-5 text-center card-shadow active:scale-95 transition-transform cursor-pointer";
        div.innerHTML = `<span class="text-2xl font-bold text-gray-800">${item.char}</span>`;
        div.onclick = ()=> {
            playAudio(item.char); // Nhấn thẻ phát mp3
            openModal(item);
        };
        gridEl.appendChild(div);
    })
}

// Render trang yêu thích
function renderFav(){
    favGridEl.innerHTML = "";
    if(favList.length === 0){
        favGridEl.innerHTML = `<p class="col-span-3 text-center text-gray-400 py-10">Chưa có từ yêu thích</p>`;
        return;
    }
    favList.forEach(item=>{
        const div = document.createElement("div");
        div.className = "bg-cardBg rounded-lg py-5 text-center card-shadow active:scale-95 transition-transform cursor-pointer";
        div.innerHTML = `<span class="text-2xl font-bold text-gray-800">${item.char}</span>`;
        div.onclick = ()=> {
            playAudio(item.char);
            openModal(item);
        };
        favGridEl.appendChild(div);
    })
}

// Mở popup chi tiết
function openModal(item){
    currentItem = item;
    modalChar.innerText = item.char;
    modalPro.innerText = item.pronounce;
    modalDesc.innerText = item.desc;
    updateFavButton();
    modal.classList.remove("hidden");
}

// Đóng popup
closeModal.onclick = ()=>{
    modal.classList.add("hidden");
}
modal.onclick = (e)=>{
    if(e.target === modal) modal.classList.add("hidden");
}

// Nút thêm/xóa yêu thích
function updateFavButton(){
    const exist = favList.find(x=>x.char === currentItem.char);
    btnFav.innerText = exist ? "Xóa khỏi yêu thích" : "Thêm yêu thích";
}
btnFav.onclick = ()=>{
    const idx = favList.findIndex(x=>x.char === currentItem.char);
    if(idx >=0) favList.splice(idx,1);
    else favList.push(currentItem);
    localStorage.setItem("vn_consonant_fav", JSON.stringify(favList));
    updateFavButton();
    renderFav();
}

// Tab chuyển trang
const tabBtns = document.querySelectorAll(".tab-btn");
const pages = document.querySelectorAll(".page");
tabBtns.forEach(btn=>{
    btn.onclick = ()=>{
        const targetId = btn.dataset.target;
        tabBtns.forEach(b=>{
            b.classList.remove("tab-active");
            b.querySelector("svg").classList.add("text-gray-500");
        })
        btn.classList.add("tab-active");
        btn.querySelector("svg").classList.remove("text-gray-500");
        pages.forEach(p=>p.classList.add("hidden"));
        document.getElementById(targetId).classList.remove("hidden");
    }
})

document.addEventListener("DOMContentLoaded", ()=>{
    renderCards();
    renderFav();
})

document.addEventListener("deviceready", ()=>{
    console.log("Cordova sẵn sàng");
}, false);

方案2-插件播放

通过cordova插件cordova-plugin-media 来播放

安装插件

cordova plugin add cordova-plugin-media

执行过程

D:\cordovademo\hello>cordova plugin add cordova-plugin-media
Installing "cordova-plugin-media" for android
Installing "cordova-plugin-file" for android
Subproject Path: CordovaLib
Subproject Path: app

The Android Persistent storage location now defaults to "Internal". Please check this plugin's README to see if your application needs any changes in its config.xml.

If this is a new application no changes are required.

If this is an update to an existing application that did not specify an "AndroidPersistentFileLocation" you may need to add:

      "<preference name="AndroidPersistentFileLocation" value="Compatibility" />"

to config.xml in order for the application to find previously stored files.

Adding cordova-plugin-media to package.json

音频播放函数替换

let mediaPlayer = null;

function playAudio(charName) {
    // Dừng file cũ
    if(mediaPlayer){
        mediaPlayer.stop();
        mediaPlayer.release();
        mediaPlayer = null;
    }
    // Quan trọng: Cordova Android đường dẫn www/audio/
    const src = `audio/${charName}.mp3`;
    mediaPlayer = new Media(src,
        ()=>{
            // Phát xong giải phóng
            mediaPlayer.release();
            mediaPlayer = null;
        },
        (err)=>{
            console.error("Lỗi phát âm thanh", err);
        }
    );
    mediaPlayer.play();
}

替换上面为原来的main.js 里面的方法

// Dữ liệu phụ âm tiếng Việt
const consonants = [
    {char: "b", pronounce: "/ɓ/", desc: "Phụ âm bật môi"},
    {char: "c", pronounce: "/k/", desc: "Phụ âm vòm ngạc cứng"},
    {char: "ch", pronounce: "/tɕ/", desc: "Phụ âm xát vòm"},
    {char: "d", pronounce: "/ɗ/", desc: "Phụ âm bật răng lợi"},
    {char: "đ", pronounce: "/ɗ/", desc: "Phụ âm đệm răng lợi"},
    {char: "g", pronounce: "/ɣ/", desc: "Phụ âm xát vòm ngạc"},
    {char: "gh", pronounce: "/ɣ/", desc: "Dùng trước e, i"},
    {char: "h", pronounce: "/h/", desc: "Phụ âm thanh hơi"},
    {char: "k", pronounce: "/k/", desc: "Phụ âm tắc ngạc cứng"},
    {char: "kh", pronounce: "/x/", desc: "Phụ âm xát ngạc cứng"},
    {char: "l", pronounce: "/l/", desc: "Phụ âm bên răng lợi"},
    {char: "m", pronounce: "/m/", desc: "Phụ âm mũi môi"},
    {char: "n", pronounce: "/n/", desc: "Phụ âm mũi răng lợi"},
    {char: "ng", pronounce: "/ŋ/", desc: "Phụ âm mũi ngạc mềm"},
    {char: "ngh", pronounce: "/ŋ/", desc: "Dùng trước e,i"},
    {char: "nh", pronounce: "/ɲ/", desc: "Phụ âm mũi vòm ngạc"},
    {char: "p", pronounce: "/p/", desc: "Phụ âm tắc môi không bật"},
    {char: "ph", pronounce: "/f/", desc: "Phụ âm xát môi răng"},
    {char: "q", pronounce: "/kw/", desc: "Luôn đi với u"},
    {char: "r", pronounce: "/r/", desc: "Phụ âm rung răng lợi"},
    {char: "s", pronounce: "/s/", desc: "Phụ âm xát răng lợi"},
    {char: "t", pronounce: "/t/", desc: "Phụ âm tắc răng lợi"},
    {char: "th", pronounce: "/θ/", desc: "Phụ âm xát răng"},
    {char: "v", pronounce: "/v/", desc: "Phụ âm xát môi răng"},
    {char: "x", pronounce: "/s/", desc: "Phụ âm xát răng lợi"}
];

let favList = JSON.parse(localStorage.getItem("vn_consonant_fav")) || [];
let currentAudio = null; // 全局音频对象，用于停止上一首

const gridEl = document.getElementById("consonant-grid");
const favGridEl = document.getElementById("favorite-grid");
const modal = document.getElementById("modal");
const modalChar = document.getElementById("modal-char");
const modalPro = document.getElementById("modal-pronounce");
const modalDesc = document.getElementById("modal-desc");
const btnFav = document.getElementById("btn-fav");
const closeModal = document.getElementById("close-modal");

let currentItem = null;

// ====================== HÀM PHÁT MP3 ======================
let mediaPlayer = null;

function playAudio(charName) {
    // Dừng file cũ
    if(mediaPlayer){
        mediaPlayer.stop();
        mediaPlayer.release();
        mediaPlayer = null;
    }
    // Quan trọng: Cordova Android đường dẫn www/audio/
    const src = `audio/${charName}.mp3`;
    mediaPlayer = new Media(src,
        ()=>{
            // Phát xong giải phóng
            mediaPlayer.release();
            mediaPlayer = null;
        },
        (err)=>{
            console.error("Lỗi phát âm thanh", err);
        }
    );
    mediaPlayer.play();
}

// Render thẻ phụ âm
function renderCards(){
    gridEl.innerHTML = "";
    consonants.forEach(item=>{
        const div = document.createElement("div");
        div.className = "bg-cardBg rounded-lg py-5 text-center card-shadow active:scale-95 transition-transform cursor-pointer";
        div.innerHTML = `<span class="text-2xl font-bold text-gray-800">${item.char}</span>`;
        div.onclick = ()=> {
            playAudio(item.char); // Nhấn thẻ phát mp3
            openModal(item);
        };
        gridEl.appendChild(div);
    })
}

// Render trang yêu thích
function renderFav(){
    favGridEl.innerHTML = "";
    if(favList.length === 0){
        favGridEl.innerHTML = `<p class="col-span-3 text-center text-gray-400 py-10">Chưa có từ yêu thích</p>`;
        return;
    }
    favList.forEach(item=>{
        const div = document.createElement("div");
        div.className = "bg-cardBg rounded-lg py-5 text-center card-shadow active:scale-95 transition-transform cursor-pointer";
        div.innerHTML = `<span class="text-2xl font-bold text-gray-800">${item.char}</span>`;
        div.onclick = ()=> {
            playAudio(item.char);
            openModal(item);
        };
        favGridEl.appendChild(div);
    })
}

// Mở popup chi tiết
function openModal(item){
    currentItem = item;
    modalChar.innerText = item.char;
    modalPro.innerText = item.pronounce;
    modalDesc.innerText = item.desc;
    updateFavButton();
    modal.classList.remove("hidden");
}

// Đóng popup
closeModal.onclick = ()=>{
    modal.classList.add("hidden");
}
modal.onclick = (e)=>{
    if(e.target === modal) modal.classList.add("hidden");
}

// Nút thêm/xóa yêu thích
function updateFavButton(){
    const exist = favList.find(x=>x.char === currentItem.char);
    btnFav.innerText = exist ? "Xóa khỏi yêu thích" : "Thêm yêu thích";
}
btnFav.onclick = ()=>{
    const idx = favList.findIndex(x=>x.char === currentItem.char);
    if(idx >=0) favList.splice(idx,1);
    else favList.push(currentItem);
    localStorage.setItem("vn_consonant_fav", JSON.stringify(favList));
    updateFavButton();
    renderFav();
}

// Tab chuyển trang
const tabBtns = document.querySelectorAll(".tab-btn");
const pages = document.querySelectorAll(".page");
tabBtns.forEach(btn=>{
    btn.onclick = ()=>{
        const targetId = btn.dataset.target;
        tabBtns.forEach(b=>{
            b.classList.remove("tab-active");
            b.querySelector("svg").classList.add("text-gray-500");
        })
        btn.classList.add("tab-active");
        btn.querySelector("svg").classList.remove("text-gray-500");
        pages.forEach(p=>p.classList.add("hidden"));
        document.getElementById(targetId).classList.remove("hidden");
    }
})

document.addEventListener("DOMContentLoaded", ()=>{
    renderCards();
    renderFav();
})

document.addEventListener("deviceready", ()=>{
    console.log("Cordova sẵn sàng");
}, false);

我们使用tailwind作为网页模板。

关于tailwind，读者可以学习其他课程。

修改index.html 内容如下

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Bảng phụ âm tiếng Việt</title>
    <!-- Tailwind 内嵌CDN 离线可用建议打包后替换本地 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        bottomNav: '#ffffff',
                        cardBg: '#f8fafc'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .safe-bottom {
                padding-bottom: calc(4rem + env(safe-area-inset-bottom));
            }
            .card-shadow {
                box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            }
        }
        body {
            /* 防止cordova滚动回弹 */
            overscroll-behavior: none;
        }
        /* 底部tab激活样式 */
        .tab-active {
            color: #2563eb;
        }
    </style>
</head>
<body class="bg-gray-100 font-sans text-gray-800">

    <!-- 页面容器 -->
    <div id="app" class="max-w-md mx-auto bg-white min-h-screen relative safe-bottom">
        <!-- 顶部标题栏 -->
        <header class="sticky top-0 bg-primary text-white px-4 py-3 shadow z-20">
            <h1 class="text-lg font-bold text-center">Phụ Âm Tiếng Việt</h1>
        </header>

        <!-- 主内容区域 -->
        <main class="p-4">
            <!-- Trang 1: Phụ âm -->
            <div id="page-consonant" class="page">
                <h2 class="text-base font-medium mb-3 text-gray-600">Nhấn vào thẻ để xem chi tiết</h2>
                <div id="consonant-grid" class="grid grid-cols-3 gap-3">
                    <!-- JS渲染辅音卡片 -->
                </div>
            </div>

            <!-- Trang 2: Yêu thích -->
            <div id="page-favorite" class="page hidden mt-4">
                <h2 class="text-lg font-bold mb-4">Danh sách yêu thích</h2>
                <div id="favorite-grid" class="grid grid-cols-3 gap-3">
                    <p class="col-span-3 text-center text-gray-400 py-10">Chưa có từ yêu thích</p>
                </div>
            </div>

            <!-- Trang3: Cài đặt -->
            <div id="page-setting" class="page hidden mt-4">
                <h2 class="text-lg font-bold mb-4">Cài đặt</h2>
                <div class="space-y-3">
                    <div class="bg-cardBg p-4 rounded-lg card-shadow">
                        <p>Ứng dụng học phụ âm tiếng Việt</p>
                        <p class="text-sm text-gray-500 mt-1">Cordova + TailwindCSS</p>
                    </div>
                </div>
            </div>
        </main>

        <!-- ========== 底部导航栏 ========== -->
        <nav class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-md bg-bottomNav border-t border-gray-200 flex z-30" style="padding-bottom: env(safe-area-inset-bottom);">
            <button class="tab-btn flex-1 py-3 flex flex-col items-center tab-active" data-target="page-consonant">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="3" width="18" height="18" rx="2"/>
                    <path d="M3 9h18M9 21V9"/>
                </svg>
                <span class="text-xs mt-1">Phụ âm</span>
            </button>
            <button class="tab-btn flex-1 py-3 flex flex-col items-center text-gray-500" data-target="page-favorite">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                </svg>
                <span class="text-xs mt-1">Yêu thích</span>
            </button>
            <button class="tab-btn flex-1 py-3 flex flex-col items-center text-gray-500" data-target="page-setting">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="3"/>
                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                </svg>
                <span class="text-xs mt-1">Cài đặt</span>
            </button>
        </nav>
    </div>

    <!-- ========== 弹窗 hiển thị chi tiết phụ âm ========== -->
    <div id="modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl w-full max-w-sm p-5 relative">
            <button id="close-modal" class="absolute top-3 right-3 text-gray-400 text-xl">&times;</button>
            <h3 id="modal-char" class="text-4xl font-bold text-primary text-center py-4"></h3>
            <div class="space-y-2 text-gray-700">
                <p><span class="font-semibold">Phiên âm:</span> <span id="modal-pronounce"></span></p>
                <p><span class="font-semibold">Giải thích:</span> <span id="modal-desc"></span></p>
            </div>
            <button id="btn-fav" class="w-full mt-5 bg-primary text-white py-2 rounded-lg">Thêm yêu thích</button>
        </div>
    </div>

    <!-- Cordova js (chỉ chạy trên thiết bị thật) -->
    <script src="cordova.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

在www/js/main.js 创建main.js 文件

内容如下

// Dữ liệu phụ âm tiếng Việt
const consonants = [
    {char: "b", pronounce: "/ɓ/", desc: "Phụ âm bật môi"},
    {char: "c", pronounce: "/k/", desc: "Phụ âm vòm ngạc cứng"},
    {char: "ch", pronounce: "/tɕ/", desc: "Phụ âm xát vòm"},
    {char: "d", pronounce: "/ɗ/", desc: "Phụ âm bật răng lợi"},
    {char: "đ", pronounce: "/ɗ/", desc: "Phụ âm đệm răng lợi"},
    {char: "g", pronounce: "/ɣ/", desc: "Phụ âm xát vòm ngạc"},
    {char: "gh", pronounce: "/ɣ/", desc: "Dùng trước e, i"},
    {char: "h", pronounce: "/h/", desc: "Phụ âm thanh hơi"},
    {char: "k", pronounce: "/k/", desc: "Phụ âm tắc ngạc cứng"},
    {char: "kh", pronounce: "/x/", desc: "Phụ âm xát ngạc cứng"},
    {char: "l", pronounce: "/l/", desc: "Phụ âm bên răng lợi"},
    {char: "m", pronounce: "/m/", desc: "Phụ âm mũi môi"},
    {char: "n", pronounce: "/n/", desc: "Phụ âm mũi răng lợi"},
    {char: "ng", pronounce: "/ŋ/", desc: "Phụ âm mũi ngạc mềm"},
    {char: "ngh", pronounce: "/ŋ/", desc: "Dùng trước e,i"},
    {char: "nh", pronounce: "/ɲ/", desc: "Phụ âm mũi vòm ngạc"},
    {char: "p", pronounce: "/p/", desc: "Phụ âm tắc môi không bật"},
    {char: "ph", pronounce: "/f/", desc: "Phụ âm xát môi răng"},
    {char: "q", pronounce: "/kw/", desc: "Luôn đi với u"},
    {char: "r", pronounce: "/r/", desc: "Phụ âm rung răng lợi"},
    {char: "s", pronounce: "/s/", desc: "Phụ âm xát răng lợi"},
    {char: "t", pronounce: "/t/", desc: "Phụ âm tắc răng lợi"},
    {char: "th", pronounce: "/θ/", desc: "Phụ âm xát răng"},
    {char: "v", pronounce: "/v/", desc: "Phụ âm xát môi răng"},
    {char: "x", pronounce: "/s/", desc: "Phụ âm xát răng lợi"}
];

// Lưu danh sách yêu thích localStorage
let favList = JSON.parse(localStorage.getItem("vn_consonant_fav")) || [];

// DOM
const gridEl = document.getElementById("consonant-grid");
const favGridEl = document.getElementById("favorite-grid");
const modal = document.getElementById("modal");
const modalChar = document.getElementById("modal-char");
const modalPro = document.getElementById("modal-pronounce");
const modalDesc = document.getElementById("modal-desc");
const btnFav = document.getElementById("btn-fav");
const closeModal = document.getElementById("close-modal");

let currentItem = null;

// Render thẻ phụ âm
function renderCards(){
    gridEl.innerHTML = "";
    consonants.forEach(item=>{
        const div = document.createElement("div");
        div.className = "bg-cardBg rounded-lg py-5 text-center card-shadow active:scale-95 transition-transform";
        div.innerHTML = `<span class="text-2xl font-bold text-gray-800">${item.char}</span>`;
        div.onclick = ()=> openModal(item);
        gridEl.appendChild(div);
    })
}

// Render trang yêu thích
function renderFav(){
    favGridEl.innerHTML = "";
    if(favList.length === 0){
        favGridEl.innerHTML = `<p class="col-span-3 text-center text-gray-400 py-10">Chưa có từ yêu thích</p>`;
        return;
    }
    favList.forEach(item=>{
        const div = document.createElement("div");
        div.className = "bg-cardBg rounded-lg py-5 text-center card-shadow active:scale-95 transition-transform";
        div.innerHTML = `<span class="text-2xl font-bold text-gray-800">${item.char}</span>`;
        div.onclick = ()=> openModal(item);
        favGridEl.appendChild(div);
    })
}

// Mở popup chi tiết
function openModal(item){
    currentItem = item;
    modalChar.innerText = item.char;
    modalPro.innerText = item.pronounce;
    modalDesc.innerText = item.desc;
    updateFavButton();
    modal.classList.remove("hidden");
}

// Đóng popup
closeModal.onclick = ()=>{
    modal.classList.add("hidden");
}
modal.onclick = (e)=>{
    if(e.target === modal) modal.classList.add("hidden");
}

// Nút thêm/xóa yêu thích
function updateFavButton(){
    const exist = favList.find(x=>x.char === currentItem.char);
    if(exist){
        btnFav.innerText = "Xóa khỏi yêu thích";
    }else{
        btnFav.innerText = "Thêm yêu thích";
    }
}
btnFav.onclick = ()=>{
    const idx = favList.findIndex(x=>x.char === currentItem.char);
    if(idx >=0){
        favList.splice(idx,1);
    }else{
        favList.push(currentItem);
    }
    localStorage.setItem("vn_consonant_fav", JSON.stringify(favList));
    updateFavButton();
    renderFav();
}

// ========== Tab chuyển trang ==========
const tabBtns = document.querySelectorAll(".tab-btn");
const pages = document.querySelectorAll(".page");
tabBtns.forEach(btn=>{
    btn.onclick = ()=>{
        const targetId = btn.dataset.target;
        // Xóa active tất cả tab
        tabBtns.forEach(b=>{
            b.classList.remove("tab-active");
            b.querySelector("svg").classList.add("text-gray-500");
        })
        btn.classList.add("tab-active");
        btn.querySelector("svg").classList.remove("text-gray-500");

        // Ẩn tất cả trang
        pages.forEach(p=>p.classList.add("hidden"));
        document.getElementById(targetId).classList.remove("hidden");
    }
})

// Khởi chạy
document.addEventListener("DOMContentLoaded", ()=>{
    renderCards();
    renderFav();
})

// Cordova sẵn sàng (nếu chạy trên điện thoại)
document.addEventListener("deviceready", ()=>{
    console.log("Cordova ready");
}, false);

重新编译 运行

D:\cordovademo\hello>cordova run android

APP中看到如下内容

卡片可以点击，底部菜单栏可以切换。

接下来，我们实现点击其中一个卡片，播放一个小音频。请看下一张

CLI 语法

cordova <command> [选项] -- [平台专属参数]

全局命令列表

无需进入 Cordova 项目目录即可执行

项目命令列表

必须在有效的 Cordova 项目根目录执行

通用选项（全部 CLI 命令支持）

平台专属参数说明

部分命令支持平台自定义参数（platformOpts）。
需要使用 -- 作为分隔符：-- 之前由 Cordova CLI 解析，-- 之后所有参数直接透传给对应原生平台构建工具。

CLI 使用示例

演示完整工作流：

1. 创建项目
2. 安装相机插件
3. 添加 Android 平台
4. 编译、运行 Android
5. 使用 Android 签名参数打正式包

# 创建项目
cordova create myApp com.foxdevelop.myApp myApp
cd myApp

# 添加相机插件
cordova plugin add cordova-plugin-camera

# 添加 Android 平台
cordova platform add android

# 检测 Android 编译环境依赖
cordova requirements android

# 编译 Android（输出详细日志）
cordova build android --verbose

# 在设备/模拟器运行 App
cordova run android

# Release正式包并传入签名参数
cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey

各命令详细说明

cordova create

创建 Cordova 项目目录结构。
语法：

cordova create path [包ID [应用名称]] [选项]

参数

选项

• --template：使用本地/NPM/GitHub 自定义模板创建项目

cordova create myapp com.mycompany.myteam.myapp MyApp

cordova platform

管理平台：新增、移除、更新、列出平台。增删平台会修改项目 platforms 目录。

cordova {platform | platforms} [
    add <平台描述> [...] {--save | link=<路径> } |
    {remove | rm} 平台 [...] {--save}|
    {list | ls}  |
    update ]

子命令与参数

平台描述格式 <platform-spec>

平台[@版本号] | 本地路径 | Git地址[#分支/tag/commit]

• platform：平台名称 android / ios / browser / electron
• version：语义化版本 semver，例如 ^13.0.0
• path：本地平台源码目录 / tar压缩包
• url：Git仓库地址
• commit-ish：指定分支、tag、commit哈希；不写默认 master

支持平台

android、browser、electron、ios

# 添加Android+iOS，并写入配置文件
cordova platform add android ios

# 指定版本添加Android平台
cordova platform add android@^13.0.0

# 从Git仓库指定tag安装平台
cordova platform add https://github.com/myfork/cordova-android.git#13.0.0

# 本地目录安装平台
cordova platform add ../android

# 删除Android平台
cordova platform rm android

# 查看所有平台
cordova platform ls

cordova plugin

管理项目插件

cordova {plugin | plugins} [
    add <插件描述> [..] {--searchpath=<目录> | --noregistry | --link | --save | --force} |
    {remove | rm} {<插件ID> | <名称>} --save |
    {list | ls}
]

子命令参数

插件描述格式 <plugin-spec>

[@scope/]插件ID[@版本] | 本地目录 | Git地址[#commit][:子目录]

插件解析优先级（由高到低）

1. 命令行显式指定的插件与版本
2. config.xml / package.json 保存的插件信息
3. npm上兼容当前项目的最新版本（插件package.json声明cordova依赖）
4. npm上插件最新版本

# 安装相机、文件插件，优先从../plugins查找
cordova plugin add cordova-plugin-camera cordova-plugin-file --searchpath ../plugins

# 指定版本安装
cordova plugin add cordova-plugin-camera@^2.0.0

# 本地目录安装插件
cordova plugin add ../cordova-plugin-camera

# 删除插件
cordova plugin rm cordova-plugin-camera

# 查看插件列表
cordova plugin ls

插件冲突说明

部分插件通过 plugin.xml 的 edit-config 修改原生配置文件。
多个插件同时修改同一个XML节点会产生冲突，CLI默认阻止安装。
解决方式：

1. 修改插件 plugin.xml，避免修改同一节点（推荐）
2. 使用 --force 强制安装（ 风险：会覆盖其他插件修改，可能导致其他插件失效）

cordova prepare

将 config.xml 配置同步到各平台原生清单文件；复制图标、启动图、插件资源；使项目满足原生SDK编译条件。

cordova prepare [平台名称...]

不指定平台则全部执行。

cordova compile

仅执行编译，不会执行 prepare。一般直接使用 build，多用于钩子扩展场景。

cordova compile [平台...]
    [--debug | --release]
    [--device | --emulator | --target=<名称>]
    [--buildConfig=<文件>]
    [-- 平台参数]

cordova build

等价 prepare + compile，构建应用包。

cordova build [平台...]
    [--debug | --release]
    [--device | --emulator]
    [--buildConfig=<配置文件>]
    [-- 平台参数]

cordova build android --release --buildConfig=build.json
cordova build android --release -- --keystore="app.keystore" --alias=key0

cordova run

执行 prepare → build → 将应用部署到真机/模拟器并启动。

cordova run [平台...]
    [--list | --debug | --release]
    [--noprepare]
    [--nobuild]
    [--device | --emulator | --target=<名称>]
    [--buildConfig=<文件>]
    [-- 平台参数]

示例：

# 列出设备
cordova run android --list
# 指定模拟器运行
cordova run android --target=Nexus_5_API_23_x86
# 不重新编译，直接运行
cordova run android --nobuild

cordova emulate

cordova run --emulator 的别名，仅在模拟器启动应用。

cordova clean

清理各平台编译缓存产物

cordova clean android

cordova requirements

检测平台所需全部环境依赖（JDK、Android SDK、Xcode等）

cordova requirements android

所有依赖满足返回退出码0，缺失依赖返回非0，常用于自动化构建环境校验。

cordova info

输出完整环境、平台、插件信息，提交bug反馈必备。

cordova info

cordova serve

启动本地 Web 服务预览 www 网页资源，默认端口8000

cordova serve 8080
# 访问地址：http://127.0.0.1:8080/android/www

cordova help

查看命令帮助

cordova help build
cordova build -h

cordova config

管理 Cordova 全局配置

cordova config ls                # 列出全部配置
cordova config set save-exact true
cordova config get save-exact
cordova config delete save-exact
cordova config edit

myapp/
├── config.xml
├── node_modules/
├── package.json
├── platforms/
├── plugins/
└── www

package.json

清单文件，声明项目用到的 JavaScript 包依赖，包含 Cordova、已添加的平台以及所有安装的插件。插件配置变量同样保存在此文件中。

你的项目可能已经存在自带依赖的 package.json（例如前端框架生成）。Cordova 只会向文件追加自身所需配置，不会干扰其他工具与现有依赖。

{
  "name": "com.foxdevelop.hello",
  "displayName": "HelloWorld",
  "version": "1.0.0",
  "description": "A sample Apache Cordova application that responds to the deviceready event.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "Apache Cordova Team",
  "license": "Apache-2.0",
  "devDependencies": {
    "cordova-android": "^15.1.0",
    "cordova-plugin-camera": "^8.0.0"
  },
  "cordova": {
    "platforms": [
      "android"
    ],
    "plugins": {
      "cordova-plugin-camera": {
        "ANDROIDX_CORE_VERSION": "1.6.+"
      }
    }
  }
}

1. "name": "com.foxdevelop.hello" npm 包名称。在 Cordova 项目中，一般和 config.xml 的 widget id 保持一致。

注意：这不是 Android/iOS 原生包名，原生包名依然由 config.xml 的 id 控制。

2. "displayName": "HelloWorld" 友好显示名称，对应 App 应用名，和 config.xml 内 <name> 保持对应。
3. "version": "1.0.0" 项目版本号，遵循语义化版本 主版本.次版本.修订号，建议和 config.xml 的 version 统一。
4. "description": "A sample Apache Cordova application that responds to the deviceready event." 项目描述，元信息，用于 npm 展示，不影响 APP 打包运行。
5. "main": "index.js" npm 规范入口文件。Cordova 几乎不会使用这个字段，属于模板自动生成，可以忽略。Cordova APP 真正网页入口是 www/index.html（config.xml 控制）。
6. "scripts": { "test": "echo \"Error: no test specified\" && exit 1" } npm 自定义脚本。模板默认只有 test，没有配置构建、打包快捷命令。 你后续可以自行扩展，例如：

"scripts": {
  "build-android": "cordova build android"
}

7. "keywords": ["ecosystem:cordova"] npm 搜索标签。ecosystem:cordova 标记该项目为 Cordova 生态工程，仅用于 npm 检索，无运行作用。
8. "author": "Apache Cordova Team" 作者信息，纯元数据。
9. "license": "Apache-2.0" 开源协议：Apache 2.0。Cordova 官方默认协议。

config.xml

存放 Cordova 应用的各项偏好设置与配置项，用来自定义项目运行行为。

参考文档：config.xml 官方参考手册

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.foxdevelop.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
</widget>

id="com.foxdevelop.hello"应用唯一包名（Bundle ID）

• Android：应用包名 applicationId
• iOS：Bundle Identifier

上架商店不能随便修改！修改后视为全新应用。规范：反向域名 公司域名.项目名

version="1.0.0" 应用版本号（语义化版本 major.minor.patch），打包后对应 App 版本。

<name>HelloWorld</name>

应用显示名称，手机桌面图标下方展示的 App 名字。

<description>

应用描述信息，部分平台打包、商店信息会读取。

<author>

开发者信息：邮箱、官网、作者名称，仅元数据，不影响运行。

<content src="index.html" />

最重要配置

Cordova APP 启动加载的首页。

程序打开后，容器直接加载 www/index.html。

你可以修改为 src="pages/home.html" 变更入口页面。

<allow-intent>

<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

作用：允许 App 唤起外部浏览器打开网页

allow-intent ≠ 页面内允许跨域访问！

两者极易混淆：

1. allow-intent：点击链接 target="_blank"，跳转系统浏览器，允许跳转哪些网址。 当前配置：所有 http/https 网址都允许唤起外部浏览器。
2. access origin：控制 App 内部 webview 是否可以请求外部接口（跨域），这份配置里缺失！

常见坑：

如果你网页内 AJAX 请求接口报错跨域，只写 allow-intent 没用，必须新增：

xml

<!-- 允许webview内访问所有https接口 -->
<access origin="*" />

www/

存放项目网页资源：HTML、CSS、JavaScript 以及各类静态资源文件。

作为 Cordova 应用开发者，绝大多数业务代码和资源都放在此目录。执行 cordova prepare 命令后，该目录文件会被复制到各个平台对应的 www 目录中。

源码目录 www 会被同步复制至各平台子目录，示例路径：

platforms/ios/www 或 platforms/android/assets/www。

CLI 会持续从源码 www 目录覆盖平台目录内文件，只能编辑根目录 www 下的文件，不要直接修改 platforms 内的文件。

如果你使用前端构建工具，应当配置构建产物输出到 www 文件夹；若直接在 www 内开发源码，建议将此目录纳入版本控制。

node_modules/

存放从 npm 仓库下载的所有 JavaScript 依赖包，包括 Cordova、配套工具，以及 package.json 声明的项目依赖。

执行 cordova platform add、cordova plugin add 添加平台 / 插件时，对应的资源会从 npmjs 仓库拉取并下载至 node_modules/。

随后 Cordova 会从该目录复制平台、插件源码到对应位置，保证程序正常运行。

该目录同时包含 cordova prepare、cordova build 构建各平台所需脚本。

重要：node_modules 是原始依赖源码目录，禁止手动修改里面任何文件；同时该目录不要提交到版本控制系统。

更多信息查阅 npmjs 目录规范文档。

platforms/

存放你添加到项目中的各个平台源码与构建脚本。

警告：使用 CLI 构建应用时，除非你充分了解原理、或者官方文档明确说明，否则不要修改 /platforms/ 内任意文件。

项目构建准备、重装插件时，该目录下的文件会被频繁覆盖重写。

plugins/

插件临时中转目录：已安装插件会先复制到此目录，之后再部署到各个平台目录。

该目录不建议提交到版本控制。

如果你开发了自研、内部定制或者修改过的插件，不要存放在 plugins 目录中。

版本控制规范

推荐不要将 platforms/、plugins/ 纳入版本管理，二者属于构建产物。

已安装的平台与插件信息会自动记录在 package.json。执行 cordova prepare 时，程序会自动下载对应的平台与插件。

可选目录

merges/

通过 CLI 创建 Cordova 项目时，默认不会生成 merges 目录。官方不推荐使用该目录，但仍保留兼容支持。

该目录下子文件夹用于存放平台专属网页资源（HTML、CSS、JS）。执行 prepare 阶段时，资源会部署到对应原生项目目录。

放在 merges/ 中的文件，会覆盖 www 目录下同名文件（对应平台生效）。

举个示例目录结构：

plaintext

myapp/
├── merges
│   ├── android/
│   │   └── android.js
│   └── ios/
│       └── app.js
└── www/
    └── app.js

编译 Android、iOS 项目后：

• Android 应用：包含 app.js（来自 www） + android.js
• iOS 应用：仅存在 app.js，文件来源是 merges/ios/app.js，覆盖了 www 下通用版 app.js

一、创建 Cordova 项目

打开终端，进入你想要存放项目的文件夹，执行创建命令：

cordova create hello com.foxdevelop.hello HelloWorld

参数说明：

1. hello：项目文件夹名称
2. com.example.hello：应用包名（安卓唯一标识，上线必须修改）
3. HelloWorld：应用显示名称

下面是正式例子，在d盘创建了一个目录，然后在目录里面创建项目

C:\Users>d:

D:\>mkdir cordovademo

D:\>cd cordovademo

D:\cordovademo>cordova create hello com.foxdevelop.hello HelloWorld
Creating a new cordova project.

然后在D盘中，就可以看到cordovademo目录，里面有一个hello的子目录。

核心源码目录：hello/www/

入口页面：www/index.html

不要修改 platforms 目录下任何文件，打包时会被覆盖！

二、进入项目，添加平台

cd hello

添加平台

# 安卓平台（Windows可用）
cordova platform add android

# ios平台【Windows无法编译！仅Mac电脑支持】
# cordova platform add ios

执行记录

D:\cordovademo>cd hello

D:\cordovademo\hello>cordova platform add android
Using cordova-fetch for cordova-android
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.foxdevelop.hello
        Name: HelloWorld
        Activity: MainActivity
        Android Target SDK: android-36
        Android Compile SDK: 36
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@15.1.0

D:\cordovademo\hello>cordova platform ls
Installed platforms:
  android 15.1.0
Available platforms:
  browser
  electron

三、环境前置检查（重要）

cordova requirements

检查你的系统是否已经配置好了环境，例如安装JDK等等。

D:\cordovademo\hello>cordova requirements
Android SDK is missing cmdline-tools directory.

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
Command failed with exit code 1: avdmanager list target
'avdmanager' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
Gradle: not installed
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
Some of requirements check failed

正常是

Java JDK: installed
Android SDK: installed
Gradle: installed

但是我这里Gradle: not installed

如果读者，没安装JDK，则需要安装JDK，关于JDK的安装，可以参考其他课程，

我这里安装的jdk是11的版本

作者本机出现如下

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=undefined (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Android SDK is missing cmdline-tools directory.
Using Android SDK: D:\Sortware\ADB
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

读者需要安装android studio 里面包含sdk

关于android studio，可以参考其他课程

打开你的Android studio 顶部菜单：Tools → SDK Manager 然后 找到下面的 sdk 查看你的sdk路径

然后设置环境变量

变量名：ANDROID_HOME
变量值：C:\Users\xxxxx\AppData\Local\Android\Sdk

除了创建变量值，还要加到path中

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\cmdline-tools\latest\bin

Android Studio 安装命令行工具

打开 Android Studio → Tools → SDK Manager

切换到 SDK Tools 标签

下载 Gradle 二进制包

官网下载：https://gradle.org/releases/

解压到路径：C:\gradle\gradle-8.5

Gradle by Develocity | Releases

配置系统环境变量

变量名：GRADLE_HOME
变量值：C:\gradle-8.7

新建【系统变量】

配置到Path中

验证是否安装成功

打开cmd

gradle -v

再次测试，出现下面 则表示成功配置

D:\cordovademo\hello>cordova requirements

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
No android targets (SDKs) installed!
Gradle: installed C:\gradle-8.7\bin\gradle.BAT
Some of requirements check failed

问题2 JDK版本

小编使用cordova run android 命令后报如下错误

D:\cordovademo\hello>cordova run android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)

BUILD SUCCESSFUL in 1sCUTING [91ms]
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

FAILURE: Build failed with an exception.

* Where:
Build file 'D:\cordovademo\hello\platforms\android\app\build.gradle' line: 20

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 17 to run. You are currently using Java 11.
      Your current JDK is located in C:\Program Files\Zulu\zulu-11
      You can try some of the following options:
       - changing the IDE settings.
       - changing the JAVA_HOME environment variable.
       - changing `org.gradle.java.home` in `gradle.properties`.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.14.2/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.

BUILD FAILED in 2s
Command failed with exit code 1: D:\cordovademo\hello\platforms\android\tools\gradlew.bat cdvBuildDebug

小编当前环境 JDK11，但当前 Cordova Android 平台搭配的 AGP (Android Gradle Plugin) 强制要求 JDK17，构建直接失败。

小编用的是Zulu JDK 11 所以本次更新到Zulu JDK 17

请到这里下载 Java 8, 11, 17, 21, 25 Download for Linux, Windows and macOS

下载的是一个msi 然后点击安装 安装的勾选下面这些，让安装包自动配置javahome path这些

打开CMD检查一下java

java -version

openjdk version "17.0.20" 2026-07-21 LTS
OpenJDK Runtime Environment Zulu17.68+17-CA (build 17.0.20+8-LTS)
OpenJDK 64-Bit Server VM Zulu17.68+17-CA (build 17.0.20+8-LTS, mixed mode, sharing)

提示以上则表示成功

四、构建应用

# 构建所有平台（当前只有android）
cordova build

# 只构建安卓
cordova build android

编译成功后，apk 输出路径：

hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk

实录

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: C:\Users\maiwu\AppData\Local\Android\Sdk

BUILD SUCCESSFUL in 9s
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

> Task :CordovaLib:compileDebugJavaWithJavac
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

BUILD SUCCESSFUL in 11s
50 actionable tasks: 50 executed
Built the following apk(s):
        D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk

在目录下面看到apk文件D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\

五、测试运行

方式 1：安卓模拟器运行

cordova emulate android

方式 2：USB 连接真机测试（开启 USB 调试）

cordova run android

我们使用真机来测试，也建议大家使用真机测试，用数据线链接android手机，然后手机开启调试模式。

在hello目录下面 打开cmd，执行命令cordova run android

之后手机就可以安装一个app

打开cordova的页面了

六、插件安装

访问手机原生能力

Cordova 网页本身不能调用摄像头、蓝牙、文件、通知等硬件，必须安装插件。

示例：摄像头插件

cordova plugin add cordova-plugin-camera

查看已安装插件

cordova plugin ls

JS 调用原生 API 必须等待 deviceready 事件触发，页面加载完成不能直接调用插件！

基础模板示例（www/js/index.js）

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // 设备就绪，可以调用所有cordova插件
    console.log("Cordova初始化完成");
}

实录

D:\cordovademo\hello>cordova plugin add cordova-plugin-camera
Installing "cordova-plugin-camera" for android
Subproject Path: CordovaLib
Subproject Path: app
Adding cordova-plugin-camera to package.json

D:\cordovademo\hello>cordova plugin ls
cordova-plugin-camera 8.0.0 "Camera"

下面修改index.html 为如下代码，测试摄像头功能

首先说明一下，创建好项目后，我们的目录文件

D:\cordovademo\hello

日后编写代码就在www中

修改index.html 为如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Test</title>
    <script src="cordova.js"></script>
</head>
<body>
    <button id="btnTake">拍照</button>
    <br>
    <img id="imgPreview" style="width:220px;">

    <script>
        let cameraReady = false;

        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            console.log("deviceready 触发，Cordova就绪");
            cameraReady = true;
        }

        // 改用addEventListener绑定（onclick容易出现时序冲突，推荐）
        document.getElementById("btnTake").addEventListener("click", function(){
            if(!cameraReady){
                alert("等待Cordova初始化完成！");
                return;
            }

            navigator.camera.getPicture(
                function(imageUri) {
                    console.log("拍照成功：", imageUri);
                    document.getElementById("imgPreview").src = imageUri;
                },
                function(error) {
                    alert("拍照失败：" + error);
                },
                {
                    destinationType: 0, // Camera.DestinationType.FILE_URI = 0，直接用数字规避Camera未定义
                    sourceType: 1,      // Camera.PictureSourceType.CAMERA = 1
                    quality: 80
                }
            );
        });
    </script>
</body>
</html>

再次运行cordova run android 命令

会打开app，上面看到一个按钮，点击按钮，就会打开摄像头，然后就可以拍照了。

* 七、merges 目录：多平台差异化文件

默认所有平台共用 www 资源。

如果你想要安卓、iOS 界面资源不一样，使用 merges 文件夹：

merges/
├─android/
│  └─css/overrides.css  # 仅安卓生效
└─ios/

构建时，merges 内文件会覆盖 www 同名文件。

* 八、升级 Cordova

# 全局升级cordova命令行
npm update -g cordova

# 安装指定版本
npm install -g cordova@12.0.0

# 更新项目内安卓平台版本
cordova platform update android --save

命令汇总

#1 创建项目
cordova create testapp com.mytest.app TestApp
cd testapp

#2 添加安卓平台
cordova platform add android

#3 检查环境
cordova requirements

#4 编译调试包
cordova build android

#5 真机运行
cordova run android

一套代码库，适配多平台，并且是免费开源。

如果你符合以下场景，可以选择 Apache Cordova：

• 你是移动开发者，想要一套应用部署到多个平台，无需针对各平台语言与工具链重复开发；
• 你是 Web 开发者，希望将网页应用打包，上架到各大应用商店分发；
• 你是移动开发者，需要混合原生组件与 WebView（专用浏览器窗口），让网页代码访问设备底层 API；或是需要开发插件，打通原生代码与 WebView 之间的调用通道。

Cordova 应用由多个组件构成。下图为 Cordova 应用架构高层概览。

WebView（网页视图）

搭载 Cordova 能力的 WebView 可以承载应用完整界面。在部分平台中，它也能作为组件嵌入混合应用，和原生控件共同工作。

Web App（网页应用）

这里存放你的业务代码。应用本身以网页形式实现，默认入口为本地 index.html 文件，页面引用所需 CSS、JavaScript、图片、媒体资源等文件。整个应用运行在原生容器内部的 WebView 中，最终打包分发至各个应用商店。

容器中有一个至关重要的文件：config.xml。该文件记录应用基础信息，并定义各项运行参数，例如是否支持屏幕横竖屏切换。

Plugins（插件）

插件是 Cordova 生态的核心组成部分。它提供桥梁，实现 Cordova 与原生代码互相通信，并封装各类设备标准 API，让 JavaScript 能够调用原生代码。

Apache Cordova 官方维护一组核心插件，提供访问设备基础能力的接口：电池状态、相机、通讯录等。

除官方核心插件外，还有大量第三方插件，封装各类并非全平台通用的扩展功能。你可以通过插件检索平台或 npm 查找 Cordova 插件；也可以按照《插件开发指南》自主开发插件。典型场景：实现 Cordova 和自定义原生组件之间的通信。

注意：新建 Cordova 项目默认不自带任何插件，这是新版默认规则。无论核心插件还是第三方插件，都需要手动显式安装。

Cordova *不提供 UI 控件与 MV 前端框架 **，仅提供承载网页代码的运行环境。如果你需要界面组件或前端架构框架，需要自行选择并集成到项目中。

两种开发流程

Cordova 提供两套主流工作流来构建移动应用。很多场景下两套流程都能实现目标，但各有优势：

跨平台工作流（CLI 命令行工具）

适合目标平台较多、极少需要平台专属定制开发的场景。核心工具为 cordova CLI。 CLI 是高层工具，支持一次性为多个平台构建项目，屏蔽底层脚本细节： CLI 将通用网页资源复制到各个平台子目录，自动完成平台配置，执行构建脚本生成安装包；同时提供统一命令行接口管理插件。

平台专属工作流

适合聚焦单一平台开发、需要深度底层修改项目的场景

典型使用场景：在应用内混合自定义原生组件与 Cordova WebView

如果你需要直接修改平台 SDK 内项目文件，就选用这套流程。

该工作流基于各平台专属底层脚本，搭配独立工具 Plugman 管理插件。 虽然也能用它做多平台开发，但成本更高：没有高层工具统一管理，每个平台需要单独构建、单独维护插件配置。

一旦从 CLI 模式切换为平台 SDK + 底层脚本模式，无法回退。

CLI 会维护一套跨平台公共源码，每次构建都会覆盖平台目录内的代码。如果你需要保留对平台目录文件的修改，就必须切换到底层脚本模式；该模式不再读取公共网页源码，直接使用平台目录内独立代码。

安装 Cordova

安装方式取决于你选择的开发流程：

我们以跨平台 CLI 工作流模式为例。

Cordova 命令行工具（CLI）以 npm 包形式分发。

按照以下步骤安装 cordova CLI：

1. 下载并安装 Node.js。安装完成后，你应当可以在终端直接调用 node 和 npm 命令。
2. （可选）如果你尚未安装 Git，下载并安装 Git 客户端。安装后，可在命令提示符（终端）执行 git 命令。当需要通过 Git 仓库地址下载资源时，Cordova CLI 和 npm 会调用 git。
3. 使用 Node.js 自带的 npm 工具安装 cordova 模块，npm 将自动完成下载。

安装nodejs

安装nodejs比较简单，下载msi（对于windows系统），直接双击安装就可以，安装过程就基本下一步就可以。安装完毕后

打开CMD终端，检验是否安装成功

输入两条命令，两条都正常输出版本号才算成功（输出版本号，如下图）

node -v
npm -v

成功安装nodejs后，下面开始安装cordova

macOS / Linux 系统：

npm install -g cordova

macOS 与 Linux 用户：若需要将工具安装到 /usr/local/share 这类权限受限目录，执行 npm 命令时可能需要加上 sudo。
但如果你使用了 nvm / nave 这类版本管理工具，或者当前目录拥有写入权限，则可以不加 sudo。

同时建议：尽量避免搭配 sudo 使用 npm，防止出现权限、包安装异常等问题。
推荐使用 nvm（Node Version Manager）或 nave 版本管理器管理 Node.js 和 npm，安装包时通常无需 sudo。

Windows 系统：

C:\>npm install -g cordova

参数 -g 代表全局安装 cordova；如果不加该参数，只会安装在当前目录的 node_modules 子文件夹内。

安装完成后，在终端直接执行 cordova（不带任何参数），若正常输出帮助信息即代表安装成功。

安装过程 显示“added 217 packages in 14s”

检验是否安装成功

cordova -v

正常输出版本号（例如 13.0.0）就代表就绪。

系统要求与版本支持

现在安装成功，接下来，我们就开始正式学习cordova了。