首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

phonegap入门实战

What is PhoneGap?   PhoneGap一个用基于HTML5的移动应用前端开发框架,使用HTML+CSS+JavaScript,再通过PhoneGap可以快速创建APP了。   ...PhoneGap能让你使用的简单的Web技术即可获得移动设备的原生特性,如摄像头、加速器、指南针。   PhoneGap是完全开放源代码的,你可以通过编写组件,实现任何原生设备特性的扩展。...建立项目的步骤   前面我们已经了解了一些PhoneGap的部分内容,那怎样来建立一个PhoneGap的项目呢,我们将在这节课程为大家来介绍。 我们可以通过命令行来创建项目。...项目   我们就带大家来感受一下创建一个自己的phonegap程序,实现功能很简单就是点击返回按钮时,弹出“hello world”。 1.系统,首先转到root目录,这就是我们要创建项目的目录。...通常情况下,我们希望HTML文件的DOM加载完毕后使用document.addEventListener附加一个事件监听器。

1.5K20

那些年我们一起用过的Hybrid App

PhoneGap.js或者Cordova.js 做Phonegap开发必须使用的代码库,用于和PhoneGap框架通讯。现在这个库已经改名了,是Cordova。具体为什么改名,得问Adobe咯。...但是Native应用,就很单一了。你只需要把握好Objective-C就可以了。因此对于原生应用来说,开发时只要遵守好规范,即使是一个新手参与开发,也可以快速地上手,看懂代码。...这样的话,你是继续选择用一个不成熟的工具,还是选择去学习一种新的语言呢?所以还是根据需求而定吧。 另外一个例子。曾经有人跟笔者提及到,使用HTML和CSS编写应用界面时确实很爽,但是效率咋的。...从IE兼容,到目前多个浏览器的乱战,到iOS以及Android设备Web上的兼容,这不就是一个历史的例子嘛。跨平台不是不好,只是一个时代里,你能够达到怎样的效果,真的是很难估量的。...其实完全可以使用笔者说的混合应用,方案三,去解决这个问题。你无非就是希望用navigationController做一个漂亮的过场动画嘛,iOS几句代码就实现了。

1.3K80
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android开发者的担心:PhoneGap替代Android原生?

    最近接触了PhoneGap,也顺带了解了Mobile Web. 他们出现的目的就是为了让Web开发者使用HTML、Javascript、CSS等Web APIs开发跨平台的移动应用程序。...跨平台:所有系统都能运行 免安装:打开浏览器,就能使用 快速部署:升级只需服务器更新代码 超链接:可以与其他网站互连,可以被搜索引擎检索 但是,现实是怎样呢? (1)体验差。...如果将来有一天,Web app会成为主流,一定有一个前提,那就是的性能可以赶上Native app。 注意了,关键在于目前移动app“性能”不足。 那么性能问题是什么原因呢?...只要一个操作有卡顿,整个网页就会短暂失去响应。浏览器重绘网页的频率是60FPS(即16毫秒/帧),JavaScript做不到16毫秒内完成DOM操作,因此产生了跳帧。...MobileWeb发展内容借鉴自http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html ,我只是可爱的搬运工~

    64420

    移动开发的跨平台技术演进

    Web App Web App是指基于Web的应用,运行于网络和标准浏览器上,相当于一个网页然后加一个App的壳。...与PhoneGap等框架不同的是,Xamarin可以iOS和Android刚推出新的功能时,第一时间调用相应的API,而使用PhoneGap则需要等待PhoneGap封装的新的功能后才可以调用相应的API...C#代码写的Andriod应用在运行的Mono虚拟机,ART可以通过ACWs(Andriod Callable Wrappers)的方式执行到Mono的C#代码。...快应用介于移动网页和原生应用之间,第三方应用以移动网页的形式进行开发,最终得到原生渲染的效果体验。...快应用框架深度集成进各手机厂商的手机操作系统可以操作系统层面形成用户需求与应用服务的无缝连接,很多只用在原生应用才能使用的功能,应用可以很方便的实现,享受原生应用体验,同时不用担心分发留存等问题

    3.2K20

    Android开发笔记(六十四)网页加载与JS调用

    内置浏览器 网页视图WebView 如果一个网站已经有现成的网页及业务逻辑,那么使用WebView将其内嵌到app,省去了app重画页面与http通信的事情,无疑是更经济的做法。...因为WebView加载网页是异步的,所以loadUrl方法调用js无法直接获得返回值。多数情况只能在js代码回调Android方法,从而间接获取Android调用js的返回值。...以下说明文字来自百度百科的PhoneGap词条: “PhoneGap一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。...使用PhoneGap比为每个平台分别建立应用程序好一点点,因为虽然基本代码是一样的,但是你仍然需要为每个平台分别编译应用程序。”...Cordova 虽然PhoneGap号称跨平台,但是html5+js也只能完成网站那样的网页操作,却无法直接操作手机设备的功能。

    6.4K10

    未来的移动互联网将由超级App+WebApp主宰

    此时人们纷纷开始研究基于 HTML5 开发跨平台手机应用。很多人当时认为,原生应用只是过渡,就像当年从 C/S 结构转变为 B/S 结构一样。...Adobe 看到 PhoneGap 仿佛看到了重振江湖地位的希望,但在 Adobe 收购 PhoneGap 后,又发现这个东西可商用性不足,而且开源使得 Adobe 无法像 Flash 那样获取商业利益...Mobile Web 这个工作组的重要目标就是让 HTML5 开发的网页应用达到原生应用的体验。然而,事与愿违,结果是努力了却失败了。...Nitro 的限制,现在任意浏览器或应用调用 iOS 的 UIWebview 都可以利用 Nitro 加速,这样在前端使用 JS 做大型运算也成为可能。...但是 Web App 这一切都不是问题,极大的降低了用户使用成本,用户眼睛看到一个兴趣点,点击后,就应该立即开始满足用户需求。比如流媒体可以立即看,页游可以立即玩。

    97910

    H5 手机 App 开发入门:技术篇

    通常情况下,App 内部会使用 WebView 控件作为网页引擎。这是系统自带的控件,专门用来显示网页应用程序的界面,只要放上 WebView,就好像内嵌了浏览器窗口,可以显示网页。 ?...混合技术栈:页面本身就是网页,默认 WebView 显示。 跨平台技术栈:提供一个 WebView 的语法,编译的时候将其换成原生的 WebView。...它是一种集成开发环境(IDE),也是苹果公司指定的 iOS 官方开发工具,所有苹果手机的 App 都由打包生成。 它可以 Mac 电脑上通过应用商店免费安装。...上面代码,由于页面本身就是网页,所以可以直接用iframe标签插入外部网页。 然后,本机起一个 Web 服务,看看 Demo 的效果。...可以先把编译成 Web 版,浏览器预览,这样比较快,立刻就能看到效果。 $ npm run web 运行上面的命令,命令行会出现一个二维码。 ?

    6.7K41

    HTML5定稿了,为什么原生App世界将被颠覆

    ,Adobe新的产业升级攫取了大量的利润。...Adobe看到PhoneGap仿佛看到了重振江湖地位的希望,但在Adobe收购PhoneGap后,又发现这个东西可商用性不足,而且开源使得Adobe无法像Flash那样获取商业利益,于是就把PhoneGap...“性工能”障碍的消除,只是HTML5的劣势被削弱,但劣势被消除后,的优势就会大放异彩,HTML5的优势是什么?我们分别就开发者和最终用户来看。...而且这种更新完全可以是差量更新,比如某个HTML页面或某个js文件有问题,更新这个几k的小文件就可以了,这比原生应用的更新体验好太多。...原生应用体系下,用户只能这样。但在HTML5体系下,他不需要切回桌面,他可以App间方便的直接跳来跳去,而不是使用一个一个孤岛App;他更不用重复录入数据,应用可以方便的互相传递数据。

    67030

    Hybrid App开发 四大主流平台「建议收藏」

    是选择学习原生开发,研究Java、 Object-C、C#等语言,还是选择继续使用网页开发,容忍HTML5功能的局限性?就在开发者左右为难的情况下Hybrid App作为一个折中的解决方案诞生了。...但是开发过程同时使用网页语言,所以开发成本与难度大大降低。也就是说Hybrid App兼具了Native App与Web App两者的诸多优点。...现在有更多的开发者面临移动平台的选择,所以在这里根据开发各个平台的使用情况,针对现在主流的平台进行分析。...虽然有中文的开发文档,但描述比较简单,希望他们丰富他们的API文档。 2. 免费版本不支持自定义插件(据说企业版可以自定义插件)。 3....而国内使用最多的AppCan,它从多个角度多种模式进行开发,可以满足国内从普通网站维护者到Web专业开发者等对于移 动应用的需求。加上良好的技术支持,目前已经成为众多开发者的首选框架。

    2.4K10

    Cordova、PhoneGap、Ionic,等等

    所以,一个应用的“原生化”只是一个相对的概念。严格来说,我们无法说一个应用本身是否是原生的。我们只能说,相比于另一个应用,它是更原生的。...还有一个额外的好处,原生化较少的框架的程序通常更具可移植性,程序可以完全不同的硬件平台上运行而无需修改,因为的词汇和底层概念包含任何特定于原始硬件的内容。...此阵营应用速度都很快,并且可以使用丰富的硬件功能。用户界面是针对目标平台(安卓或 IOS)的定制的,因此使用起来是流畅且愉悦的。但是,所有这些好处都被限制一个平台上了。...它们每个应用中都内嵌了 Web 浏览器,并美名其曰 WebView!你 UI 中看到的所有,包括按钮、菜单和动画,都是浏览器的网页运行的。...当需要时,React Native 还提供了一种渗透到原生框架的方法,以实现我们希望应用实现的任何原生功能。这有点像在黑客帝国中打电话。 ? 所以 WebView 框架一无是处喽? ,当然不是。

    3.2K40

    跨平台开发框架和工具集锦

    (一)Web App网页 智能机还没有出来之前,其实就有适用于手机端的网页了。Web App其实不算是严格意义上的App,我觉得应该把称作网页端自适应移动版更合适。...Web App缺点:用户体验比不上原生那么流畅,性能上比不上原生;有一些功能受浏览器、系统以及平台本身限制不好实现,比如系统级别的弹窗、传感器、手机联系人等都只能靠原生去实现(也排除有些框架可以做到,...PWA优势:PWA可以将App的快捷方式放置桌面上,全屏运行,体验上与原生几乎一致,支持有网和断网时使用。PWA包含原生OS相关代码。...PWA缺点:PWA仍然是网站只是缓存、通知、后台功能等方面表现的更好。...Cordova从PhoneGap抽出的核心代码。Cordova是一个使用HTML,CSS和JS这些前端语言去构建移动应用的平台。

    4K30

    PhoneGap学习笔记

    2、使用的场景不同,手机用户多数在户外的时候使用应用希望能够尽可能快的时间内完成任务。 3、用户交互的方式不同。...PhoneGap架构 ? Android开发环境准备 PhoneGap只是一个框架(Framework),因此并不提供集成开发环境和工具,所有的都需要我们自己准备。...假设你已经本机安装了JDK1.6+,因为要使用Java Development Environment的支持,所以需要Ecplise版本3.2以上。...5、安装PhoneGap库文件(Cordova),PhoneGap捐赠给Apache基金会后,名字改为了Cordova,我们需要从网站上下载源码 现在Google的Android网站上提供了集成环境的下载...,这样我们只需要下载一个集成环境,就可以方便de开始开发了。

    47230

    2017编程趋势预测:10大技术大热,10大技术遇冷

    livecoding.tv上,一位开发者使用Phonegap开发一款HTML5 App 2....单一网页的Web apps盛行,网站遇冷 制作传统网站的时候,网站设计人员要花几个小时来制作网站地图,以令网站导航变得简单。新的Web应用程序是从前端到有大量内容的大数据库。...当Web应用程序需要信息时,它就从数据库中提取信息并将信息注入到本地的模具。现在没有必要使用Web附加设备所需要的所有东西来标记数据,以便创建一个网页了。数据层是完全独立于演示和格式层。...每一个版本的app需要由一个独立的,懂得不同编程语言的团队来开发。然而,每一个平台上的app商店把app交到用户手中之前,可能会提出种种合理不合情的要求。这是开发者希望看到的。...它们通常是一个工作系统,可以让你编辑代码。如果你不喜欢WordPress的功能,配备了一个内置的编辑器,让你可以即时更改代码。微软的Azure允许你的入口写JavaScript胶水代码。

    1.5K100

    搞定混合开发面试,这一篇就够了!

    cordova是一个移动应用开发框架,你基于这个东西可以网页代码作出APP。...Phonegap Build Phonegap Build是一个在线打包工具,你把使用cordova写好的项目给Phonegap Build,Phonegap Build就会在线打包成App。...全新的Phonegap诞生,他继承了Phonegap Build和cordova ,由此phonegap在混合开发领域变得异常响亮,导致,我们不需要线上打包能力,使用cordova时,也被叫做使用Phonegap...webview Webview 是一个基于webkit引擎,可以解析DOM 元素,展示html页面的控件,和浏览器展示页面的原理是相同的,所以可以当做浏览器看待。...简单的说,JSBridge就是定义Native和JS的通信,Native通过一个固定的桥对象调用JS,JS也通过固定的桥对象调用Native。 ? 用图形象的表示他是这样的: ? 如何使用

    2.7K20

    webapp开发框架「建议收藏」

    1.框架:PhoneGap 官网:http://phonegap.com/ 简介: PhoneGap一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。...缺点: 1.Ionic是一个前段框架。不能完全取代PhoneGap和JavaScript框架的作用 2.需要结合插件使用。...与Phonegap支持单一webview使用div为单位开发移动应用不同。AppCan支持多窗口机制,让开发者可以像最传统的网页开发一样,通过页面链接的方式灵活的开发移动应用。...基于这种机制,开发者可以开发出大型的移动应用,而不是只能开发简易类型的移动应用。...跟JQuery一样是一个轻量级的JS库,一样使用HTML5+CSS+JS的技术。应为轻量级,所以web加载时比Sencha有一点优势。缺点显而易见,UI控件太少了。

    2.8K20

    几个跨平台移动App开发方案框架比较

    使开发者能够在网页调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap...)开发用户接口,利用PhoneGap容器把它们部署到不同的应用环境和设备上 此外,允许您访问本机API,以便APP可以充分利用设备提供的各种功能 完全做到了written once,run everywhere...PhoneGap 是 Apache Cordova 的一个分发版,就像 Ubuntu 是基于 Linux 的一个发行版,其代码库也基于 Cordova,只是 PhoneGap 关联了 Adobe 的一些额外的商业工具或服务...文档偏少 部分系统无法使用IDE进行调试 只能在服务器端发布,无法本地发布 IOS发布,需要将证书上传至服务器 参考资料 Phonegap VS AppCan 企业版和大众版主要有以下几点区别 开发环境...例如,用Wex5开发,或者Wex5体系中使用外部组件,都很难复用 Model:容易混淆,传统意义上的model只是提供数据模型操作,但是wex5的model有点乱用,中间不但夹杂有业务逻辑,还混合了视图操作

    7.7K20

    浅谈移动应用的技术选型|TW洞见

    所以说要选择一个适合业务需求并且匹配开发人员能力的技术方案并不是一件简单的事情。我也只是移动开发上做过一点微小的工作,此处仅能抛个砖,希望各位有玉的大神尽管砸过来。...但是这种方案的缺点也很明显——无法使用系统级API,只能做为一个临时的入口,用户很难留存,并且因为浏览器性能的原因,很难带来很好的用户体验。...美团移动网站首页 美团的移动网页就是很典型的例子,主要还是提供给不经常使用的用户一个入口,网站内部还是尽量引导用户下载使用客户端。...由于前端React也是非常的火,很多React社区的很多产出都可以React Native上借鉴使用。 React Native对于没有复杂动画效果的一般应用来说不失为一个很好的解决方案。...facebook Androidfacebook iOS 4 原生应用 原生应用的开发真的是让人又爱又恨。爱在于你可以上面施展拳脚、使用新特性、实现炫酷的效果。

    1.7K110

    未来Web设计的7大趋势

    现代化网站可以更快帮助用户理解使用方式: 仿真设计被淘汰的主要因为用户敏锐度更高,耐心值降低,杂乱的设计只能减缓一切速度。 移动应用以其美观的极简界面击败了绝大多数网站,事实证明简约界面的表现更佳。...扁平化设计只是一个开端,它所真正代表的是简约和即时性,希望这一走向可以2015年发展得更深入。 4. 像素的消亡 我们曾经能清楚的知道组成一张分辨率为72 dpi的图片需要多少像素。...网络组件就可以实现这个想法,只是对大部分设计师们而言,使用尚有困难。不过,相信2015年里,一定会有革命性进展。 谷歌材料设计的出现也许预示着这一变化的开始。...希望这一后社交媒体风潮可以2015年得以延续,因为它还有一个不容忽视的利器——网络提醒(类似手机的提醒功能)。 出彩新秀:CSS 形状 除了设计师以外,很少有人会注意到这一超酷技术。...网络组件将大大简化在网页引入移动应用体验的工序。 目前,你可以从一些网站设计中发现优秀移动应用的影子。随着时间的推移,相信用户将很难发现移动应用网站体验之间有任何区别。

    1.1K50

    【Flutter】手机应用类型 ( Android | iOS | Native 应用 | Web 应用 | Hybrid 应用 | ReactNative 应用 | Flutter 应用 )

    ; iOS 使用 Xcode 开发环境 , Objective-C , Swift 语言 , 开发 iOS 平台应用 ; 每个平台开发出的应用只能在特定平台上运行 ; 原生应用的外观渲染 , 运行性能是最好的...WebView / 浏览器 Android / iOS 手机展示网页 , 如 PhoneGap 技术 , 该技术属于网页的前端开发 , 会绘制渲染效率受 WebView 或 浏览器内核 限制 ;...开发使用的技术就是网页前端相关技术 , JavaScript + HTML5 + CSS ; 写出移动端的页面浏览器 / WebView 上运行 ; 浏览器 与 WebView 性能不是很高 , 优化到极限...更新快 , 更新应用 , 只需要在后台服务器 ( Tomcat ) 部署最新程序即可 , 与发布网站原理一样 , 不需要经过用户手动安装 跨平台 , 开发后可以 Android , iOS , Windows...---- Flutter 特点 : 使用了跨平台的绘制引擎 Skia , 可以不同的平台 , 生成表现相同的程序 , 各个平台展示效果基本没有差异 , 不需要进行兼容处理 ; Flutter 的渲染性能很高

    1.6K30

    8个hybridapp开发工具_android hybrid

    Hybrid App是指介于web-app、native-app这两者之间的app,虽然看上去是一个Native App,但只有一个UI WebView,里面访问的是一个Web App,比如街旁网最开始的应用就是包了个客户端的壳...,其实里面是HTML5的网页,后来才推出真正的原生应用。...1、PhoneGap PhoneGap一个免费且开源的开发环境,使开发者可以开发出在Android、Palm、黑莓、iPhone、iTouch及iPad等设备上运行的App。...使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。...Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。

    2.2K10
    领券