首页 > 代码库 > 关于DreamWeaver CS6.0 + PhoneGap 之移动开发环境搭建

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

Html5已经逆袭了移动开发,最近有幸布置PhoneGap的环境搭载。事实上本人并不会Html以及JS或者JQuery,为了顺应Html5的风暴,还是稍稍的玩转了一下。

CS5.5搭建相对CS6.0来说比較人性化。后者基于新的模式,刚開始上手的确有点困顿,只是呢,今天我们就来了解下怎样在CS6.0上顺利的玩转PhoneGap。

 

 

             关于Android的SDK的开发环境就不在这里介绍了。各位百度搭建吧。

配置好了SDK之后还是建议在Eclipse中创建AVD模拟器,并首次执行下。

DreamWeaver毕竟不是专业做这个的,先期肯定会有一点不如意的东西。

可是对于强大的Html5的效果来说,这点小Bug都不是问题。

 

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

       1> DreamWeaver CS6.0

       

        ①新建一个网站

                     技术分享

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

                 技术分享    ------->技术分享

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

                         技术分享

                   上面的Android哪里选择你的Android SDK的文件夹,直接点击保存就能够了。最让人无法接受的是你点击保存时没有不论什么提示的,事实上这个时候已经保存成功了,第一次楼主表示中枪倒地。

            

         ③ 创建网站里的project,事实上也不是叫做project了。只是是我的一个习惯罢了。

              文件-->新建-->如图所看到的:

                  技术分享

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

        ④ 以下选择  网站-->PhoneGap Build服务-->PhoneGap Build 服务。左边的栏目回进入例如以下框体中:

                       技术分享

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

                                                              技术分享

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

                                       技术分享

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

            技术分享

                     点击里面的蓝色字体。进入还有一个网页会出现下列注冊图样:

                                              技术分享

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

 

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

                                    技术分享

                    别激动,距离成功的步伐已经非常近了。这里出现这个界面表示载入并没有完成,只是你也不要等了,CS6.0不会帮你载入,这个时候呢。就须要手工来操作了,直接点击底部的:又一次生成应用程序也就是刷新的那个button,只是让人想不通的是,它会从底部网上载入。我一直都特郁闷这是为什么!

这个能够是第十万还有一个为什么吗?。只是总算在最后曲曲折折的一路走了过来。

让我们来看看载入完的样式是什么样的:

                                    技术分享

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

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

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

             点击第一个箭头button即可了。其它的后期调试再用。

载入完之后会是显演示样例如以下界面:

                                    技术分享

              由于在Eclipse里面已经创建了AVD模拟器,所以在这里它会自己主动寻找到,只是也能够在以下的AVD管理器里面新建。这里就不在介绍了。以下我们启动模拟器,楼主没有測试模拟器启动的时候。CS6是不是会直接安装APK执行,这个各位能够去尝试下。 毕竟非常多调试须要在真机上面做的。

 

         ⑧ 假设启动完之后没有在AVD模拟器里面生成下图中的软件的话。这个时候上图中的启动button时不可点击的,就须要关闭掉模拟器。在又一次启动。普通情况下第二次启动AVD模拟器就会有以下这个软件:

                                                                                 技术分享

                     执行图:

                                                                                技术分享

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

技术分享

这里就能够改动程序的版本号。图标,包名之类的信息,只是看起来真是不爽。也能够在网站的根文件夹下去用其它工具去改动。

 

       搭建过程顺利完工了,预祝各位开发顺利!

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