基本的写法如下:
上面的代码中需要一个toast插件,这个是需要自己实现的,当然你可以使用纯JS写一个模仿android。
比如我提供一个现成的(PS:本人没有使用过,不知道有没有效果!)
我采用的是插件的形式:
1,用java写一个cordova插件(本人只会java,object-c不会,所以要在iphone上跑还需要用object-c写一个,这是使用插件不足的地方,不过可以网上搜一下,这种小插件基本可以搞定!)
2,在res/xml/config.xml文件中增加插件配置
3,在asserts/www/plugins/目录下实现自己插件的toast.js文件
4,添加toast插件js配置信息
在assets/www/cordova_plugins.js文件中添加如下信息:
同时加上插件的版本:
5,代码调用
- 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('再点击一次退出!');