Chocolatechip-UI、Cordova 和 Android - 处理物理返回按钮事件
5.00/5 (1投票)
如何使用 Chocolatechip-UI 和 Cordova 处理 Android 物理返回按钮事件。
引言
本技巧描述了在使用 Chocolatechip-UI 框架和 Cordova 构建混合应用时，当 Android 设备上的物理返回按钮被按下时，如何处理应用导航事件。
背景
您需要了解构建 Android Cordova 应用的基础知识，以及 Chocolatechip-UI 框架及其标记的一些基本知识。
Chocolatechip-UI
http://chocolatechip-ui.com/
Apache Cordova - Android 入门
https://cordova.net.cn/docs/en/2.5.0/guide_getting-started_android_index.md.html
Using the Code
创建 Cordova 项目并向 index.html 文件添加所需的 Chocolatechip-UI 和 JQuery 引用后，您需要确定要具有退出应用行为的 <article> 标签，以便当用户在该标签上并按下返回按钮时，我们可以退出应用。
选择后，在该标签上添加类 'exit-enable'。以下是包含简单父子文章和简单导航的 index.html 文件的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no">
<title>My App</title>
<link rel="stylesheet"
href="./frameworks/chui_3.8/chui-android-3.8.10.min.css">
<script src="./frameworks/jquery-2.1.1.min.js"></script>
<script src="./frameworks/chui_3.8/chui-3.8.10.min.js"></script>
</head>
<body >
<nav class='current'>
<h1>Parent Article</h1>
</nav>
<!-- We want this article to be main one.
When user presses the device back button and this article is visible, it will close the app.
For this, we add the 'exit-enable' class on it.
-->
<article id='home' class='current exit-enable'>
<section>
<ul class='list'>
<li data-goto='child-article' class='nav'>
<h3>Child Article 1</h3>
</li>
</ul>
</section>
</article>
<nav class='next'>
<button class='back'></button>
<h1>Child Article 1</h1>
</nav>
<article id='child-article' class='next'>
<section>
<ul class='list'>
<li data-goto='child-article-2' class='nav'>
<h3>Child Article 2</h3>
</li>
</ul>
<p>You are in the child article 1</p>
</section>
</article>
<nav class='next'>
<button class='back'></button>
<h1>Child Article 2</h1>
</nav>
<article id='child-article-2' class='next'>
<section>
<ul class='list'>
<li>
<h3>You are in a very deep article now.</h3>
</li>
</ul>
<p>Try to go back using the device's back button.</p>
</section>
</article>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
您可以在 此处 了解有关 Chocolatechip-UI 导航语法和标记的更多信息。
在 JavaScript 初始化代码中，我们为 backbutton 事件添加一个事件监听器。
注意：在设置 backbutton 事件的回调函数之前，重要的是要监听 deviceready 事件。您可以根据您的项目结构以您希望的方式实现此功能。以下是如何监听 deviceready 事件的示例
index.js 文件
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
//Physical Back Button events
document.addEventListener('backbutton', onBackKeyDown);
}
以下是 onBackKeyDown 函数
function onBackKeyDown(event){
//prevent the default back button event
event.preventDefault();
//if there is any popup opened, then close it using the native ChUI method call
if ($('.popup.opened').length) {
console.log('manually closing popup.');
$('.popup.opened').UIPopupClose();
}
//Check if current article allows user to exit.
//If you want your app to close when the user presses the back button from a specific article,
//you just need to set a class 'exit-enable' on it. Example:
//
//<article id='home' class='current exit-enable'>
// <section>....</section>
//</article>
//
//if article contains exit-enable class, then call cordova exitApp method
else if ($('article.current').hasClass('exit-enable')) {
console.log('exiting app...');
navigator.app.exitApp();
}
//When you navigate to an article, Chocolatechip-ui will always set the .previous class to the
//previous article.
//Thus, it is easy to determine if there is a backwards navigable article.
//If there is one, just navigate back to it.
else if($('article.previous').length) {
console.log('navigating back to article.');
//call ChUI native navigation method, passing the article id
$.UIGoBack();
}
}
注意： 如果您的应用布局在设备上运行时看起来很奇怪，请考虑在您的项目中包含 Crosswalk 插件：https://crosswalk-project.org/documentation/cordova/cordova_4.html。
但是，这超出了本技巧的范围。
关注点
Chocolatechip-UI 是一个用于创建具有原生外观和感觉的混合应用的优秀框架，而 Apache Cordova 提供了我们创建完整功能移动应用所需的所有设备功能。
由于 Chocolatechip-UI 已经包含一个非常好的内置导航引擎，它与默认的 Cordova 导航事件有很大不同，因此上述解决方案可以轻松地以解耦、高效的方式将返回按钮功能集成到您的应用中。
历史
- 2015 年 8 月 26 日：在返回按钮事件上添加了“关闭弹出窗口”功能。
- 2015 年 8 月 24 日：更新了 ChUI 导航方法调用