精华内容
参与话题
问答
  • PhoneGap详细介绍

    千次阅读 2018-12-13 14:49:15
    PhoneGap简介 PhoneGap是一个能够让Web开发者快速进行移动app开发的开源框架。 PhoneGap主要涉及的技术包括HTML,CSS,JavaScript。 PhoneGap可以让不懂Object-C的开发者也可以开发IOS应用程序。 PhoneGap实现了“一...

    PhoneGap简介
    PhoneGap是一个能够让Web开发者快速进行移动app开发的开源框架。

    PhoneGap主要涉及的技术包括HTML,CSS,JavaScript。

    PhoneGap可以让不懂Object-C的开发者也可以开发IOS应用程序。

    PhoneGap实现了“一次开发,到处使用”。(看起来是怎么那么像Java的口号啊,哈哈。不过话说回来,这只是一个口号,不能完全迷信。确切来讲,你可以利用PhoneGap进行移动开发,然后只需要非常小的改动就能让你的程序在各种平台上运行,包括IOS,Android,Windows Phone等等,业界有人估算说利用PhoneGap开发移动应用的人力成本只有传统方式的五分之一。)

    一般情况下,用PhoneGap开发的应用和用传统方式(即本地/原生app,比如用Object C开发的IOS app)开发的应用效果基本是一致的。除了个别情况,比如手机游戏之类的。原因可能是PhoneGap毕竟是一个封装了很多底层细节的框架,运行效率肯定赶不上本地原生App。不过这些都会随着PhoneGap本身的完善和硬件技术的提升而得到很好的改善。话说回来,类似FaceBook和Baidu这样的互联网公司都开始运用PhoneGap了,我们是不是可以更大胆一些呢?

    如果你需要了解更多的细节,比如PhoneGap的历史、优点与缺点等等,你可以百度或Google一下。

    通过PhoneGap,你能做什么?
    操作联系人
    用Create()方法创建联系人
    用Save()方法保存联系人
    用Find()方法查找联系人
    用Clone()方法复制联系人
    用Remove()方法删除联系人
    是不是很简单呢?

    操作摄像头
    大多数智能终端都带有内置摄像头。PhoneGap API提供了两种方式让你操作摄像头以获取图像:

    通过camera对象来操作。比如camera.getPicture()
    利用MediaCapture API来操作。
    你甚至可以通过PhoneGap对获取到图像进行编辑处理。具体我们在后续文章中详解。

    注意:因为现今的很多摄像头具有非常高的分辨率,当你采用了一些特定格式的图像处理方式时,要留意生成图像的大小,以免消耗过多的内存资源导致异常。

    使用定位功能(比如GPS等)
    PhoneGap的Geolocation API可以让你轻松获取当前位置信息(比如经纬度)。如果你的设备已经联网,你可能会获取非常精准的位置信息。

    使用多媒体文件
    前面刚提到Media Capture API可以用来操作图像,但实际上此API的功能不仅限于操作图像。你也可以用它来获取声音和视频信息,比如录音或录像。你可以用它来控制各种操作,比如开始录音,停止录音等等。

    数据存储支持
    了解Html5的朋友可能对它的Web Storage非常欣赏。同样,PhoneGap也提供了这个功能。你可以用本地SQLite来存储数据,对一般应用而言,这已经足够了。

    利用这个功能,你的应用可以从远程服务器拉取数据,然后存储到本地。然后当你需要的时候,你可以把本地发生变更的数据同步更新到远程服务器。这是一个非常实用的功能。

    PhoneGap API概述
    因为稍后的章节将陆续讲解PhoneGap的各个API,所以此处我们不做详述。但是了解PhoneGap API的概要,有助于我们今后的学习安排。

    以下是主要的API接口:

    Accelerometer           操作加速传感器

    Camera                      操作摄像头

    Capture                      操作多媒体设别。比如摄像头,录音设备等。

    Compass                    操作罗盘

    Connection                快速检测网络状态,包括Wifi或手机网络。

    Contacts                    操作联系人

    Device                         获取设备相关信息

    Events                         通过Javascript和本地事件建立对应关系

    File                               通过Javascript操作本地文件

    Geolocation               定位

    Media                         录音、播放多媒体文件。

    Network                     快速检测网络状态

    Notification               通知(比如声音、震动、文字等)

    Stroage                       本地存储

    其它问题
    以上我们列出了PhoneGap提供的主要API。但是这并不意味着仅仅利用这些API就可以称作PhoneGap开发了。你还需要其他的一些必要技能,比如HTML5,CSS3以及Javascript。甚至如果需要的话,你可能还需要利用其它一些框架,比如jQuery(比较流行)。你必须充分理解以上各个技能的使用方式。

    和传统桌面应用不一样,移动终端设备的屏幕是有限的。你不太可能将整个很大的页面一股脑发送到移动终端上。如果用户需要反复滚动或缩放才能看到你提供的内容,那这样的应用将会是一个失败的应用。一个比较好的方法是,你可以充分利用HTML5的标签,比如header,list等等,同时充分利用CSS的强大功能。

    同时,有别于桌面应用的加载速度,移动终端的处理能力是有限的,如果你的应用在启动或载入页面时需要加载的内容太多,将会导致用户长时间等待并失去耐心,从而舍弃你的应用。

    以上都是做移动开发时需要考虑的问题。充分利用一些第三方框架,比如jQuery Mobile Framework等等,将会有助于提高应用的用户体验满意度。

    最后提一点,在某些设备上,从一个页面跳转到另一个页面将导致内存消耗显著增大甚至降低反应速度。一个比较好的解决方案是尽量将相关内容放在一个页面,再通过Js在需要的时候动态加载这些内容。当然,如果你选用jQuery之类的框架,那将会更容易实现。

    作者:serven-star
    来源:CSDN
    原文:https://blog.csdn.net/zythy/article/details/21716319
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • PhoneGap安装和使用教程

    千次阅读 2017-10-18 16:20:55
    一、使用PhoneGap软件创建工程 参考官方网站:http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/ 1.下载安装PhoneGap Mac版 2.下载安装PhoneGap iPhone版 3.创建项目: 打开Mac上的...

    一、使用PhoneGap软件创建工程

    参考官方网站:http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/

    1.下载安装PhoneGap Mac版
    2.下载安装PhoneGap iPhone版
    3.创建项目:
    打开Mac上的phonegap应用,单击加号,然后选择创建新的PhoneGap项目,填写项目信息
    4.预览项目:
    若项目创建成功,项目的左侧有一个绿色的边框并且底部有绿色的文字提示server is running on…(若是灰色的可尝试点击左侧菜单第三个设置按钮,然后点击save启动)
    A.电脑端:在浏览器中打开此地址可看到phonegap默认的画面。
    B.转到PhoneGap开发者应用程序运行的移动设备,在主屏幕上输入服务器地址,然后点击连接。

    二、使用终端创建工程
    参考地址:http://www.jianshu.com/p/a6dd9b7c4ea7

    1.安装PhoneGap

    检查node.js环境,下载地址:https://nodejs.org/en/

    node -v

    安装PhoneGap

    npm install -g phonegap@latest

    2.新建PhoneGap项目

    cd DeskTop
    phonegap create Demo com.phonegap.demo Demo

    3.创建浏览器/iOS/Android工程目录

    进入创建的phonegap项目的文件夹中,使用phonegap命令创建

    cd Demo
    phonegap platform add browser
    phonegap platform add ios
    phonegap platform add android

    创建成功后在platform文件夹里会出现相应的文件夹,里面有对应的iOS/Android工程

    4.编译运行

    phonegap build browser
    phonegap run browser
    
    phonegap build ios
    phonegap run ios
    
    phonegap build android
    phonegap run android

    使用Cordova代替PhoneGap

    npm install -g cordova --registry https://registry.npm.taobao.org
    
    cordova run browser
    展开全文
  • phonegap 框架详解

    2019-06-27 03:04:49
    首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图。 说明:socket server模式下, phonegap.js 源码实现的采用1 毫秒执行一次XHR请求, 当Native JS 队列里面有JS语句数据时,才是真正的1毫秒调用...

    首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图。

     

    说明:socket server模式下, phonegap.js 源码实现的采用1 毫秒执行一次XHR请求,  当Native  JS 队列里面有JS语句数据时,才是真正的1毫秒调用一下;  当没有数据, scoket server 会阻塞10毫秒, 也就是XHR 要等10秒钟才能收到结果,并进行下一次的轮询。

     

    1、Activity继承 DroidGap (extends PhonegapActivity)

    从phonegap.xml 中加载白名单配置 和 log配置


    2、loadUrl (每个Activity 都初始化一次)

    》》初始化webview
    》》初始化callbackServer
    》》插件管理器PluginManager 

     

    3、加载插件配置:

    》》读取 plugins.xml 配置,用map存储起来。

    <plugins>
    <plugin name="Camera" value="com.phonegap.CameraLauncher"/>
    <plugin name="Contacts" value="com.phonegap.ContactManager"/>
    <plugin name="Crypto" value="com.phonegap.CryptoHandler"/>
    <plugin name="File" value="com.phonegap.FileUtils"/>
    <plugin name="Network Status" value="com.phonegap.NetworkManager"/>
    </plugins>

    说明:
    name 是别名,javascript调用时通过别名来调用。
    value:java具体实现类

    web页面调用(例如查找联想人)
    PhoneGap.exec(successCB, errorCB, "Contacts", "search", [fields, options]);


    4、插件实现

    》》编程java类,继承Plugin类(Plugin 实现了IPlugin接口),并实现execute方法。
    例如联系人管理插件:

    public class ContactManager extends Plugin{
        /**
         * action : 用来指定一个具体动作  search 表示搜索联系人 
         * args: 方法参数
         * callbackId:js与java指定一个标识,
         */
      	public PluginResult execute(String action, JSONArray args, String callbackId) {
    		try {
    			if (action.equals("search")) {
    				JSONArray res = contactAccessor.search(args.getJSONArray(0), args.optJSONObject(1));
    				return new PluginResult(status, res, "navigator.contacts.cast");
    			}
    			else if (action.equals("save")) {
    			    String id = contactAccessor.save(args.getJSONObject(0));
    			    if (id != null) {
    	                	          JSONObject res = contactAccessor.getContactById(id);
    	                                  if (res != null) {
    	                                     return new PluginResult(status, res);
    	                                 }
    			    }
    			}
    			else if (action.equals("remove")) {
    				if (contactAccessor.remove(args.getString(0))) {
    					return new PluginResult(status, result);					
    				}
    			}
    			// If we get to this point an error has occurred
               		JSONObject r = new JSONObject();
                		r.put("code", UNKNOWN_ERROR);
                                return new PluginResult(PluginResult.Status.ERROR, r);
    		} catch (JSONException e) {
    			Log.e(LOG_TAG, e.getMessage(), e);
    			return new PluginResult(PluginResult.Status.JSON_EXCEPTION);
    		}
        }
    }
    

      


    5、polling和server初始化


    android DroidGap 初始化时,如果loadUrl的url不是以file:// 开头时,polling = true, 否则是socket server方式

    代码见CallbackServer.java 类init方法

    public void init(String url) {
        //System.out.println("CallbackServer.start("+url+")");
        // Determine if XHR or polling is to be used
        if ((url != null) && !url.startsWith("file://")) {
           this.usePolling = true;
           this.stopServer();
        }
        else if (android.net.Proxy.getDefaultHost() != null) {
            this.usePolling = true;
            this.stopServer();
        }
        else {
            this.usePolling = false;
            this.startServer();
        }
    }
    

      


    6、phonegap.js  关键代码说明

     

    phonegap.js在启动时,首先会通过prompt("usePolling", "gap_callbackServer:")获取调用方式: XHR 轮询 OR prompt 轮询,  如果是XHR的话, 会启动XHR调用获取http server端口 和token。


    方法PhoneGap.Channel.join 启动 js server 或者polling调用 

    UsePolling 默认为false。 通过var polling = prompt("usePolling", "gap_callbackServer:") 获取调用方式。

     PhoneGap.Channel.join(function () {
    
        // Start listening for XHR callbacks
        setTimeout(function () {
          if (PhoneGap.UsePolling) {
            PhoneGap.JSCallbackPolling();
          }
          else {
            console.log('PhoneGap.Channel.join>>>>>>>>>>>>>>>>>>>>>>>>>');
    //phonegap js 首次启动获取js调用Native方式 var polling = prompt("usePolling", "gap_callbackServer:"); PhoneGap.UsePolling = polling; if (polling == "true") { PhoneGap.UsePolling = true; PhoneGap.JSCallbackPolling(); } else { PhoneGap.UsePolling = false; PhoneGap.JSCallback(); } } }, 1); }

      

    XHR轮询:PhoneGap.JSCallback方法

    通过XHR 与java端 socket进行通信,每一毫秒执行一次JSCallback,从android socket获取javascript执行结果代码,最后通过eval动态执行javascript

    XHR调用, 通过prompt 获取socket端口 和 token(uuid)

    if (PhoneGap.JSCallbackPort === null) {
       PhoneGap.JSCallbackPort = prompt("getPort", "gap_callbackServer:");
       console.log('PhoneGap.JSCallback getPort>>>>>>>>>>>>>>>>>>>>>>>>>:' + PhoneGap.JSCallbackPort);
    }
    if (PhoneGap.JSCallbackToken === null) {
      PhoneGap.JSCallbackToken = prompt("getToken", "gap_callbackServer:");
      console.log('PhoneGap.JSCallback getToken>>>>>>>>>>>>>>>>>>>>>>>>>:' + PhoneGap.JSCallbackToken);
    }
    xmlhttp.open("GET", "http://127.0.0.1:" + PhoneGap.JSCallbackPort + "/" + PhoneGap.JSCallbackToken, true);
    xmlhttp.send();
    
    XHR返回结果代码片段
    var msg = decodeURIComponent(xmlhttp.responseText);
    setTimeout(function () {
    try {
        var t = eval(msg);
    }
    catch (e) {
      // If we're getting an error here, seeing the message will help in debugging
      console.log("JSCallback: Message from Server: " + msg);
      console.log("JSCallback Error: " + e);
    }
     }, 1);
     setTimeout(PhoneGap.JSCallback, 1);
    }

      

    prompt轮询: PhoneGap.JSCallbackPolling方法

     

    PhoneGap.JSCallbackPolling = function () {
    
        // Exit if shutting down app
        if (PhoneGap.shuttingDown) {
          return;
        }
    
        // If polling flag was changed, stop using polling from now on
        if (!PhoneGap.UsePolling) {
          PhoneGap.JSCallback();
          return;
        }
    
        var msg = prompt("", "gap_poll:");
        if (msg) {
          setTimeout(function () {
            try {
              var t = eval("" + msg);
            }
            catch (e) {
              console.log("JSCallbackPolling: Message from Server: " + msg);
              console.log("JSCallbackPolling Error: " + e);
            }
          }, 1);
          setTimeout(PhoneGap.JSCallbackPolling, 1);
        }
        else {
          setTimeout(PhoneGap.JSCallbackPolling, PhoneGap.JSCallbackPollingPeriod);
        }
      };
    

      

     7、总结

      1、phonegap android 插件管理器PluginManager初始化时, 是每个Activity都要初始化一次, 数据都缓存一次, 导致同一份数据缓存多次。-- 暂不清楚为啥这样实现? 难道是phonegap 框架是为单webview 实现的,如果有知道原因的请告知一下。

         2、同第1点一样, Socket Server 每个Activity都会初始化一下, 如果loadUrl 的url类型不同,会不会导致scoket server状体错乱, 待验证

         3、phonegap 采用 prompt 和 XHR 轮询机制,一是会导致手机耗电情况严重, 二是了解到prompt 调用是会阻塞js执行的, 这样导致影响到页面加载速度。

     

      phonegap 已经改名cordova, 在最新版本cordova 框架里面已经去掉了socket server模式, 详细请查看:http://www.cnblogs.com/hubcarl/p/4202784.html

     

    转载于:https://www.cnblogs.com/hubcarl/p/4216844.html

    展开全文
  • phonegap开发环境搭建

    千次阅读 2018-08-14 15:07:47
    phoneGap是一个开源的框架,让开发者使用web技术开发跨平台的mobile app,实现调用智能手机的核心本地功能(指南针、加速度传感器。。。)。是一个平台,以插件的形式提供了丰富的js api(application interface),...

    phoneGap是一个开源的框架,让开发者使用web技术开发跨平台的mobile app,实现调用智能手机的核心本地功能(指南针、加速度传感器。。。)。是一个平台,以插件的形式提供了丰富的js api(application interface),开发者编写js调用phoneGap提供的api实现对于底层和原生组件的调用

    phoneGap的核心特点:

    兼容性:兼容各个平台
    标准化:w3c标准
    大众化:不需要手机编程基础,只要会前端编程技能 就能通过js去调用 设备底层硬件和原生接口

    环境搭建:(采用官方建议方法)

    1、pc端phoneGap安装 ,下载地址 https://phonegap.com

    /

    安装好之后双击打开,第一项:创建一个新的phoneGap(项目是需要联网操作),第二项:打开一个已经存在的模板

    创建完项目(打开已经存在的模板)会生成一个url 地址如下:

    2、phoneGap 移动端安装下载地址(https://download.csdn.net/download/lian772882/10603081)安装完之后打开显示如下,可以输入如下url地址,点击Connect 连接

    成功显示如下:

    这样我们就连接成功,可以到创建的项目模板里面:www下通过用插件调用设备底层硬件和原生接口(具体开发代码去参照文档)

    ,当前端代码调用底层硬件设备的时候,我们手机上就能看到效果。

     

     

     

     

     

     

     

     

    展开全文
  • WebAPP-了解一下PhoneGap

    千次阅读 2018-05-21 10:56:20
    0. PhoneGap介绍0.1 什么是PhoneGapPhoneGap是一个基于HTML、CSS、JS创建跨平台移动应程序的快速开发平台。与传统Web应用不同的是,它使开发者能够利用iPhone、Android等智能手机的核心本地功能,比如GPS、传感器...
  • PhoneGap

    2012-11-08 14:49:32
    在2012年3月份程序员杂志上,应邀撰写了一篇关于phoneGap的介绍,题目为《关于PhoneGap的7件事》,限于篇幅,一些内容没有加入。现把该文章同时发布到博客上,并会逐步填充更详尽的内容。 一切源自iphone。 ...
  • phonegap

    2016-01-04 13:20:00
    phonegap 框架详解 转自:http://www.cnblogs.com/hubcarl/p/4216844.html 首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图。 说明:socket server模式下, phonegap.js 源码实现的采用1 ...
  • 一个phonegap门外汉的phonegap初体验

    千次阅读 2015-08-13 12:21:41
    以前做移动app,都是使用android和ios的原生语言来开发,对于Phonegap, 以前一直都只是耳闻,从未实际接触过。这两天因为需要维护一个Phonegap项目,所以有机会接触。这里记录下自己的一些使用历程,算不上心得,...
  • Android PhoneGap简析

    千次阅读 2012-04-12 16:49:28
    前言 (转自) 上周研究了一下PhoneGap...当然这些都是一个概括性的认识,今天打算在仔细的研究一下,把PhoneGap的jar包反编译了一下,在自己的疑问下,借助互联网的帮助,简单的分析了一下PhoneGap的内部实现和依靠
  • PhoneGap详解

    2014-12-26 17:15:51
    今天参加了Adobe和CSDN组织的一个关于PhoneGap的开发讲座 ,而PhoneGap在iOS设备上的实现就是通过UIWebView控件来展示html内容,并且与native代码进行交互的。 正好我们在做有道云笔记的iPad版,因为我们也是...
  • Awesome PhoneGap/Cordova

    2014-12-03 22:23:12
    A curated list of amazingly awesome PhoneGap/Cordova libraries, resources and shiny things. Inspired by other awesome lists. [b]Official Site[/b] [url=http://cordova.apache.org/]Apache Cordova[/ur...
  • PhoneGap开发手册

    2015-07-11 10:26:51
    它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。
  • Phonegap 入门

    千次阅读 2012-03-17 10:59:16
    Phonegap需要入门吗?  哦,对的。任何技术都有门槛,当然PhoneGap 也不例外,好吧,先来看看官方的GetStart:For Android 1. 需求 Eclipse 3.4+ 本教程还有另外一个不使用Eclipse的版本,...
  • 很多PhoneGap新手总是需要一些基础问题的解答,Adobe技术布道师Andrew Trice常在其博文中回答诸如” PhoneGap是什么?”、“phonegap应用开发出来是什么样的形态?”、“如何开发phonegap?”等问题。近日他将这些问题...
  • phonegapI’ve been an active IT and programming trainer and teacher for more than 15 years… and a lot has changed during this ... I still remember my first PhoneGap course that was conceived for an i...
  • 此文章转载于2015.05.12,发布于网易博客,于2020.03.25... 一、PhoneGap简介 PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone,Android,...
  • PhoneGap API介绍:Events

    千次阅读 2012-05-09 13:42:23
    事件类型: backbuttondevicereadymenubuttonpauseresumesearchbuttononlineoffline backbutton 当用户在Android系统上...document.addEventListener("backbutton", yourCallbackFunction, false);...详述:

空空如也

1 2 3 4 5 ... 20
收藏数 18,881
精华内容 7,552
关键字:

PhoneGap