在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

时间:2022-03-23 21:06:37

移动设备应用开发有多难,只要学会HTML5+Javascript就可以。用Dreamweaver5.5+PhoneGap+Jquery Mobile搭建移动开发环境,轻轻松松开发你自己的应用。让你用普通的web技术编写出能够轻松调用API接口和进入应用商店的HTML5应用开发平台。

安装Dreamweaver5.5

这里要注意,Dreamweaver5.5的内部版本需要5344,也就是目前最新的版本。现在一般网上下载的都是5315,破解后可以用软件自带的更新到5344。

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

破解的方法如下:

用记事本打开 C:\windows\system32\drivers\etc\ 目录下的 hosts 文件, 在末尾加上以下几行

127.0.0.1 activate.adobe.com 
127.0.0.1 practivate.adobe.com 
127.0.0.1 ereg.adobe.com 
127.0.0.1 activate.wip3.adobe.com 
127.0.0.1 wip3.adobe.com 
127.0.0.1 3dns-3.adobe.com 
127.0.0.1 3dns-2.adobe.com 
127.0.0.1 adobe-dns.adobe.com 
127.0.0.1 adobe-dns-2.adobe.com 
127.0.0.1 adobe-dns-3.adobe.com 
127.0.0.1 ereg.wip3.adobe.com 
127.0.0.1 activate-sea.adobe.com 
127.0.0.1 wwis-dubc1-vip60.adobe.com 
127.0.0.1 activate-sjc0.adobe.com

注册我用的是1192-1756-8921-7408-0509-4870,不行的话大家网上搜下吧。运气好的话很快就能搜到适用的。

安装Android SDK

这里有两种方法可以安装Android SDK。

  • 方法一:在Dreamweaver5.5中选择站点->移动应用程序->配置应用程序框架,在弹窗中先选择安装路径,再点击简易安装。这个方法我一直无法实现,不是说目录不行就是说我没连internet。
  • 方法二:去android下载SDK自己安装,然后再在“配置应用程序框架”中选择SDK的路径就可以了。注意安装前需要很安装JDK,路径中不要有中文和空隔。用这种方法的千万别点简易安装,如果点了话,它会把你原有Android SDK给删除了

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

不管用哪种方法,在安装完SDK后,就在“站点->移动应用程序->配置应用程序框架”选择SDK的安装路径,然后点“保存”。

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

新建项目

先新建站点,点击“站点->新建站点”,输入你自己站点名称,以及本地站点文件夹路径,然后保存。如图所示

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

然后点击“站点->移动应用程序->应用程序设置”。在弹窗中设置应用程序相关信息后保存,如图所示

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

填写完成后,点击“管理AVD”,在弹出的“Android SDK Manager”中根据自己的需要安装相应的SDK,如图所示。

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

安装后再在“Android SDK Manager”对话框中选择“TOOLS -> Manage AVDS...”。

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

在弹出的“Android Virtual Device Manager”中,点击右侧的“Start->Launch”,启动Android虚拟机,后会弹出一个手机的模拟器。

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

注意不要关掉,不然后面在操作“生成和模拟”的时候可能会出现“Dreamweaver无法在模拟器中打开XXX”,如图

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

建立第一个应用

在Dreamweaver中点击“文件->新建”,在弹出的新建文档对话框中选择“示例中的页->Mobile起始页->jQuery Mobile(PhoneGap)”,然后点创建。如图所示

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

把新建的HTML页面保存到站点,点击“保存”。在弹出的“复制相关文件”对话框,选择“复制”。如图所示

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

选择“站点->移动应用程序->生成和模拟->Android”来等待程序打包并发布到模拟器。如图所示

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

如果这步出现“Dreamweaver无法在模拟器中打开XXX”,是因为你的模拟器没有先打开,再做一次“站点->移动应用程序->生成和模拟->Android”就可以在模拟器中打开项目了。如图

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境