关于DreamWeaver CS6.0 + PhoneGap 之移动开发环境搭建

Html5已经逆袭了移动开发，近期有幸布置PhoneGap的环境搭载，其实本人并不会Hteml以及JS或者JQuery，为了顺应Html5的风暴，还是稍稍的玩转了一下。CS5.5搭建相对CS6.0来说比较人性化，后者基于新的模式，刚开始上手的确有点困顿，不过呢，今天我们就来了解下如何在CS6.0上顺利的玩转PhoneGap。



博客地址：http://blog.csdn.net/ALoveBtoC



关于Android的SDK的开发环境就不在这里介绍了，各位百度搭建吧。配置好了SDK之后还是建议在Eclipse中创建***D模拟器，并首次运行下。DreamWeaver毕竟不是专业做这个的，先期肯定会有一点不如意的东西。但是对于强大的Html5的效果来说，这点小Bug都不是问题。



准工作要做好，不过这里基本上不用什么：

1> DreamWeaver CS6.0

①新建一个站点




②讲设计器模式换成移动应用程序模式



------->


在CS6.0的左边会出现一个栏目框：




上面的Android哪里选择你的Android SDK的目录，直接点击保存就可以了，最让人无法接受的是你点击保存时没有任何提示的，其实这个时候已经保存成功了，第一次楼主表示中枪倒地。



③ 创建站点里的工程，其实也不是叫做工程了，不过是我的一个习惯罢了。

文件-->新建-->如图所示：




点击创建，会到保存的界面，把中间栏目里的文件名改成index.html，这个看个人喜好吧。

④ 下面选择 站点-->PhoneGap Build服务-->PhoneGap Build 服务，左边的栏目回进入如下框体中：




这里输入，你注册DreamWeaver CS6.0的时候所用的账户名跟密码，登陆成功的直接跳过第五步，出现如下界面的则说明你没有PhoneGap Build凭据，需要去注册：





⑤ 下面就是来注册PhoneGap Build凭据的步骤，在上述登陆框体中的，右上角有一个Menu小图标，点击它，然后选择里面的帮助，程序会打开一个网址，在这个网址中：





选择里面的：创建PhoneGap Build服务账户





点击里面的蓝色字体，进入另一个网页会出现下列注册图样：





点击第一个with Adobe ID，直接登录你注册DreamWeaver CS6.0的这个账户名跟密码就OK了，登录完之后PhoneGap Build凭证就注册成功，返回继续搭建环境。



⑥ 登录进去之后会是这个界面样式：




别激动，距离成功的步伐已经很近了，这里出现这个界面表示加载并没有完毕，不过你也不要等了，CS6.0不会帮你加载，这个时候呢，就需要手工来操作了，直接点击底部的：重新生成应用程序也就是刷新的那个按钮，不过让人想不通的是，它会从底部网上加载，我一直都特郁闷这是为什么！这个可以是第十万另一个为什么吗？，不过总算在最后曲曲折折的一路走了过来。让我们来看看加载完的样式是什么样的：




⑦ 1、第一个指向右方的箭头，是在程序里启动***D模拟器。

2、扫描二维码，干什么用呢？你猜。

3、第三个指向下方的箭头，是外部加载保存的APK文件。

点击第一个箭头按钮就行了，其他的后期调试再用。加载完之后会是显示如下界面：




因为在Eclipse里面已经创建了***D模拟器，所以在这里它会自动寻找到，不过也可以在下面的***D管理器里面新建，这里就不在介绍了。下面我们启动模拟器，楼主没有测试模拟器启动的时候，CS6是不是会直接安装APK运行，这个各位可以去尝试下， 毕竟很多调试需要在真机上面做的。



⑧ 如果启动完之后没有在***D模拟器里面生成下图中的软件的话，这个时候上图中的启动按钮时不可点击的，就需要关闭掉模拟器，在重新启动，一般情况下第二次启动***D模拟器就会有下面这个软件：




运行图：




⑨ 运行成功之后，会在站点里面生成一个 ProjectSettings 文件，在DreamWeaver中打开它如下：



这里就可以修改程序的版本，图标，包名之类的信息，不过看起来真是不爽，也可以在站点的根目录下去用其他工具去修改。



搭建过程顺利完工了，预祝各位开发顺利！