文章标签 ‘phonegap’
20148 月28

Cordova:Toast浮动提示插件

第一步:编写插件类

package cn.xuetang.plugin;

import android.widget.Toast;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

/**
 * Created by Wizzer on 14-8-28.
 */
public class ToastPlugin extends CordovaPlugin {
    public ToastPlugin() {

    }

    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (this.cordova.getActivity().isFinishing()) return true;
        if (action.equals("show")) {
            this.show(args.getString(0));
        } else if (action.equals("showlong")) {
            this.showlong(args.getString(0));
        } else {
            return false;
        }
        callbackContext.success();
        return true;
    }

    public void show(String message) {
        Toast.makeText(this.cordova.getActivity(), Toast.LENGTH_SHORT).show();
    }

    public void showlong(String message) {
        Toast.makeText(this.cordova.getActivity(), message, Toast.LENGTH_LONG).show();
    }
}

 

第二步:配置  res/xml/config.xml

    <feature name="ToastPlugin">
        <param name="android-package" value="cn.xuetang.plugin.ToastPlugin" />
    </feature>

注:这里的 feature name ,要和↓↓面讲的的js文件里一致。

 

第三步:创建js文件 plugins/toast.js

/**
 * Created by Wizzer on 14-8-28.
 */
cordova.define("cn.xuetang.plugin.ToastPlugin", function(require, exports, module) {
    var exec = require('cordova/exec');
    module.exports = {

        /**
         * 一共5个参数
         第一个 :成功回调
         第二个 :失败回调
         第三个 :将要调用的类的配置名字(在config.xml中配置↑↑)
         第四个 :调用的方法名(一个类里可能有多个方法 靠这个参数区分)
         第五个 :传递的参数  以json的格式
         */
        show: function(message) {
            exec(null, null, "ToastPlugin", "show", [message]);
        },
        showlong: function(message) {
            exec(null, null, "ToastPlugin", "showlong", [message]);
        }
    };

});

注:js里两个方法,分别对应类中的两个方法

 

第四步:修改 cordova_plugins.js 引用 tocas.js

在 module.exports = [ ] 中追加如下代码:

    {
        "file": "plugins/toast.js",
        "id": "cn.xuetang.plugin.ToastPlugin",
        "merges": [
            "navigator.toast"
        ]
    }

 

最后:调用

       navigator.toast.show("再点击一次退出");

       navigator.toast.showlong("再点击一次退出");

 

 

 

20148 月28

Cordova:连续按两次返回键退出程序

/**
 * Created by Wizzer on 14-8-28.
 */
var num = 0;
var login = {
    initialize: function () {
        this.bindEvents();
    },
    bindEvents: function () {
        document.addEventListener('backbutton', this.eventBackButton, false);
    },
    eventBackButton: function () {
        num++;
        if (num > 1) {
            navigator.app.exitApp();
        }
        navigator.toast.show("再点击一次退出");
        // 3秒后重新计数
        var intervalID = window.setInterval(function() {
            num=0;
            window.clearInterval(intervalID);
        }, 3000);
    }
};

浮动提示插件见:
/?p=3026

20133 月8

Phonegap开发经验总结:Android与iOS应用开发的平滑移植

之前用phonegap做过Anroid项目,主要功能是人员定位、表单提交、拍照上传、通知提醒等功能,这也是最常用而基本的应用功能,最近打算出iOS版本的客户端,这里简单总结使用phonegap开发的一些经验以及探讨代码在不同手机系统的平移工作。

1、PhoneGap介绍

PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。这是PhoneGap最大的优点,支持jquery使其开发功能简单而强大。官方网站为 http://www.phonegap.com/ 更新速度较快,一般1个月就会发布一个新版本支持最新版本的手机系统。

既然要实现跨平台开发,大部分功能代码要做到可移植复用,在保持安全性、功能性的基础上尽量使用HTML+JS+PhoneGap API来实现业务功能,尽量避免使用手机系统的SDK开发实现。

UI层使用 Jquery Mobile ,API介绍见 http://www.jqmapi.com  ,定义了表单元素、页面和对话框等,和PhoneGap结合使用比较方便。

2、Android应用开发

2.1 数据库操作

PhoneGap API数据库操作是跨平台的,所以这里介绍后iOS段就不再赘述。

	var db ;
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        db = window.openDatabase("testdb", "1.0", "MyApp", 12000000);      
        db.transaction(creatDB,errorDB); //创建表    
		db.transaction(loginDB,errorDB); //查询表初始化表单    
    }	
    function creatDB(tx)
    { 
        tx.executeSql('CREATE TABLE IF NOT EXISTS USER (ID,LOGINNAME,PASSWORD)');  
    }
    function errorDB(err) {
       navigator.notification.alert("异常信息: "+err.code,null,"温馨提示","确定");
    }
    function loginDB(tx) {
	    tx.executeSql('SELECT * FROM USER', [], querySuccess, errorDB);  
    }
    function querySuccess(tx, results) {
        var len = results.rows.length;
        if(len>0)
        { 
            $("#loginname").val(results.rows.item(0).LOGINNAME);//LOGINNAME大写
            $("#password").val(results.rows.item(0).PASSWORD);   
        }
    }

2.2 表单提交

使用jquery+JSON解析和提交表单,常用示例:

	function getData(){
	    //{"mc":"Hello World!","list":[{"key":"0001","value":"张三"},{"key":"0002","value":"李四"}]}
		$.mobile.showPageLoadingMsg( "加载中....." ); //打开加载进度条	
		$.post(//使用jquery的POST方法  serverurl 放在公共JS里定义
				serverurl+ "/json/getdata.jsp",
				{
					"doAction":"getdata",
					"loginname":comHT.get("loginname"),//comHT 定义了从URL获取参数赋值到Hashtable中方法
					"password":hex_md5(comHT.get("password")),//hex_md5 实现对密码的加密
					"resourceid":"00100002",
					"rmd":Math.random()
				},
				function(data) {
					var jsondata = jQuery.parseJSON(data); //解析数据为JSON格式
                    $("#mc").val(jsondata.mc);//文本框赋值
					jQuery.each(jsondata.list, function(index, obj) {
						$("#czyy").append('<option value="'+obj.key+'">'+obj.value+'</option>');//下拉框架赋值  
					});
					$.mobile.hidePageLoadingMsg(); //关闭进度条

				});
	}

2.3 拍照上传

使用phonegap提供的API来使用,iOS下代码略有不同,注:此段代码phonegap 为2.0.0

原理是先把文件提交,提交成功后获得服务器真实路径,在表单提交的时候保存进数据库。

<img style="width:120px;height:120px;" id="zpzp1" src="../image/zpsc.png" onclick="pz(this,1)" /> 
<input type="hidden" id="zp1" value="">
    function pz(obj,v_zdz) {
		zdz=v_zdz;
		zpobj = obj;
		navigator.camera.getPicture(onSuccess, onFail, {
			quality : 25,
			destinationType : Camera.DestinationType.FILE_URI
		}); 
	}
 	// 采集操作成功完成后的回调函数
	function onSuccess(imageURI) {
		zpobj.src = imageURI;
		uploadFile(imageURI);
	}
	// 采集操作出错后的回调函数
	function onFail(error) {
	}
	// 上传文件到服务器
	function uploadFile(path) {
		    var ft = new FileTransfer();
		    var loginname=comHT.get("loginname");
            var options = new FileUploadOptions();
            var fn=loginname+"-"+path.substr(path.lastIndexOf('/')+1);
            options.fileKey="file";
            options.fileName=path.substr(path.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";
            options.chunkedMode = false; 
		    ft.upload(
				 path, 
				 serverurl+"/json/upload.jsp?fn="+fn,
			     function(result) {
					 var jsondata = jQuery.parseJSON(result.response);
					 $("#zp"+zdz).val(jsondata.path);
					 navigator.notification.alert("照片"+zdz+" "+decodeURI(jsondata.res),null,"温馨提示","确定");
		         }, 
		         function(error) {
		        	 navigator.notification.alert("照片"+zdz+" 上传失败!"+ error.code,null,"温馨提示","确定"); 
		         }, 
		         options
		    );
	}

2.4 人员定位

采用百度定位SDK,从用户表中读取用户标识,详细的开发过程过繁琐不写了(好吧,下班了。。),下载和查看百度定位SDK请访问

http://developer.baidu.com/map/geosdk-android-download.htm

2.5 通知提醒

使用androidpn来实现android下消息推送功能,嗯,这个网上教程比较多,大家搜一下吧。

 

3、iOS应用开发

首先搭建iOS开发环境,详见本站教程 /?p=2438 ,目前phonegap 2.5.0支持iOS6.0以下版本,iOS6.1暂时不支持要等phonegap新版咯。

拍照功能需要真机测试,而真机测试需要证书,这大大的头疼,还好找到了方法,就是找到了一篇《Xcode 4.5.2 + iOS 6.0免证书(iDP)开发+真机调试+生成IPA全攻略》文章,哇哈哈,iOS6.1也适应。文章地址 http://www.cnblogs.com/yuanxiaoping_21cn_com/archive/2012/11/15/2772388.html

 

3.1 数据库操作

同android,略。

3.2 表单提交

同android,略。

3.3 拍照上传

在研究,以后更新。

3.4 人员定位

在研究,以后更新。

3.5 通知提醒

在研究,以后更新。