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

时间:2021-11-22 17:26:06

原博客地址为:http://blog.csdn.net/alovebtoc/article/details/9315437 


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

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

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

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

       1> DreamWeaver CS6.0

       

        ①新建一个站点

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

             2、扫描二维码,干什么用呢?你猜。

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

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

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

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

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

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

                     运行图:

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

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

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

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

亲测有效!!!!!