zoukankan      html  css  js  c++  java
  • 安装配置PhoneGap开发环境(二)——使用Cordova取代PhoneGap创建项目

    1 Cordova是谁

        PhoneGap官方文档说的非常清楚。CordovaPhoneGap的引擎,这两者的关系类似于WebKitChrome浏览器的关系。所以一些核心的基础操作对于CordovaPhoneGap是相通的。有时候使用PhoneGap创建project的会出现一些莫名的问题,推荐使用Cordova创建

    2 下载PhoneGap与Cordova

        略。

    《安装配置PhoneGap开发环境(一)》

    3 使用Cordova创建PhoneGap项目

        查看当前平台的Cordova版本号:

        cordova -version

        

        创建项目:

        cordova create my_project "org.yhd.helloworld" "HelloWorld"

          

        进入项目:

        cd my_project

        

        加入Android平台支持:

        cordova platform add android

        

        生成项目:

        cordova build

        

        后面会打印出一堆信息。最后提示:

        

        Ok!成功了。然后就能够使用模拟器执行:

        cordova emulate android

        注意这时候使用的是默认模拟器。假设你想指定模拟器来执行项目,则须要首先找到emulate.exe。然后启动制定的模拟器:

        emulator.exe -avd "moniqi"

        这里注意一定要等模拟器启动完成后,再执行项目:

        cordova emulate android

        

        成功后有提示:

        

        在模拟器中能够看到效果:

        

        注意到提示画面没?使用Cordova创建的项目提示信息为“APACHE CORDOVA,而假设使用PhoneGap创建的项目提示信息则为“PHONEGAP”。图片也从PhoneGap的飞行机器人变成了Cordova的小盒子。欢迎信息略有不同,只是项目效果都是一样的。

    4 建立eclipse项目

    4.1 导入project到eclipse

        在Eclipse中点击:

        File -> import

        选择选择:

        Android -> Existing Android Code Into WorkSpace:    

        出现:

        

        选择号项目路径之后,出现project信息。保持都选中。点击“Finish”:

        

        当中“HelloWorld”就是我们的主project。

    4.2 更改目录

        打开“HelloWorld”project文件夹,能够看到:

        

        注意看文件夹“www,这个文件夹事实上并不真正位于project文件夹下,而是从别的文件夹链接过来的,右键->Properties

        

        点击“Edit”,出现:

        

        能看到位置位于:

        ${PARENT-2-PROJECT_LOC}www

        这里我们详解一下这个“www”目录的位置,如果我们使用“Cordova”命令创建的project位于:

        D:Studyingphonegapmy_project

        当我们为这个project加入了Android支持并编译后,这个Androidproject实际位于

        D:Studyingphonegapmy_projectplatformsandroid

        这也是我们的eclipseproject“HelloWorld”的实际路径。能够右键project->Properties:

        

        这才是project的实际路径。那么好了。前面看到的:

        ${PARENT-2-PROJECT_LOC}www

        是什么意思呢?

        事实上,“${PARENT-2-PROJECT_LOC}”表示project往上两级文件夹,也就是:

        D:Studyingphonegapmy_project

        所以上面的“www”目录位于:

        D:Studyingphonegapmy_projectwww

        打开项目一看。这个路径下还真有一个“www”目录:

       

        只是要注意的是。当我们执行这个Androidproject。成功看到欢迎界面的时候,事实上展示的是“www”目录里的文件:

        index.html

        而这个“index.html”,却并不位于刚才的路径下。而是在:

        D:Studyingphonegapmy_projectplatformsandroidassetswww

        之下,看一下里面的内容:

        

        看到了吧,跟刚才的目录内容稍有不同。这才是“庐山真面目”。项目的“www”目录,事实上调用的应该是这里的资源。所以我们须要在项目中更改原有“www”目录的链接为:

        ${PARENT-2-PROJECT_LOC}platformsandroidassetswww

        指向“庐山真面目”,我们在eclipse中才干更准确的开发呀。

    4.3 设置编码

        在导入project之前,workspace的编码必须设置为“UTF-8”才行。否则导入project可能会出现故障。能够通过Window-> Preferences,打开首选项:

         

        设置完成后。我们来測试一下。在index.html文件里加入JavaScript片段

    	document.addEventListener("deviceready", onDeviceReady, false);
            
    	function onDeviceReady() {
    	      alert("这是PhoneGap測试程序");
    	}
    

        假设发现执行后的project中还出现了乱码:

        

        这时还须要在页面中加上编码解析信息在<head>标签中增加

        <meta charset="utf-8">

        执行看一下效果:

        

        可以看到文字显示信息正常了。

    至此使用Cordova搭建基本PhoneGap开发环境就讲完了。





  • 相关阅读:
    几个前端时间插件总结
    微信支付——退款篇
    getTime()方法在苹果系统的bug
    【转载】[JS]让表单提交返回后保持在原来提交的位置上
    【转载】 IE/Firefox每次刷新时自动检查网页更新,无需手动清空缓存的设置方法
    webstorm相关设置
    检测无标题的
    数组去重的方法
    Git 版本比较
    Git 回到过去
  • 原文地址:https://www.cnblogs.com/llguanli/p/6760693.html
Copyright © 2011-2022 走看看