51CTO首页
AI.x社区
博客
学堂
精品班
直播训练营
企业培训
鸿蒙开发者社区
WOT技术大会
AIGC创新中国行
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术2024年软考PMP项目管理软考资讯
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO题库小程序
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
账号设置 退出

PhoneGap:移动APP之跨平台解决方案

作者：润物无声的博客
移动开发
最近看了一本书《Building Android Apps with HTML CSS and JavaScript》，顾名思义就是用开发web的方式来开发Android的APP，其中倒不是web的开发技术最吸我，而是这样的一种解决方案。像 我们现在的手持设备种类这么多，主流的不外乎Android，Iphone，Ipad等等，如果要对每一种平台都开发一个相应的APP版本，代价太大。而 基于浏览器的web app就容易解决这个问题，只需开发一次，便可以通用部署。

上面即是使用web技术来开发本地iphone app的一幅运行图，关于web的开发技术，这里就不多说了，这里重点提及Phonegap,利用它我们就可以把web app转换成各种移动平台的APP。

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript

这里简单介绍一下PhoneGap，它对各个移动平台的API进行了一次封装，屏蔽了每种移动平台的具体细节，而设计了一个公共的API层，对开发者来说，只要调用统一的API来进行开发就可以了。

把PhoneGap的源代码下载来通读了一下，了解了一下背后的实现原理，下面以Camera的功能为例来进行说明。

API 开发文档请参照 http://docs.phonegap.com/en/1.1.0/index.html，其中有关Camera的开发API请参照http://docs.phonegap.com/en/1.1.0/phonegap_camera_camera.md.html#Camera，我们的代码就可以写成

  1. navigator.camera.getPicture(onSuccess, onFail, { quality: 50 }); 
  2. function onSuccess(imageData) {     
  3.   var image = document.getElementById('myImage');     
  4.   image.src = "data:image/jpeg;base64," + imageData; 
  5. } 
  6. function onFail(message) {     
  7.   alert('Failed because: ' + message); 
  8. } 

是不是很简单，具体后台平台的差异我们根本不需要来进行区别，全部由PhoneGap来给处理了，那么它是怎么处理的呢，继续往下看。

先来看看JS端的API实现，它主要是定义了web层开发的接口，也即我们上面例子中的camera.getPicture 函数

  1. /** 
  2.  * Gets a picture from source defined by "options.sourceType", and returns the 
  3.  * image as defined by the "options.destinationType" option. 
  4.  
  5.  * The defaults are sourceType=CAMERA and destinationType=DATA_URL. 
  6.  * 
  7.  * @param {Function} successCallback 
  8.  * @param {Function} errorCallback 
  9.  * @param {Object} options 
  10.  */ 
  11. Camera.prototype.getPicture = function(successCallback, errorCallback, options) { 
  12.  
  13.     // successCallback required 
  14.     if (typeof successCallback !== "function") { 
  15.         console.log("Camera Error: successCallback is not a function"); 
  16.         return; 
  17.     } 
  18.  
  19.     // errorCallback optional 
  20.     if (errorCallback && (typeof errorCallback !== "function")) { 
  21.         console.log("Camera Error: errorCallback is not a function"); 
  22.         return; 
  23.     } 
  24.  
  25.     if (options === null || typeof options === "undefined") { 
  26.         options = {}; 
  27.     } 
  28.     if (options.quality === null || typeof options.quality === "undefined") { 
  29.         options.quality = 80; 
  30.     } 
  31.     if (options.maxResolution === null || typeof options.maxResolution === "undefined") { 
  32.         options.maxResolution = 0; 
  33.     } 
  34.     if (options.destinationType === null || typeof options.destinationType === "undefined") { 
  35.         options.destinationType = Camera.DestinationType.DATA_URL; 
  36.     } 
  37.     if (options.sourceType === null || typeof options.sourceType === "undefined") { 
  38.         options.sourceType = Camera.PictureSourceType.CAMERA; 
  39.     } 
  40.     if (options.encodingType === null || typeof options.encodingType === "undefined") { 
  41.         options.encodingType = Camera.EncodingType.JPEG; 
  42.     } 
  43.     if (options.mediaType === null || typeof options.mediaType === "undefined") { 
  44.         options.mediaType = Camera.MediaType.PICTURE; 
  45.     } 
  46.     if (options.targetWidth === null || typeof options.targetWidth === "undefined") { 
  47.         options.targetWidth = -1; 
  48.     } 
  49.     else if (typeof options.targetWidth == "string") { 
  50.         var width = new Number(options.targetWidth); 
  51.         if (isNaN(width) === false) { 
  52.             options.targetWidth = width.valueOf(); 
  53.         } 
  54.     } 
  55.     if (options.targetHeight === null || typeof options.targetHeight === "undefined") { 
  56.         options.targetHeight = -1; 
  57.     } 
  58.     else if (typeof options.targetHeight == "string") { 
  59.         var height = new Number(options.targetHeight); 
  60.         if (isNaN(height) === false) { 
  61.             options.targetHeight = height.valueOf(); 
  62.         } 
  63.     } 
  64.  
  65.     PhoneGap.exec(successCallback, errorCallback, "Camera", "takePicture", [options]); 
  66. }; 
  67.  
  68. 上段代码中的最后一句就是呼叫本地的Camera模块的takePicture函数，具体的PhoneGap.exec实现代码如下： 
  69.  
  70. /** 
  71.  * Execute a PhoneGap command.  It is up to the native side whether this action is synch or async. 
  72.  * The native side can return: 
  73.  *      Synchronous: PluginResult object as a JSON string 
  74.  *      Asynchrounous: Empty string "" 
  75.  * If async, the native side will PhoneGap.callbackSuccess or PhoneGap.callbackError, 
  76.  * depending upon the result of the action. 
  77.  * 
  78.  * @param {Function} success    The success callback 
  79.  * @param {Function} fail       The fail callback 
  80.  * @param {String} service      The name of the service to use 
  81.  * @param {String} action       Action to be run in PhoneGap 
  82.  * @param {Array.<String>} [args]     Zero or more arguments to pass to the method 
  83.  */ 
  84. PhoneGap.exec = function(success, fail, service, action, args) { 
  85.     try { 
  86.         var callbackId = service + PhoneGap.callbackId++; 
  87.         if (success || fail) { 
  88.             PhoneGap.callbacks[callbackId] = {success:success, fail:fail}; 
  89.         } 
  90.  
  91.         var r = prompt(PhoneGap.stringify(args), "gap:"+PhoneGap.stringify([service, action, callbackId, true])); 
  92.  
  93.         // If a result was returned 
  94.         if (r.length > 0) { 
  95.             eval("var v="+r+";"); 
  96.  
  97.             // If status is OK, then return value back to caller 
  98.             if (v.status === PhoneGap.callbackStatus.OK) { 
  99.  
  100.                 // If there is a success callback, then call it now with 
  101.                 // returned value 
  102.                 if (success) { 
  103.                     try { 
  104.                         success(v.message); 
  105.                     } catch (e) { 
  106.                         console.log("Error in success callback: " + callbackId  + " = " + e); 
  107.                     } 
  108.  
  109.                     // Clear callback if not expecting any more results 
  110.                     if (!v.keepCallback) { 
  111.                         delete PhoneGap.callbacks[callbackId]; 
  112.                     } 
  113.                 } 
  114.                 return v.message; 
  115.             } 
  116.  
  117.             // If no result 
  118.             else if (v.status === PhoneGap.callbackStatus.NO_RESULT) { 
  119.  
  120.                 // Clear callback if not expecting any more results 
  121.                 if (!v.keepCallback) { 
  122.                     delete PhoneGap.callbacks[callbackId]; 
  123.                 } 
  124.             } 
  125.  
  126.             // If error, then display error 
  127.             else { 
  128.                 console.log("Error: Status="+v.status+" Message="+v.message); 
  129.  
  130.                 // If there is a fail callback, then call it now with returned value 
  131.                 if (fail) { 
  132.                     try { 
  133.                         fail(v.message); 
  134.                     } 
  135.                     catch (e1) { 
  136.                         console.log("Error in error callback: "+callbackId+" = "+e1); 
  137.                     } 
  138.  
  139.                     // Clear callback if not expecting any more results 
  140.                     if (!v.keepCallback) { 
  141.                         delete PhoneGap.callbacks[callbackId]; 
  142.                     } 
  143.                 } 
  144.                 return null; 
  145.             } 
  146.         } 
  147.     } catch (e2) { 
  148.         console.log("Error: "+e2); 
  149.     } 
  150. }; 

至此为止，web端js的代码工作就完毕了，程序流程转移到了本地代码中，我们以Android的本地代码为例，看看是怎么具体实现的。

  1. package com.phonegap; 
  2.  
  3. import android.content.ContentResolver; 
  4. import android.content.ContentValues; 
  5. import android.content.Intent; 
  6. import android.database.Cursor; 
  7. import android.graphics.Bitmap; 
  8. import android.graphics.Bitmap.CompressFormat; 
  9. import android.graphics.BitmapFactory; 
  10. import android.net.Uri; 
  11. import android.provider.MediaStore.Images.Media; 
  12. import com.phonegap.api.PhonegapActivity; 
  13. import com.phonegap.api.Plugin; 
  14. import com.phonegap.api.PluginResult; 
  15. import com.phonegap.api.PluginResult.Status; 
  16. import java.io.ByteArrayOutputStream; 
  17. import java.io.File; 
  18. import java.io.FileNotFoundException; 
  19. import java.io.FileOutputStream; 
  20. import java.io.IOException; 
  21. import java.io.OutputStream; 
  22. import java.io.PrintStream; 
  23. import org.apache.commons.codec.binary.Base64; 
  24. import org.json.JSONArray; 
  25. import org.json.JSONException; 
  26. import org.json.JSONObject; 
  27.  
  28. public class CameraLauncher extends Plugin 
  29. { 
  30.   private static final int DATA_URL = 0; 
  31.   private static final int FILE_URI = 1; 
  32.   private static final int PHOTOLIBRARY = 0; 
  33.   private static final int CAMERA = 1; 
  34.   private static final int SAVEDPHOTOALBUM = 2; 
  35.   private static final int PICTURE = 0; 
  36.   private static final int VIDEO = 1; 
  37.   private static final int ALLMEDIA = 2; 
  38.   private static final int JPEG = 0; 
  39.   private static final int PNG = 1; 
  40.   private static final String GET_PICTURE = "Get Picture"; 
  41.   private static final String GET_VIDEO = "Get Video"; 
  42.   private static final String GET_All = "Get All"; 
  43.   private static final String LOG_TAG = "CameraLauncher"; 
  44.   private int mQuality; 
  45.   private int targetWidth; 
  46.   private int targetHeight; 
  47.   private Uri imageUri; 
  48.   private int encodingType; 
  49.   private int mediaType; 
  50.   public String callbackId; 
  51.   private int numPics; 
  52.  
  53.   public PluginResult execute(String action, JSONArray args, String callbackId) 
  54.   { 
  55.     PluginResult.Status status = PluginResult.Status.OK; 
  56.     String result = ""; 
  57.     this.callbackId = callbackId; 
  58.     try 
  59.     { 
  60.       if (action.equals("takePicture")) { 
  61.         int srcType = 1; 
  62.         int destType = 0; 
  63.         this.targetHeight = 0; 
  64.         this.targetWidth = 0; 
  65.         this.encodingType = 0; 
  66.         this.mediaType = 0; 
  67.         this.mQuality = 80; 
  68.  
  69.         JSONObject options = args.optJSONObject(0); 
  70.         if (options != null) { 
  71.           srcType = options.getInt("sourceType"); 
  72.           destType = options.getInt("destinationType"); 
  73.           this.targetHeight = options.getInt("targetHeight"); 
  74.           this.targetWidth = options.getInt("targetWidth"); 
  75.           this.encodingType = options.getInt("encodingType"); 
  76.           this.mediaType = options.getInt("mediaType"); 
  77.           this.mQuality = options.getInt("quality"); 
  78.         } 
  79.  
  80.         if (srcType == 1) { 
  81.           takePicture(destType, this.encodingType); 
  82.         } 
  83.         else if ((srcType == 0) || (srcType == 2)) { 
  84.           getImage(srcType, destType); 
  85.         } 
  86.         PluginResult r = new PluginResult(PluginResult.Status.NO_RESULT); 
  87.         r.setKeepCallback(true); 
  88.         return r; 
  89.       } 
  90.       return new PluginResult(status, result); 
  91.     } catch (JSONException e) { 
  92.       e.printStackTrace(); 
  93.     }return new PluginResult(PluginResult.Status.JSON_EXCEPTION); 
  94.   } 
  95.  
  96.   public void takePicture(int returnType, int encodingType) 
  97.   { 
  98.     this.numPics = queryImgDB().getCount(); 
  99.  
  100.     Intent intent = new Intent("android.media.action.IMAGE_CAPTURE"); 
  101.  
  102.     File photo = createCaptureFile(encodingType); 
  103.     intent.putExtra("output", Uri.fromFile(photo)); 
  104.     this.imageUri = Uri.fromFile(photo); 
  105.  
  106.     this.ctx.startActivityForResult(this, intent, 32 + returnType + 1); 
  107.   } 
  108.  
  109.   private File createCaptureFile(int encodingType) 
  110.   { 
  111.     File photo = null; 
  112.     if (encodingType == 0) 
  113.       photo = new File(DirectoryManager.getTempDirectoryPath(this.ctx), "Pic.jpg"); 
  114.     else { 
  115.       photo = new File(DirectoryManager.getTempDirectoryPath(this.ctx), "Pic.png"); 
  116.     } 
  117.     return photo; 
  118.   } 
  119.  
  120.   public void getImage(int srcType, int returnType) 
  121.   { 
  122.     Intent intent = new Intent(); 
  123.     String title = "Get Picture"; 
  124.     if (this.mediaType == 0) { 
  125.       intent.setType("image/*"); 
  126.     } 
  127.     else if (this.mediaType == 1) { 
  128.       intent.setType("video/*"); 
  129.       title = "Get Video"; 
  130.     } 
  131.     else if (this.mediaType == 2) 
  132.     { 
  133.       intent.setType("*/*"); 
  134.       title = "Get All"; 
  135.     } 
  136.  
  137.     intent.setAction("android.intent.action.GET_CONTENT"); 
  138.     intent.addCategory("android.intent.category.OPENABLE"); 
  139.     this.ctx.startActivityForResult(this, Intent.createChooser(intent, new String(title)), (srcType + 1) * 16 + returnType + 1); 
  140.   } 
  141.  
  142.   public Bitmap scaleBitmap(Bitmap bitmap) 
  143.   { 
  144.     int newWidth = this.targetWidth; 
  145.     int newHeight = this.targetHeight; 
  146.     int origWidth = bitmap.getWidth(); 
  147.     int origHeight = bitmap.getHeight(); 
  148.  
  149.     if ((newWidth <= 0) && (newHeight <= 0)) { 
  150.       return bitmap; 
  151.     } 
  152.  
  153.     if ((newWidth > 0) && (newHeight <= 0)) { 
  154.       newHeight = newWidth * origHeight / origWidth; 
  155.     } 
  156.     else if ((newWidth <= 0) && (newHeight > 0)) { 
  157.       newWidth = newHeight * origWidth / origHeight; 
  158.     } 
  159.     else 
  160.     { 
  161.       double newRatio = newWidth / newHeight; 
  162.       double origRatio = origWidth / origHeight; 
  163.  
  164.       if (origRatio > newRatio) 
  165.         newHeight = newWidth * origHeight / origWidth; 
  166.       else if (origRatio < newRatio) { 
  167.         newWidth = newHeight * origWidth / origHeight; 
  168.       } 
  169.     } 
  170.  
  171.     return Bitmap.createScaledBitmap(bitmap, newWidth, newHeight, true); 
  172.   } 
  173.  
  174.   public void onActivityResult(int requestCode, int resultCode, Intent intent) 
  175.   { 
  176.     int srcType = requestCode / 16 - 1; 
  177.     int destType = requestCode % 16 - 1; 
  178.  
  179.     if (srcType == 1) 
  180.     { 
  181.       if (resultCode == -1) { 
  182.         try 
  183.         { 
  184.           ExifHelper exif = new ExifHelper(); 
  185.           if (this.encodingType == 0) { 
  186.             exif.createInFile(DirectoryManager.getTempDirectoryPath(this.ctx) + "/Pic.jpg"); 
  187.             exif.readExifData(); 
  188.           } 
  189.  
  190.           try 
  191.           { 
  192.             bitmap = MediaStore.Images.Media.getBitmap(this.ctx.getContentResolver(), this.imageUri); 
  193.           } catch (FileNotFoundException e) { 
  194.             Uri uri = intent.getData(); 
  195.             ContentResolver resolver = this.ctx.getContentResolver(); 
  196.             bitmap = BitmapFactory.decodeStream(resolver.openInputStream(uri)); 
  197.           } 
  198.  
  199.           Bitmap bitmap = scaleBitmap(bitmap); 
  200.  
  201.           if (destType == 0) { 
  202.             processPicture(bitmap); 
  203.             checkForDuplicateImage(0); 
  204.           } 
  205.           else if (destType == 1) 
  206.           { 
  207.             ContentValues values = new ContentValues(); 
  208.             values.put("mime_type", "image/jpeg"); 
  209.             Uri uri = null; 
  210.             try { 
  211.               uri = this.ctx.getContentResolver().insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, values); 
  212.             } catch (UnsupportedOperationException e) { 
  213.               System.out.println("Can't write to external media storage."); 
  214.               try { 
  215.                 uri = this.ctx.getContentResolver().insert(MediaStore.Images.Media.INTERNAL_CONTENT_URI, values); 
  216.               } catch (UnsupportedOperationException ex) { 
  217.                 System.out.println("Can't write to internal media storage."); 
  218.                 failPicture("Error capturing image - no media storage found."); 
  219.                 return; 
  220.               } 
  221.  
  222.             } 
  223.  
  224.             OutputStream os = this.ctx.getContentResolver().openOutputStream(uri); 
  225.             bitmap.compress(Bitmap.CompressFormat.JPEG, this.mQuality, os); 
  226.             os.close(); 
  227.  
  228.             if (this.encodingType == 0) { 
  229.               exif.createOutFile(FileUtils.getRealPathFromURI(uri, this.ctx)); 
  230.               exif.writeExifData(); 
  231.             } 
  232.  
  233.             success(new PluginResult(PluginResult.Status.OK, uri.toString()), this.callbackId); 
  234.           } 
  235.           bitmap.recycle(); 
  236.           bitmap = null; 
  237.           System.gc(); 
  238.  
  239.           checkForDuplicateImage(1); 
  240.         } catch (IOException e) { 
  241.           e.printStackTrace(); 
  242.           failPicture("Error capturing image."); 
  243.         } 
  244.  
  245.       } 
  246.       else if (resultCode == 0) { 
  247.         failPicture("Camera cancelled."); 
  248.       } 
  249.       else 
  250.       { 
  251.         failPicture("Did not complete!"); 
  252.       } 
  253.  
  254.     } 
  255.     else if ((srcType == 0) || (srcType == 2)) 
  256.       if (resultCode == -1) { 
  257.         Uri uri = intent.getData(); 
  258.         ContentResolver resolver = this.ctx.getContentResolver(); 
  259.  
  260.         if (this.mediaType != 0) { 
  261.           success(new PluginResult(PluginResult.Status.OK, uri.toString()), this.callbackId); 
  262.         } 
  263.         else if (destType == 0) { 
  264.           try { 
  265.             Bitmap bitmap = BitmapFactory.decodeStream(resolver.openInputStream(uri)); 
  266.             bitmap = scaleBitmap(bitmap); 
  267.             processPicture(bitmap); 
  268.             bitmap.recycle(); 
  269.             bitmap = null; 
  270.             System.gc(); 
  271.           } catch (FileNotFoundException e) { 
  272.             e.printStackTrace(); 
  273.             failPicture("Error retrieving image."); 
  274.           } 
  275.  
  276.         } 
  277.         else if (destType == 1) 
  278.         { 
  279.           if ((this.targetHeight > 0) && (this.targetWidth > 0)) { 
  280.             try { 
  281.               Bitmap bitmap = BitmapFactory.decodeStream(resolver.openInputStream(uri)); 
  282.               bitmap = scaleBitmap(bitmap); 
  283.  
  284.               String fileName = DirectoryManager.getTempDirectoryPath(this.ctx) + "/resize.jpg"; 
  285.               OutputStream os = new FileOutputStream(fileName); 
  286.               bitmap.compress(Bitmap.CompressFormat.JPEG, this.mQuality, os); 
  287.               os.close(); 
  288.  
  289.               bitmap.recycle(); 
  290.               bitmap = null; 
  291.  
  292.               success(new PluginResult(PluginResult.Status.OK, "file://" + fileName), this.callbackId); 
  293.               System.gc(); 
  294.             } catch (Exception e) { 
  295.               e.printStackTrace(); 
  296.               failPicture("Error retrieving image."); 
  297.             } 
  298.           } 
  299.           else { 
  300.             success(new PluginResult(PluginResult.Status.OK, uri.toString()), this.callbackId); 
  301.           } 
  302.         } 
  303.  
  304.       } 
  305.       else if (resultCode == 0) { 
  306.         failPicture("Selection cancelled."); 
  307.       } 
  308.       else { 
  309.         failPicture("Selection did not complete!"); 
  310.       } 
  311.   } 
  312.  
  313.   private Cursor queryImgDB() 
  314.   { 
  315.     return this.ctx.getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, new String[] { "_id" }, null, null, null); 
  316.   } 
  317.  
  318.   private void checkForDuplicateImage(int type) 
  319.   { 
  320.     int diff = 1; 
  321.     Cursor cursor = queryImgDB(); 
  322.     int currentNumOfImages = cursor.getCount(); 
  323.  
  324.     if (type == 1) { 
  325.       diff = 2; 
  326.     } 
  327.  
  328.     if (currentNumOfImages - this.numPics == diff) { 
  329.       cursor.moveToLast(); 
  330.       int id = Integer.valueOf(cursor.getString(cursor.getColumnIndex("_id"))).intValue() - 1; 
  331.       Uri uri = Uri.parse(MediaStore.Images.Media.EXTERNAL_CONTENT_URI + "/" + id); 
  332.       this.ctx.getContentResolver().delete(uri, null, null); 
  333.     } 
  334.   } 
  335.  
  336.   public void processPicture(Bitmap bitmap) 
  337.   { 
  338.     ByteArrayOutputStream jpeg_data = new ByteArrayOutputStream(); 
  339.     try { 
  340.       if (bitmap.compress(Bitmap.CompressFormat.JPEG, this.mQuality, jpeg_data)) { 
  341.         byte[] code = jpeg_data.toByteArray(); 
  342.         byte[] output = Base64.encodeBase64(code); 
  343.         String js_out = new String(output); 
  344.         success(new PluginResult(PluginResult.Status.OK, js_out), this.callbackId); 
  345.         js_out = null; 
  346.         output = null; 
  347.         code = null; 
  348.       } 
  349.     } 
  350.     catch (Exception e) { 
  351.       failPicture("Error compressing image."); 
  352.     } 
  353.     jpeg_data = null; 
  354.   } 
  355.  
  356.   public void failPicture(String err) 
  357.   { 
  358.     error(new PluginResult(PluginResult.Status.ERROR, err), this.callbackId); 
  359.   } 
  360. } 

可以看到Camera本身被设计一个插件的形式，实现了具体的takePicture函数，至于具体的js端代码和Android本地端代码的通信 是怎么样建立起来的，也即js代码怎么和Android的Activity的代码进行数据的交互，那么下面的代码会给你答案了。

  1. public class GapViewClient extends WebViewClient 
  2.   { 
  3.     DroidGap ctx; 
  4.  
  5.     public GapViewClient(DroidGap ctx) 
  6.     { 
  7.       this.ctx = ctx; 
  8.     } 
  9.  
  10.     public boolean shouldOverrideUrlLoading(WebView view, String url) 
  11.     { 
  12.       if (!this.ctx.pluginManager.onOverrideUrlLoading(url)) 
  13.       { 
  14.         if (url.startsWith("tel:")) { 
  15.           try { 
  16.             Intent intent = new Intent("android.intent.action.DIAL"); 
  17.             intent.setData(Uri.parse(url)); 
  18.             DroidGap.this.startActivity(intent); 
  19.           } catch (ActivityNotFoundException e) { 
  20.             System.out.println("Error dialing " + url + ": " + e.toString()); 
  21.           } 
  22.  
  23.         } 
  24.         else if (url.startsWith("geo:")) { 
  25.           try { 
  26.             Intent intent = new Intent("android.intent.action.VIEW"); 
  27.             intent.setData(Uri.parse(url)); 
  28.             DroidGap.this.startActivity(intent); 
  29.           } catch (ActivityNotFoundException e) { 
  30.             System.out.println("Error showing map " + url + ": " + e.toString()); 
  31.           } 
  32.  
  33.         } 
  34.         else if (url.startsWith("mailto:")) { 
  35.           try { 
  36.             Intent intent = new Intent("android.intent.action.VIEW"); 
  37.             intent.setData(Uri.parse(url)); 
  38.             DroidGap.this.startActivity(intent); 
  39.           } catch (ActivityNotFoundException e) { 
  40.             System.out.println("Error sending email " + url + ": " + e.toString()); 
  41.           } 
  42.  
  43.         } 
  44.         else if (url.startsWith("sms:")) { 
  45.           try { 
  46.             Intent intent = new Intent("android.intent.action.VIEW"); 
  47.  
  48.             String address = null; 
  49.             int parmIndex = url.indexOf('?'); 
  50.             if (parmIndex == -1) { 
  51.               address = url.substring(4); 
  52.             } 
  53.             else { 
  54.               address = url.substring(4, parmIndex); 
  55.  
  56.               Uri uri = Uri.parse(url); 
  57.               String query = uri.getQuery(); 
  58.               if ((query != null) && 
  59.                 (query.startsWith("body="))) { 
  60.                 intent.putExtra("sms_body", query.substring(5)); 
  61.               } 
  62.             } 
  63.  
  64.             intent.setData(Uri.parse("sms:" + address)); 
  65.             intent.putExtra("address", address); 
  66.             intent.setType("vnd.android-dir/mms-sms"); 
  67.             DroidGap.this.startActivity(intent); 
  68.           } catch (ActivityNotFoundException e) { 
  69.             System.out.println("Error sending sms " + url + ":" + e.toString()); 
  70.           } 
  71.  
  72.         } 
  73.         else if ((this.ctx.loadInWebView) || (url.startsWith("file://")) || (url.indexOf(this.ctx.baseUrl) == 0) || (DroidGap.this.isUrlWhiteListed(url) != 0)) { 
  74.           try 
  75.           { 
  76.             HashMap params = new HashMap(); 
  77.             this.ctx.showWebPage(url, true, false, params); 
  78.           } catch (ActivityNotFoundException e) { 
  79.             System.out.println("Error loading url into DroidGap - " + url + ":" + e.toString()); 
  80.           } 
  81.  
  82.         } 
  83.         else { 
  84.           try 
  85.           { 
  86.             Intent intent = new Intent("android.intent.action.VIEW"); 
  87.             intent.setData(Uri.parse(url)); 
  88.             DroidGap.this.startActivity(intent); 
  89.           } catch (ActivityNotFoundException e) { 
  90.             System.out.println("Error loading url " + url + ":" + e.toString()); 
  91.           } 
  92.         } 
  93.       } 
  94.       return true; 
  95.     } 
  96.  
  97.     public void onPageFinished(WebView view, String url) 
  98.     { 
  99.       super.onPageFinished(view, url); 
  100.  
  101.       DroidGap.access$208(this.ctx); 
  102.  
  103.       if (!url.equals("about:blank")) { 
  104.         DroidGap.this.appView.loadUrl("javascript:try{ PhoneGap.onNativeReady.fire();}catch(e){_nativeReady = true;}"); 
  105.       } 
  106.  
  107.       Thread t = new Thread(new Runnable() { 
  108.         public void run() { 
  109.           try { 
  110.             Thread.sleep(2000L); 
  111.             DroidGap.GapViewClient.this.ctx.runOnUiThread(new Runnable() { 
  112.               public void run() { 
  113.                 DroidGap.this.appView.setVisibility(0); 
  114.                 DroidGap.GapViewClient.this.ctx.spinnerStop(); 
  115.               } 
  116.             }); 
  117.           } 
  118.           catch (InterruptedException e) 
  119.           { 
  120.           } 
  121.         } 
  122.       }); 
  123.       t.start(); 
  124.  
  125.       if (this.ctx.clearHistory) { 
  126.         this.ctx.clearHistory = false; 
  127.         this.ctx.appView.clearHistory(); 
  128.       } 
  129.  
  130.       if (url.equals("about:blank")) { 
  131.         if (this.ctx.callbackServer != null) { 
  132.           this.ctx.callbackServer.destroy(); 
  133.         } 
  134.         this.ctx.finish(); 
  135.       } 
  136.     } 
  137.  
  138.     public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) 
  139.     { 
  140.       System.out.println("onReceivedError: Error code=" + errorCode + " Description=" + description + " URL=" + failingUrl); 
  141.  
  142.       DroidGap.access$208(this.ctx); 
  143.  
  144.       this.ctx.spinnerStop(); 
  145.  
  146.       this.ctx.onReceivedError(errorCode, description, failingUrl); 
  147.     } 
  148.  
  149.     public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) 
  150.     { 
  151.       String packageName = this.ctx.getPackageName(); 
  152.       PackageManager pm = this.ctx.getPackageManager(); 
  153.       try 
  154.       { 
  155.         ApplicationInfo appInfo = pm.getApplicationInfo(packageName, 128); 
  156.         if ((appInfo.flags & 0x2) != 0) 
  157.         { 
  158.           handler.proceed(); 
  159.           return; 
  160.         } 
  161.  
  162.         super.onReceivedSslError(view, handler, error); 
  163.       } 
  164.       catch (PackageManager.NameNotFoundException e) 
  165.       { 
  166.         super.onReceivedSslError(view, handler, error); 
  167.       } 
  168.     } 
  169.   } 
  170.  
  171.   public class GapClient extends WebChromeClient 
  172.   { 
  173.     private String TAG = "PhoneGapLog"; 
  174.     private long MAX_QUOTA = 104857600L; 
  175.     private DroidGap ctx; 
  176.  
  177.     public GapClient(Context ctx) 
  178.     { 
  179.       this.ctx = ((DroidGap)ctx); 
  180.     } 
  181.  
  182.     public boolean onJsAlert(WebView view, String url, String message, JsResult result) 
  183.     { 
  184.       AlertDialog.Builder dlg = new AlertDialog.Builder(this.ctx); 
  185.       dlg.setMessage(message); 
  186.       dlg.setTitle("Alert"); 
  187.       dlg.setCancelable(false); 
  188.       dlg.setPositiveButton(17039370, new DialogInterface.OnClickListener(result) 
  189.       { 
  190.         public void onClick(DialogInterface dialog, int which) { 
  191.           this.val$result.confirm(); 
  192.         } 
  193.       }); 
  194.       dlg.create(); 
  195.       dlg.show(); 
  196.       return true; 
  197.     } 
  198.  
  199.     public boolean onJsConfirm(WebView view, String url, String message, JsResult result) 
  200.     { 
  201.       AlertDialog.Builder dlg = new AlertDialog.Builder(this.ctx); 
  202.       dlg.setMessage(message); 
  203.       dlg.setTitle("Confirm"); 
  204.       dlg.setCancelable(false); 
  205.       dlg.setPositiveButton(17039370, new DialogInterface.OnClickListener(result) 
  206.       { 
  207.         public void onClick(DialogInterface dialog, int which) { 
  208.           this.val$result.confirm(); 
  209.         } 
  210.       }); 
  211.       dlg.setNegativeButton(17039360, new DialogInterface.OnClickListener(result) 
  212.       { 
  213.         public void onClick(DialogInterface dialog, int which) { 
  214.           this.val$result.cancel(); 
  215.         } 
  216.       }); 
  217.       dlg.create(); 
  218.       dlg.show(); 
  219.       return true; 
  220.     } 
  221.  
  222.     public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) 
  223.     { 
  224.       boolean reqOk = false; 
  225.       if ((url.indexOf(this.ctx.baseUrl) == 0) || (DroidGap.this.isUrlWhiteListed(url) != 0)) { 
  226.         reqOk = true; 
  227.       } 
  228.  
  229.       if ((reqOk) && (defaultValue != null) && (defaultValue.length() > 3) && (defaultValue.substring(0, 4).equals("gap:"))) 
  230.       { 
  231.         try { 
  232.           JSONArray array = new JSONArray(defaultValue.substring(4)); 
  233.           String service = array.getString(0); 
  234.           String action = array.getString(1); 
  235.           String callbackId = array.getString(2); 
  236.           boolean async = array.getBoolean(3); 
  237.           String r = DroidGap.this.pluginManager.exec(service, action, callbackId, message, async); 
  238.           result.confirm(r); 
  239.         } catch (JSONException e) { 
  240.           e.printStackTrace(); 
  241.         } 
  242.  
  243.       } 
  244.       else if ((reqOk) && (defaultValue != null) && (defaultValue.equals("gap_poll:"))) { 
  245.         String r = DroidGap.this.callbackServer.getJavascript(); 
  246.         result.confirm(r); 
  247.       } 
  248.       else if ((reqOk) && (defaultValue != null) && (defaultValue.equals("gap_callbackServer:"))) { 
  249.         String r = ""; 
  250.         if (message.equals("usePolling")) { 
  251.           r = "" + DroidGap.this.callbackServer.usePolling(); 
  252.         } 
  253.         else if (message.equals("restartServer")) { 
  254.           DroidGap.this.callbackServer.restartServer(); 
  255.         } 
  256.         else if (message.equals("getPort")) { 
  257.           r = Integer.toString(DroidGap.this.callbackServer.getPort()); 
  258.         } 
  259.         else if (message.equals("getToken")) { 
  260.           r = DroidGap.this.callbackServer.getToken(); 
  261.         } 
  262.         result.confirm(r); 
  263.       } 
  264.       else if ((reqOk) && (defaultValue != null) && (defaultValue.equals("gap_init:"))) { 
  265.         DroidGap.this.appView.setVisibility(0); 
  266.         this.ctx.spinnerStop(); 
  267.         result.confirm("OK"); 
  268.       } 
  269.       else 
  270.       { 
  271.         JsPromptResult res = result; 
  272.         AlertDialog.Builder dlg = new AlertDialog.Builder(this.ctx); 
  273.         dlg.setMessage(message); 
  274.         EditText input = new EditText(this.ctx); 
  275.         if (defaultValue != null) { 
  276.           input.setText(defaultValue); 
  277.         } 
  278.         dlg.setView(input); 
  279.         dlg.setCancelable(false); 
  280.         dlg.setPositiveButton(17039370, new DialogInterface.OnClickListener(input, res) 
  281.         { 
  282.           public void onClick(DialogInterface dialog, int which) { 
  283.             String usertext = this.val$input.getText().toString(); 
  284.             this.val$res.confirm(usertext); 
  285.           } 
  286.         }); 
  287.         dlg.setNegativeButton(17039360, new DialogInterface.OnClickListener(res) 
  288.         { 
  289.           public void onClick(DialogInterface dialog, int which) { 
  290.             this.val$res.cancel(); 
  291.           } 
  292.         }); 
  293.         dlg.create(); 
  294.         dlg.show(); 
  295.       } 
  296.       return true; 
  297.     } 
  298.  
  299.     public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) 
  300.     { 
  301.       Log.d(this.TAG, "event raised onExceededDatabaseQuota estimatedSize: " + Long.toString(estimatedSize) + " currentQuota: " + Long.toString(currentQuota) + " totalUsedQuota: " + Long.toString(totalUsedQuota)); 
  302.  
  303.       if (estimatedSize < this.MAX_QUOTA) 
  304.       { 
  305.         long newQuota = estimatedSize; 
  306.         Log.d(this.TAG, "calling quotaUpdater.updateQuota newQuota: " + Long.toString(newQuota)); 
  307.         quotaUpdater.updateQuota(newQuota); 
  308.       } 
  309.       else 
  310.       { 
  311.         quotaUpdater.updateQuota(currentQuota); 
  312.       } 
  313.     } 
  314.  
  315.     public void onConsoleMessage(String message, int lineNumber, String sourceID) 
  316.     { 
  317.       Log.d(this.TAG, sourceID + ": Line " + Integer.toString(lineNumber) + " : " + message); 
  318.     } 
  319.  
  320.     public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) 
  321.     { 
  322.       super.onGeolocationPermissionsShowPrompt(origin, callback); 
  323.       callback.invoke(origin, true, false); 
  324.     } 
  325.   } 

相信开发过webview的同学都知道其中的奥秘了，通过重载webview的WebChromeClient和WebViewClient接口，实现其中的js代码的处理部分，即可和phoneGap中js端的代码进行交互了。

相信现在大家都熟悉了一种利用web方式开发移动APP的解决方式了吧，期待更好的解决方案能够出来。

最后再向大家推荐一个js开发库，来方便的定制APP的样式，怎么样让你的APP看起来更本地化，它就是http://jqtouch.com/，运行结果见开始的图片，如果我把浏览器的部分隐藏掉，谁能轻易分辨出来是一个本地化的APP，还是web的APP？

原文链接：http://blog.zhourunsheng.com/2011/10/%E7%A7%BB%E5%8A%A8-app-%E4%B9%8B%E8%B7%A8%E5%B9%B3%E5%8F%B0%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/

责任编辑：佚名 来源： 润物无声的博客
PhoneGap
相关推荐
跨平台开发：初探PhoneGap移动开发框架
PhoneGap是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。

2010-10-09 15:01:27

PhoneGapiPhoneAndroid
iOS和Android跨平台游戏开发解决方案
据国外媒体报道，手机游戏公司ZiplineGames最近推出了支持开发iOS和Android跨平台游戏的解决方案——Moai游戏开发平台，解决了手机领域长期存在的平台分裂性问题，方便了游戏开发者向多个平台推出不同版本的游戏。

2011-04-08 09:13:13

游戏跨平台iOS
Opera展示跨平台浏览器解决方案
在拉斯维加斯举办的国际消费电子展上，Opera为消费者带来电视平台浏览器、设备专用浏览器软件开发工具包等技术创新。

2012-01-04 16:14:17

如何找到企业移动商城APP的解决方案？
四年20家品牌电子商务建设经验，为您提供专业的移动电子商务解决全案，还在为没有把握住电子商务而后悔吗，岂能错过移动电子商务。

2013-07-02 15:26:10

APP企业移动商城
跨平台工具详解：Adobe PhoneGap
在接下来的一系列文章中，我们对跨平台工具进行逐一分析，包括产品&技术支持，市场份额和定位等内容。首先，本篇文章为大家展示了15家主要的跨平台工具供应商的详细资料，其中，我们列出了每个供应商的主要特点，他们的目标平台以及我们根据所做的开发者调查得出的针对每个工具的开发者观点，接下来我们为大家详细介绍了Adobe旗下的PhoneGap。

2012-07-06 13:50:44

跨平台工具Adobe Phone
跨平台移动开发工具:PhoneGap与Titanium全方位比拼
本文为Appcelerator开发者KevinWhinnery对PhoneGap和AppceleratorTitanium进行的全方位的比较。希望本文能对正在选择使用跨平台移动开发工具的朋友有所帮助。

2012-05-24 13:25:37

TitaniumPhoneGapAppcelerato
ATCA平台系列解决方案之DPI应用
我们将会为大家介绍在电信级设备发展对硬件平台的需求基础上大唐移动RASTAP平台对于相关电信应用的解决方案，可满足电信RAS、通用、IP化、支持系列化规模等需求。先让我们来看一下DPI应用解决方案。

2011-07-11 14:16:37

DPIRASTAP
移动办公加速解决方案
在信息交流日益频繁的今天，移动办公已经成为企业员工以及高层领导必不可少的办公模式。借助CDMA、3G等无线网络或者酒店的有线网络连接，笔记本用户连接到公司内部服务器进行邮件、OA和ERP系统的访问以及数据传输。

2011-05-05 16:00:12

深信服移动办公
深信服IOS、Android移动商务平台解决方案
深信服科技SSLVPN技术，可以利用iOS以及Android系统中本身自带的PPTP接口，就能实现快捷、安全、易用的接入办公。保证智能终端和数据中心之间传输数据的安全性。

2011-11-08 19:09:08

超86%的移动APP存漏洞 阿里安全推聚安全平台解决方案
随着移动互联网的迅猛发展，越来越多的网友成为“低头族”。在本次峰会上，移动互联网的安全也成为与会者关注的焦点。阿里巴巴无线安全首席架构师潘爱民发表了《“互联网+”时代的移动安全实践”》的主题演讲。

2015-07-10 15:19:21

移动办公系统解决方案浅析
移动办公模式是IT消费化的一个戏剧性结果。这一模式的原动力来自于员工而非企业，员工对于新科技的喜好反过来驱动企业变更和适应新技术的变化，同时这也正是移动办公将日趋普及的原因。

2013-12-16 10:32:37

携程小程序生态之Taro跨端解决方案
随着携程接入小程序平台类型的增加，前端需要负责的端越来越多，研发成本也随之成倍增加。为了解决一套代码多端运行的诉求，携程小程序框架不断调整、升级，逐渐形成了携程Taro跨端解决方案。

2022-08-12 08:38:08

携程小程序Taro跨端解决方案
MoMinis Studios推手机游戏开发和销售跨平台解决方案
MoMinis公司通过一系列的测试，推出了行业首个可完全兼容多个平台的开发和销售工具TheMoMinisStudio。MoMinis的联合创始人EyalRabinovich表示，MoMinis支持开发商轻松向各种手机平台植入游戏，快速实现营收。开发商如今可以专注于游戏质量，无需担心平台移植和营收的问题。

2011-02-24 11:15:45

应用商店
区块链跨域安全解决方案
现在很多人只识比特币，不识区块链，接下来，让我们先来了解下区块链相关技术背景，再说区块链域安全。

2018-01-26 08:39:03

理解跨域及常用解决方案
跨域，相信大家无论是在工作中还是在面试中经常遇到这个问题，常常在网上看到别人所整理的一些方法，看似知道是怎么回事，但如果没有动手实践过，总觉得自己没有真正的掌握，在这里，通过自己认真思考整理一些常用的方法。

2018-12-12 15:50:13

跨机房问题解决方案
跨机房问题一直都是一个老大难的问题，先看传统数据库的跨机房方案。

2012-05-09 10:08:41

跨机房
几种常见的跨域解决方案
跨域是指指的是浏览器不能执行其他网站的脚本，从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。跨域是由浏览器的同源策略造成的，是浏览器施加的安全限制。

2023-05-06 15:32:04

WebRAY技术解决方案之网页防篡改解决方案
Web应用的发展，使Web系统发挥了越来越重要的作用，与此同时，越来越多的Web系统也因为存在安全隐患而频繁遭受到各种攻击，导致Web系统敏感数据、页面被篡改、甚至成为传播木马的傀儡，最终会给更多访问者造成伤害，带来严重损失。

2016-03-13 17:58:57

CrossApp 0.3.8 发布，跨平台移动App开发引擎
经过了一个美好的10月1，跨平台移动App开发引擎CrossApp继续保持每周1次更新的频率，今日又有了新的动作，正式更新至0.3.8版本，本次主要融合了CrossAppjavascript版，并且新增了文件下载管理，且对文字效果进行了优化，同时还优化了CATextView、CAScrollView的触摸体验等。官方表示将在可直接预览，鼠标拖拽化堆UI的图形化编辑器即将完成并推出。

2014-10-14 11:25:56

CrossApp开发引擎移动App
原生对跨平台：PhoneGap、Titanium、Xamarin三大应用开发方案优劣汇总
应用开发所选择的首要平台及编程语言在产品对用户的直观性以及受众类型方面发挥着巨大作用。原生抑或跨平台这一决策最终取决于您的实际业务目标，且其各自都有着自己的优势与缺点。本文是原生对跨平台：PhoneGap、Titanium、Xamarin三大应用开发方案优劣汇总，供大家参考。

2017-03-10 06:49:00

原生跨平台PhoneGap
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服