`
- 浏览:
496013 次
- 性别:
- 来自:
北京
-
android 之 使用Dreamweaver 5.5 + JQuery + PhoneGap 开发手机应用程序(一)
http://bbs.phonegapcn.com/thread-873-1-1.html
开发环境的搭建
在当前技术形势之下学什么技术的“性价比”最高? 很多人一致认同的答案是:Javascript。性=用途广泛性(跨前后端与各种平台),价=学习的代价(耗费时间与难易程度)。所以是很值得投资时间学习的。尤其是有志于投身IT行业的在校学生,学习Javascript及其相关框架是很好的选择。
我们知道一般情况下使用Objective-c开发iPhone平台的应用,用Java开发Android平台的应用,用Silverlight开发Windows Phone平台的应用,但如果你想开发一个在以上的平台都可以运行的应用,你是不是得学三种语言?那样生活岂不是很惨?
还好,我们有HTML5+JQuery+PhoneGap框架,可以让我们只学一种技术来开发一个在所有手机平台、平板电脑、包括各种PC平台都可以运行的软件!
本文首先介绍开发环境的搭建和程序的调试。
Dreamweaver 5.5 下载地址:
本帖隐藏的内容
http://www.oyksoft.com/soft/13591.html
Adobe 在2011年底推出的Dreamweaver 5.5 可以用两个字来总结:给力。安装后,里面的功能确实令人眼前一亮!我们来看看其中几个很猛的功能:
1.集成JQuery 和 PhoneGap开发环境:
0_1327763970Z39Y.gif
2012-2-7 01:36:56 上传下载附件 (12.06 KB)
安装后,Dreamweaver就自带了JQuery和PhoneGap,这样就省去你很多时间分别去下载和繁琐配置。
0_1327763865fSYp.gif
2012-2-7 01:36:56 上传下载附件 (31.46 KB)
你可以在在“插入”菜单里找到很多的JQuery 控件库,可以很方便的插入到代码或设计视图里。
2.多屏幕预览面板
0_1327764071QihD.gif
2012-2-7 01:36:56 上传下载附件 (23.81 KB)
可以如上图所示实时更改设计视图的尺寸和方向,以便检查开发的应用在各种尺寸下的显示效果。
3.可自动联网下载Android和iOs 的SDK,并帮你完成配置工作。
也就是说,只要安装了Dreamweaver,这些SDK都可以顺便帮你下载并配置安装好。因为iOs SDK不支持在Windows运行,所以你可以在Windows系统里使用Android模拟器实时模拟你写的应用,而在Mac机器上,你可以同时使用Android和iPhone的模拟器来调试你的应用!
我使用的是Windows, 打开“站点/移动应用程序/配置应用程序框架”,可看到如下界面,
点击“简易安装”按钮就可以自动联网并下载Android SDK了。
如果你已经安装好Android的SDK,那么,只需告诉Dreamweaver SDK的路径在哪就可以了。
0_1327764345oS8L.gif
2012-2-7 01:36:56 上传下载附件 (11.94 KB)
顺便说一下,如果你自己下载SDK,以Android系统为例,你需要下载如下内容:
1.Java JDK
下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html
2.Android SDK工具
下载地址:http://developer.Android.com/sdk/
安装后,点击Dreamweaver内的“站点/移动应用程序/生成和模拟”就可以启动模拟器来调试你开发的应用,如下图所示:(帅啊!)
0_1327764419C6Z6.gif
2012-2-7 01:36:56 上传下载附件 (39.09 KB)
0_13277644621x1d.gif
2012-2-7 01:36:56 上传下载附件 (31.04 KB)
OK, 开发环境搭建完成了,基本没有很多的配置内容,安装完Dreamweaver就搞定一切!我们来动手检验下所取得的成果吧。
我们按以下步骤,几分钟内就可以测试一个很简单的应用:
一. 首先我们新建一个站点
点击菜单中的“站点/新建站点”
0_13277645112o22.gif
2012-2-7 01:36:56 上传下载附件 (25.74 KB)
输入站点名称,选择一个文件夹作为站点存放的路径。
二.新建一个JQuery+PhoneGap的应用。方法如下图所示:
点击“文件/新建”,选择“示例中的页/Mobile起始页”,选择”JQuery Mobile(PhoneGap)”
文档类型选择“HTML5”
0_1327764576BzI3.gif
2012-2-7 01:36:56 上传下载附件 (22.02 KB)
点击“创建”,Dreamweaver自动帮你创建了一个应用开发的模版。
把这个模版保存在刚才创建的站点中,并命名为index.html
不可思议的事情发生了,Dreamweaver自动把JQuery和PhoneGap框架所需要的所有Javascript文件全部拷贝到了该站点中!
下面我们就可以开始看看这个index.html在手机模拟器中是什么样子了。
调试应用程序变得非常的容易:
可以在已安装的浏览器中预览;
可以选择在Device Central 内预览;
0_132776463170A1.gif
2012-2-7 01:36:56 上传下载附件 (12.84 KB)
如下图所示:一个简单的html页面在模拟器中摇身一变,成了很专业的手机应用程序。这些都得益与JQuery Mobile框架内置的控件。
0_1327764679Zduq.gif
2012-2-7 01:36:56 上传下载附件 (32.69 KB)
让我们看看在Android模拟器中是什么样子的吧:
点击Dreamweaver内的“站点/移动应用程序/生成和模拟”就可以启动模拟器来加载这个应用程序:
0_1327764718Zg8Y.gif
2012-2-7 01:36:56 上传下载附件 (16.36 KB)
0_1327764737Q19Q.gif
2012-2-7 01:36:56 上传下载附件 (16.21 KB)
最后提示生成成功:
0_1327764784PB9i.gif
2012-2-7 01:36:56 上传下载附件 (20.18 KB)
更不可思议的事情发生了!Dreamweaver自动把你的应用打包成可以在真实手机上安装的安装包,并保存在桌面上!你可以在相关文件夹内的Bin文件夹中找到 “应用程序名称-debug.apk”文件,这个就是安装包了。你可以把你安卓平台的手机连接电脑的USB口(充电器去掉充电器的头就是数据线了),把这个文件拷贝到你手机的SD卡里,就可以点击安装。
这里需要说明一下: 这个文件是debug模式的文件,只能通过SD卡安装在自己手机上自娱自乐,如果需要上传到应用商店,你还需要给这个文件签名。
非常的遗憾,目前Dreamweaver还无法实现自动签名,Dreamweaver似乎也意识到这一点,生成的安装包是支持Eclipse导入的。你可以用Eclipse把安装包导入,重新导出一个签名的安装包即可。
这时候,你可以在模拟器找到你预先定义的图标,用鼠标点击模拟器进入你的应用了。
0_13277648243iGm.gif
2012-2-7 01:36:56 上传下载附件 (36.46 KB)
0_1327764851miLC.gif
2012-2-7 01:36:56 上传下载附件 (26.55 KB)
注:手工安装apk到模拟器的方法:
把生成的apk拷贝到 C:Program FilesAndroidandroid-sdkplatform-tools 目录下。
点击开始/运行,输入CMD进入DOS,一路CD到C:Program FilesAndroidandroid-sdkplatform-tools
输入Adb install 你的应用名称.apk,如下图所示:
复制代码
0_1327764888fX3m.gif
2012-2-7 01:36:56 上传下载附件 (13.48 KB)
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
使用jQuery Mobile + PhoneGap 开发Android应用程序
PhoneGap将Web应用封装成一个可安装的App,使得开发者无需掌握复杂的原生语言(如Java或Swift),即可实现跨平台的移动应用开发。“校园助手”App就是通过PhoneGap将基于Web的界面打包成Android或iOS应用,使其能在...
这个项目标题揭示了一个使用三种技术栈构建的移动应用程序:Android、PhoneGap和jQuery Mobile。Android是Google主导的开源操作系统,主要用于智能手机和平板电脑;PhoneGap是一个开放源代码框架,允许开发者使用...
而Android应用开发则需熟悉Eclipse等开发环境的搭建。 此外,jQuery Mobile 是一个强大的移动设备友好的前端框架,虽然不是PhoneGap的必需部分,但它能极大地提升应用的外观和用户体验。jQuery Mobile 提供一套预定...
PhoneGap+jQueryMobile开发Android应用实例,搭建开发环境
用PhoneGap+jQueryMobile开发Android应用实例,很好的android开发学习教材。
PhoneGap 是一个跨平台的移动应用开发框架,允许开发者使用 HTML、CSS 和 JavaScript 语言开发移动应用。 PhoneGap 支持多种移动设备平台,包括 Android、iPhone 和 BlackBerry 等。 二、安装 PhoneGap 要安装 ...
在移动应用开发领域,PhoneGap是一个非常流行的框架,它允许开发者使用HTML、CSS3和JavaScript来构建跨平台的原生应用程序。PhoneGap基于Apache Cordova,将Web技术与Android等操作系统紧密集成,使得开发者可以利用...
### jQuery Mobile和PhoneGap集成开发 #### jQuery Mobile介绍 jQuery Mobile是一个针对移动设备优化的HTML5框架,用于构建响应式网站和应用程序。它是jQuery库的一个扩展,利用了jQuery的核心特性,并针对触控屏...
Android+Jquerymobile+PhoneGap的项目实例,包括 用这些 js UI实现的 滑屏、触摸、禁横屏、滚动特效。绝对经典,技术绝对齐全, 绝对适合你学习。想学手机软件开发的人,必须选择我的资源, 与我一起进步!!!
PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速...使用PhoneGap只比为每个平台分别建立应用程序好一点点,因为虽然基本代码是一样的,但是你仍然需要为每个平台分别编译应用程序。
本教程主要涉及的是使用Eclipse、Android SDK、JDK和PhoneGap搭建一个完整的移动应用开发环境,特别是针对Android平台。PhoneGap是一种开源框架,它允许开发者使用HTML5、CSS3和JavaScript来创建跨平台的移动应用...
PhoneGap和jQuery Mobile是两种非常重要的移动应用开发技术,它们结合使用可以构建跨平台的混合应用程序。PhoneGap是由Adobe开发的一个开源框架,它允许开发者使用HTML、CSS和JavaScript来创建原生的移动应用,而...
PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速...使用PhoneGap只比为每个平台分别建立应用程序好一点点,因为虽然基本代码是一样的,但是你仍然需要为每个平台分别编译应用程序。
总的来说,"PhoneGap+jQuery Mobile汇率计算器"实例展示了如何将Web技术应用于移动开发,利用PhoneGap实现跨平台能力,利用jQuery Mobile提升用户体验。通过学习和实践这个实例,开发者不仅可以掌握这两种技术的基本...
PhoneGap和jQuery Mobile是两种非常重要的移动应用开发技术,它们结合使用可以构建跨平台的、交互性强的原生感观应用程序。在这个“phonegap+jqueryMobile例子”中,我们将深入探讨这两个工具如何协同工作,以及如何...
PhoneGap+jQuery示例项目是一个将这两者结合的实践应用,旨在帮助开发者了解如何使用PhoneGap框架和jQuery库创建跨平台的移动应用程序。PhoneGap是一个开放源代码的开发框架,它允许开发人员使用HTML、CSS和...