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('再点击一次退出!');
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值