cordova实现“再点击一次退出”效果

本文介绍如何在Cordova应用中处理Android设备的返回键,并通过自定义插件实现Toast消息提示功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基本的写法如下: 
Java代码  收藏代码
  1. document.addEventListener("deviceready", onDeviceReady, false);  
  2.               
  3. function onDeviceReady() {  
  4.     //navigator.splashscreen.hide();  
  5.         document.addEventListener("backbutton", onBackKeyDown, false);                       
  6. }  
  7.             function onBackKeyDown() {  
  8.                 Toast.showShort('再点击一次退出!');  
  9.                 document.removeEventListener("backbutton", onBackKeyDown, false); // 注销返回键  
  10.                 document.addEventListener("backbutton", exitApp, false);//绑定退出事件  
  11.                 // 3秒后重新注册  
  12.                 var intervalID = window.setInterval(function() {  
  13.                     window.clearInterval(intervalID);  
  14.                     document.removeEventListener("backbutton", exitApp, false); // 注销返回键  
  15.                     document.addEventListener("backbutton", onBackKeyDown, false); // 返回键  
  16.                 }, 3000);  
  17.             }  
  18.             function exitApp(){  
  19.                 navigator.app.exitApp();  
  20.             }  


上面的代码中需要一个toast插件,这个是需要自己实现的,当然你可以使用纯JS写一个模仿android。 

比如我提供一个现成的(PS:本人没有使用过,不知道有没有效果!) 

Java代码  收藏代码
  1. /** 
  2.  * 自定义toast,js实现android中toast效果   
  3.  * @param msg 显示文字 
  4.  * @param duration 显示的时间长度 
  5.  */  
  6. function showToast(msg, duration) {    
  7.     duration = isNaN(duration) ? 3000 : duration;    
  8.     var m = document.createElement('div');    
  9.     m.innerHTML = msg;    
  10.     m.style.cssText = "width:60%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:70%; left:20%; z-index:999999; font-weight:bold;";    
  11.     document.body.appendChild(m);    
  12.     setTimeout(function() {    
  13.         var d = 0.5;    
  14.         m.style.webkitTransition = '-webkit-transform ' + d    
  15.                 + 's ease-in, opacity ' + d + 's ease-in';    
  16.         m.style.opacity = '0';    
  17.         setTimeout(function() {    
  18.             document.body.removeChild(m)    
  19.         }, d * 1000);    
  20.     }, duration);    
  21. }  



我采用的是插件的形式: 
1,用java写一个cordova插件(本人只会java,object-c不会,所以要在iphone上跑还需要用object-c写一个,这是使用插件不足的地方,不过可以网上搜一下,这种小插件基本可以搞定!) 

Java代码  收藏代码
  1. package com.mobovip.mobile.plugin.toast;  
  2.   
  3. import org.apache.cordova.CallbackContext;  
  4. import org.apache.cordova.CordovaPlugin;  
  5. import org.json.JSONArray;  
  6. import org.json.JSONException;  
  7.   
  8. import android.widget.Toast;  
  9.   
  10. public class ToastPlugin extends CordovaPlugin {  
  11.   
  12.     private static final int TOAST_MESSAGE_INDEX = 0;  
  13.     private Toast toast = null;  
  14.       
  15.     @Override  
  16.     public boolean execute(String action, JSONArray data,  
  17.             CallbackContext callbackContext) throws JSONException {  
  18.           
  19.         if(action.equals("show_short")){  
  20.             String message = data.getString(TOAST_MESSAGE_INDEX);  
  21.             showToast(message, Toast.LENGTH_SHORT);  
  22.         }else if(action.equals("show_long")){  
  23.             String message = data.getString(TOAST_MESSAGE_INDEX);  
  24.             showToast(message, Toast.LENGTH_LONG);  
  25.         }else if(action.equals("cancel")){  
  26.             cancelToast();  
  27.         }  
  28.         callbackContext.success();  
  29.         return true;  
  30.     }  
  31.       
  32.     private void showToast(final String message, final int length) {  
  33.         cordova.getActivity().runOnUiThread(new Runnable(){  
  34.   
  35.             @Override  
  36.             public void run() {  
  37.                 // TODO Auto-generated method stub  
  38.                  toast = Toast.makeText(cordova.getActivity(), message, length);    
  39.                  toast.show();    
  40.             }  
  41.               
  42.         });  
  43.     }  
  44.       
  45.     private void cancelToast() {    
  46.         cordova.getActivity().runOnUiThread(new Runnable() {    
  47.             @Override    
  48.             public void run() {    
  49.                 if (toast != null){  
  50.                     toast.cancel();  
  51.                 }  
  52.             }    
  53.         });    
  54.     }    
  55.       
  56. }  


2,在res/xml/config.xml文件中增加插件配置 
Xml代码  收藏代码
  1. <feature name="Toast">  
  2.         <param name="android-package" value="com.mobovip.mobile.plugin.toast.ToastPlugin" />  
  3.     </feature>  


3,在asserts/www/plugins/目录下实现自己插件的toast.js文件 
Java代码  收藏代码
  1. cordova.define("com.mobovip.mobile.plugin.toast.Toast", function(require, exports, module) {/*global cordova, module*/  
  2. module.exports = {  
  3.     showShort: function (message, win, fail) {  
  4.         cordova.exec(win, fail, "Toast""show_short", [message]);  
  5.     },  
  6.   
  7.     showLong: function (message, win, fail) {  
  8.         cordova.exec(win, fail, "Toast""show_long", [message]);  
  9.     },  
  10.   
  11.     cancel: function (win, fail) {  
  12.         cordova.exec(win, fail, "Toast""cancel", []);  
  13.     }  
  14. };  
  15. });  


4,添加toast插件js配置信息 

   在assets/www/cordova_plugins.js文件中添加如下信息: 
Xml代码  收藏代码
  1. module.exports = [  
  2.    {    
  3.         "file": "plugins/com.mobovip.mobile.plugin.toast/www/toast.js",    
  4.         "id": "com.mobovip.mobile.plugin.toast.Toast",    
  5.         "clobbers": [    
  6.             "Toast"  //Js中使用的时候变量的名称  
  7.         ]    
  8.    },  
  9.     .........  


同时加上插件的版本: 
Xml代码  收藏代码
  1. module.exports.metadata =   
  2. // TOP OF METADATA  
  3. {  
  4.     "com.mobovip.mobile.plugin.toast": "1.0.0",   
  5.      .........  


5,代码调用 
Java代码  收藏代码
  1. Toast.showShort('再点击一次退出!');  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值