Dreamweaver CS6配置Phonegap运行环境介绍

转自：http://code-tech.diandian.com/post/2012-12-07/40046971070

近段时间对移动应用开发有点兴趣，不过不是开发移动应用软件，只是开发网站APP，网站APP制作流程很简单：首先在PC上用HTML,CSS,JavaScript制作好你的网站，当然这个网站和我们平时见到的网站有区别，你需要用到一些比较方便的web移动应用开发工具，让你的网站看上去很牛逼，在这里我就不多介绍这些工具，因为...浪费时间，同时对于这些工具我也没有一个一个的去试用，试用一个最少也要花上半个月的时间，所以就算了...我用的最多的是jQuery mobile，如果你有兴趣的话，你可以去这个网站看看：
http://www.gbin1.com/technology/jquerymobile/20120824-mobile-apps-solutions/（编辑这段话的是，我突然感觉QQ空间的这个编辑器好垃圾....完全不人性化）

       在这里我也顺便介绍一下Phonegap（这个是我自己对Phonegap的理解，因为没有深入研究，如有错误请之指出），因为这玩意是我们做网站APP用的关键东西，因为你不可能每次写好一个样式，然后弄到手机上去看啊，那太麻烦了，所以Phonegap就为我们提供了一个模拟平台，它可以帮你在PC机上模拟出安卓系统，当然，首先你要安装一个Android SDK，你可以下载：installer_r21-windows.exe，建议下载这个，因为官网下载Android SDK我不会用,,,,installer_r21-windows.exe这个里面有一个下载工具可以下载到不同版本的SDK



我在这个里面安装的4.2，4.0，2.3.3版本的，因为这三个都是比较主流的

OK，还要准备Dreamweaver CS6，这个是必须的，破解的话，百度之，很多破解方案。

下载就开始配置运行环境：

首先安装好CS6后，咱们就来点击菜单栏上的“站点”，如图：



然后选择 Phonegap Build服务，如图：




点击Phonegap Build 配置后，会弹出下图：



这个时候我们之前安装的Android SDK 就起作用了，亲，看，第一个框上面写的就是Android SDK 位置，也就是你刚才安装Android SDK的目录，我安装在D:Program Filesandroidandroid-sdk里面的，我想你们也应该是的，因为没人会在自己电脑上把这些玩意安装到C盘，所以我对网上一些环境配置教程其实很愤怒...都是安装到C盘，有些新手刚开始的时候不知道怎么操作，然后跟着安装到C盘了...然后...电脑就经常运行死机，你们懂的...当然，我不懂那些高手的想法...我是按照新手的路数在写这个图文教程。最后废话一句：我很喜欢图文教程，因为视频我会看着看着就睡着了....全部都是文字我又看不下去，所以，以后如果有机会我会写更多的图文教程，不过对于这个我不敢保证时间。骚瑞啦，亲们...

然后这个时候把目录保存好，这个时候我对Adobe这个公司有意见了，你说保存的时候总该有点提示吧，他这个保存一点提示都没有...来点验证也行啊，靠，我开始弄的时候我以为出问题了才没提示的，后来发现尼玛，原来没有问题才没有提示，不过如果有错的话，错误会在上面显示的

保存好了之后就要开始新建站点了，先把站点建完，我等会再说怎么让页面在模拟器中显示




选择新建站点，然后：



站点名称你们自己选择，还有本地站点文件夹自己来选择啊，不要随便弄一个啊，你会忘记目录的，下面的 本地站点文件夹你可以把中间的未命名站点2改成自己想取的名字就OK了，DW会自动的生成一个文件夹的

新建完了之后呢，就要新建文档了：



文件-->新建



在这里的话按照我图上的选择，不过在中间的示例页选择中只要不选择CDN就OK了，其它的两个说实话...我没研究区别...然后点击创建，这个时候呢，DW会自动生成一个HTML文件，不要以为这样就成功了....在这个时候，你按ctrl+s把这个页面会自动的保存到你的站点目录下面，这个时候要把文件名改成index.html，因为模拟器貌似只认index.html...有优先级选择的



然后会自动的弹出一个窗口，复制相关文件，选择复制



然后这个站点就建立完毕了...亲，把你的视线移到右下角，你会发现这个：



我的站点名是mob，目录是F:mob

这个时候呢，你会看到这个窗口：




不过气馁，亲，DW是一个神奇的软件

抬起头，看看上面，在代码，拆分，设计旁边有一个实时视图，点击鼠标邮件，你会看到一个非常让你有成就感的页面：




和手机上的效果差不多吧？如果觉得效果简单..那就需要你自己来写代码了，在这里我想说一下，不要指望傻瓜式软件，如果有傻瓜式的软件，那你做前端的人靠什么吃饭呢？傻瓜都能做网站，傻瓜都能做网站APP，傻瓜都能做应用，那你吃什么？那你对谁吹牛逼？技术屌丝就是靠技术来接近女神的，如果女神都能自己做了，那屌丝靠什么逆袭高富帅？我这个技术屌丝就是在大学靠装系统钓上了现在老婆。所以，屌丝们，努力点，女神在前面等待你...或许你牛逼了，女神就是女神经病了...

说明一下，DW怎么就能展示这样的效果呢？主要是因为DW在自己的身体中加上了WebKit，DW也喜欢加技能...


如果你觉得这样看没意思，你可以选择，选择浏览器来展示这个页面的效果，最好是谷歌，IE神马的就算了...

这个时候你心里面肯定在想：这样就完了啊？那 Phonegap 呢？我没看到它出来啊。
不要紧，亲，马上就来了...

现在我们要重新点击“站点了”：




看着上图的选项来选择Phonegap服务

点击后会弹出一个窗口：




在这里你可能会选择注册，但是我测试了一个早上...我发现有问题，当你点击注册之后会跳转到Adobe的官网，然后你会注册帐号，这个时候你就做错了，正确的做法是：在安装DWCS6的时候你用一个邮箱和密码注册了一个AdobeID来选择试用或者是安装Dreamweaver CS6，在这里，你选择要使用这个邮箱和密码来登录。

上面的过程我想肯定会有人开始纠结了...因为忘记了.... ，这个我也木有办法了啊，亲，努力试试啊...

登录有点慢，稍微等一下就好了

登录成功后这个时候会跳到一个界面：


选择继续

点击继续后，会弹出



注意，不要以为一开始就是绿色的，点击继续后本身是想IOS那样是灰色的，然后点击重新生成应用程序后，然后等待一下，这里是看网速的，然后就慢慢加载完后就变成绿色的了

然后点击一下安卓的那个绿色的向右的箭头，这里要注意，因为我安装的是安卓的SDK,所以点击安卓，如果你安装的别的SDK，你就要选择别的

点击之后就弹出这个窗口




在这里的时候你就要选择你之前下载的安卓版本了，我的是4.2的，选择完后就点击创建AVD，看到下面的内容框中加载完后，点击启动



又在加载...



稍等一下，就会弹出模拟器




每一个

到这里的时候比较慢，要稍等大概5分钟左右，不要心急，心动就在后面



OK，加载完毕，现在可以用鼠标操作这个手机了，

开始是英文版的，你可以在里面改成中文版的



如果你想在这个手机看到你做的页面的效果，就要点击这个图标



OK，结束，这些都是我的操作，中间可能会有很多问题，如果有问题的话，欢迎沟通，交流...