iOS Android phonegap 3.X 开发经历及过程中出现的问题

            最近，做了一个phonegap的项目开发，在这里只讲述phonegap的配置问题。

          刚开始在phonegap的官网上下载了phonegap 2.9的版本进行配置然后进行开发，中间没有遇到什么问题，因为phonegap以前的版本中所需要的类库都打包在phonegap中，直接把html拷贝到项目，修改配置文件就可以使用。

         在开发的过程中碰到了一个问题，就是通过iframe展示的页面无法调用phonegap的功能，后来通过其他方式实现了前台，解决了这个问题。

        在发布的时候也遇到了一个问题，就是phonegap2.X的版本不支持苹果arm64架构，在提交的时候无法提交。在网上找了一下，发现phonegap3.4版本及其以上都可以支持arm64架构，然后我们来讲述从phonegap2.X版本升级到phonegap3.X版本中遇到的问题。

        因为我们在phonegap中没有开发太多的功能，所有的功能都是在html中实现，所以，我放弃升级方案，直接创建新的phonegap框架，然后把phonegap的html及其配置替换即可。

          操作系统：MAC OS 10.10.3

          配置版本：phonegap3.8

          配置方式：phonegap命令 或者 Cordova命令 均可

        在这里我们讲解下phonegap和 Cordova的关系

          Apache Cordova是PhoneGap贡献给Apache后的开源项目，是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎。你可以帮他想象成类似于Webkit和Google Chrome的关系

          配置步骤如下：

 官方文档：http://docs.phonegap.com/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

        1.安装Cordova

         首先要安装2个工具包   

       （1）Node.js 安装地址：https://nodejs.org

       （2)  git client 安装地址：http://git-scm.com

         然后在终端输入命令：

          $ sudo npm install -g cordova 这一步速度比较慢，可能会花费半个小时，要耐性等待，在终端会有一些警告，不用管它，这个事没有问题的

          2.创建项目

          终端输入命令：

          $ cordova create [目录] ［Bundle Identifier］ ［项目名称］例如：$ cordova create hello com.example.hello HelloWorld

         

         3.进入当前项目

          终端输入命令：

          $ cd ［项目路径］ 

          4.添加平台

          终端输入命令：  

          $ cordova platform add ios
          $ cordova platform add amazon-fireos
          $ cordova platform add android
          $ cordova platform add blackberry10
          $ cordova platform add firefoxos         

         用到那个平台添加哪个

        

          5.把你html放在项目的www目录下，修改项目的配置文件

          6.build你创建的项目终端输入命令：  

          终端输入命令：  

          $ cordova build

          $ cordova build iOS   

           

         7.添加插件

           phonegap3.X后的版本不在附带全部的phonegap功能，都是以插件的形式安装进项目

          添加命令如下：

          终端输入命令：  

          cordova plugin add ［插件名称］

          

       基础插件库如下：

• Basic device information (Device API):

  $ cordova plugin add org.apache.cordova.device

• Network Connection and Battery Events:

  $ cordova plugin add org.apache.cordova.network-information$ cordova plugin add org.apache.cordova.battery-status

• Accelerometer, Compass, and Geolocation:

  $ cordova plugin add org.apache.cordova.device-motion$ cordova plugin add org.apache.cordova.device-orientation$ cordova plugin add org.apache.cordova.geolocation

• Camera, Media playback and Capture:

  $ cordova plugin add org.apache.cordova.camera$ cordova plugin add org.apache.cordova.media-capture$ cordova plugin add org.apache.cordova.media

• Access files on device or network (File API):

  $ cordova plugin add org.apache.cordova.file$ cordova plugin add org.apache.cordova.file-transfer

• Notification via dialog box or vibration:

  $ cordova plugin add org.apache.cordova.dialogs$ cordova plugin add org.apache.cordova.vibration

• Contacts:

  $ cordova plugin add org.apache.cordova.contacts

• Globalization:

  $ cordova plugin add org.apache.cordova.globalization

• Splashscreen:

  $ cordova plugin add org.apache.cordova.splashscreen

• Open new browser windows (InAppBrowser):

  $ cordova plugin add org.apache.cordova.inappbrowser

• Debug console:

  $ cordova plugin add org.apache.cordova.consol

        附带上我在开发中遇到的屏幕适配问题：

• Basic device information (Device API):

  $ cordova plugin add org.apache.cordova.device

• Network Connection and Battery Events:

  $ cordova plugin add org.apache.cordova.network-information$ cordova plugin add org.apache.cordova.battery-status

• Accelerometer, Compass, and Geolocation:

  $ cordova plugin add org.apache.cordova.device-motion$ cordova plugin add org.apache.cordova.device-orientation$ cordova plugin add org.apache.cordova.geolocation

• Camera, Media playback and Capture:

  $ cordova plugin add org.apache.cordova.camera$ cordova plugin add org.apache.cordova.media-capture$ cordova plugin add org.apache.cordova.media

• Access files on device or network (File API):

  $ cordova plugin add org.apache.cordova.file$ cordova plugin add org.apache.cordova.file-transfer

• Notification via dialog box or vibration:

  $ cordova plugin add org.apache.cordova.dialogs$ cordova plugin add org.apache.cordova.vibration

• Contacts:

  $ cordova plugin add org.apache.cordova.contacts

• Globalization:

  $ cordova plugin add org.apache.cordova.globalization

• Splashscreen:

  $ cordova plugin add org.apache.cordova.splashscreen

• Open new browser windows (InAppBrowser):

  $ cordova plugin add org.apache.cordova.inappbrowser

• Debug console:

  $ cordova plugin add org.apache.cordova.console

           附带上我在开发中js适配机器屏幕的方法：

$(function(){

  $("head").append("<meta name='viewport' content = 'width = device-width, initial-scale = " + (window.screen.width/document.body.scrollWidth).toFixed(3) + ", minimum-scale = 0.5, maximum-scale = 5' />");

})

     希望给大家带来帮助，想了解更多开发知识，请关注我的微信公众账号。

长按上面的二维码，点击“识别图中二维码”即可关注“IOS开发精选”。关注后您就可以享受到我们为您免费提供最新的IOS开发信息。