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

基本的写法如下：

document.addEventListener("deviceready", onDeviceReady, false);
			
function onDeviceReady() {
	//navigator.splashscreen.hide();
        document.addEventListener("backbutton", onBackKeyDown, false);                     
}
			function onBackKeyDown() {
			    Toast.showShort('再点击一次退出!');
			    document.removeEventListener("backbutton", onBackKeyDown, false); // 注销返回键
			    document.addEventListener("backbutton", exitApp, false);//绑定退出事件
			    // 3秒后重新注册
			    var intervalID = window.setInterval(function() {
			        window.clearInterval(intervalID);
			        document.removeEventListener("backbutton", exitApp, false); // 注销返回键
			        document.addEventListener("backbutton", onBackKeyDown, false); // 返回键
			    }, 3000);
			}
			function exitApp(){
			    navigator.app.exitApp();
			}

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

比如我提供一个现成的（PS：本人没有使用过，不知道有没有效果！）

/**
 * 自定义toast，js实现android中toast效果  
 * @param msg 显示文字
 * @param duration 显示的时间长度
 */
function showToast(msg, duration) {  
    duration = isNaN(duration) ? 3000 : duration;  
    var m = document.createElement('div');  
    m.innerHTML = msg;  
    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;";  
    document.body.appendChild(m);  
    setTimeout(function() {  
        var d = 0.5;  
        m.style.webkitTransition = '-webkit-transform ' + d  
                + 's ease-in, opacity ' + d + 's ease-in';  
        m.style.opacity = '0';  
        setTimeout(function() {  
            document.body.removeChild(m)  
        }, d * 1000);  
    }, duration);  
}

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

package com.mobovip.mobile.plugin.toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

import android.widget.Toast;

public class ToastPlugin extends CordovaPlugin {

	private static final int TOAST_MESSAGE_INDEX = 0;
	private Toast toast = null;
	
	@Override
	public boolean execute(String action, JSONArray data,
			CallbackContext callbackContext) throws JSONException {
		
		if(action.equals("show_short")){
			String message = data.getString(TOAST_MESSAGE_INDEX);
			showToast(message, Toast.LENGTH_SHORT);
		}else if(action.equals("show_long")){
			String message = data.getString(TOAST_MESSAGE_INDEX);
			showToast(message, Toast.LENGTH_LONG);
		}else if(action.equals("cancel")){
			cancelToast();
		}
		callbackContext.success();
		return true;
	}
	
	private void showToast(final String message, final int length) {
		cordova.getActivity().runOnUiThread(new Runnable(){

			@Override
			public void run() {
				// TODO Auto-generated method stub
				 toast = Toast.makeText(cordova.getActivity(), message, length);  
	             toast.show();  
			}
			
		});
	}
	
	private void cancelToast() {  
        cordova.getActivity().runOnUiThread(new Runnable() {  
            @Override  
            public void run() {  
                if (toast != null){
                	toast.cancel();
                }
            }  
        });  
    }  
	
}

2，在res/xml/config.xml文件中增加插件配置

<feature name="Toast">
        <param name="android-package" value="com.mobovip.mobile.plugin.toast.ToastPlugin" />
    </feature>

3，在asserts/www/plugins/目录下实现自己插件的toast.js文件

cordova.define("com.mobovip.mobile.plugin.toast.Toast", function(require, exports, module) {/*global cordova, module*/
module.exports = {
    showShort: function (message, win, fail) {
        cordova.exec(win, fail, "Toast", "show_short", [message]);
    },

    showLong: function (message, win, fail) {
        cordova.exec(win, fail, "Toast", "show_long", [message]);
    },

    cancel: function (win, fail) {
        cordova.exec(win, fail, "Toast", "cancel", []);
    }
};
});

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

   在assets/www/cordova_plugins.js文件中添加如下信息：

module.exports = [
   {  
	    "file": "plugins/com.mobovip.mobile.plugin.toast/www/toast.js",  
	    "id": "com.mobovip.mobile.plugin.toast.Toast",  
	    "clobbers": [  
	        "Toast"  //Js中使用的时候变量的名称
	    ]  
   },
    .........

同时加上插件的版本：

module.exports.metadata = 
// TOP OF METADATA
{
    "com.mobovip.mobile.plugin.toast": "1.0.0", 
     .........

5，代码调用

Toast.showShort('再点击一次退出!');

评论

1 楼 zijuan8023 2015-04-27  

我按照您的步骤添加插件 为什么卡在connecting to device不动了