Cordova封装WepApp

基于cordova的butterfly应用

Apache Cordova是一套设备API，允许移动应用的开发者使用JavaScript来访问本地设备的功能，比如摄像头、加速计。它可以与UI框架（如jQuery Mobile或Dojo Mobile或Sencha Touch）等相结合使用，这些UI框架可以使用HTML、CSS和JavaScript开发智能手机应用。

下文以结合butterfly框架开发android平台应用为例。

Android开发环境搭建：JDK，ANT，SDK

Java Develop Kit

1. 下载地址：http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk8-downloads-2133151-zhs.html
   建议保持原始安装路径

2. 配置环境变量：我的电脑----属性-----高级----环境变量
   在系统变量新建：JAVA_HOME
   值是:C:\Program Files\Java\jdk1.8.0_31
   然后在用户变量PATH里加入：;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

注：具体的安装路径和jdk版本可根据实际情况作相应的修改。

ANT

• 1.下载地址：http://ant.apache.org/bindownload.cgi
  解压可用

• 2.配置环境变量：我的电脑----属性-----高级----环境变量
  首先在系统变量新建：ANT_HOME
  值是你解压的路径，如：D:/apache-ant-1.9.4-bin
  然后在用户变量PATH里加入：;%ANT_HOME%\bin

• 3.检查是否安装成功打开cmd命令窗口,输入:
  ant -version
  如果显示如下,则说明成功安装(不同的版本号可能显示不同)
  Apache Ant(TM) version 1.9.4 compiled on April 29 2014

Android SDK

• 1.官网下载地址：http://developer.android.com/sdk/installing/index.html
• 2.安装教程可参考：http://www.androidcentral.com/installing-android-sdk-windows-mac-and-linux-tutorial

如果你对于2013年Google I/O 大会首次发布了Android Studio IDE（Android平台集成开发环境）无感，你可以在下面的地址下载
http://www.cnblogs.com/bjzhanghao/archive/2012/11/14/android-platform-sdk-download-mirror.html解压即可用，配置对应环境变量。
在系统变量新建：ANDROID_HOME,值是D:\adt-bundle-windows-x86_64-20140321\sdk
然后在用户变量PATH里加入：;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

安装教程可参考:http://jingyan.baidu.com/article/d621e8da0999062865913f3b.html

注：修改了PATH后需要重启cmd才可以生效。如果还不行，可以再重启电脑。如果还不行，认真按着步骤排查一下哪里出错。

移动设备部署-Cordova

cordova 安装与配置官方链接：http://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

1、安装移动应用开发框架cordova

安装命令：
npm install -g cordova
ok，测试安装结果命令：
cordova -v

2、创建新Cordova App

这里创建一个命名为HelloWorld，id为com.example.hello的app，放在hello文件夹下：
cordova create hello com.example.hello HelloWorld

3、添加/删除移动设备平台

添加Android平台
cordova platform add android
注意：类库下载时间可能较长，请耐心等待。

查看已添加以及可支持添加的平台：
cordova platforms ls

删除具体平台的项目文件，命令如下：
cordova platform rm amazon-fireos
cordova platform remove android

添加之后会./hello/platforms下的目录，增加一个相应平台的目录，而删除平台的话，也会将这个目录删除。**慎重**

4、添加/删除插件(强烈建议使用命令行增删插件)

官方提供的plugin API:
http://cordova.apache.org/docs/en/4.0.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs
以camera为例
添加
cordova plugin add org.apache.cordova.camera
删除
cordova plugin rm org.apache.cordova.camera

5、将已有的butterfly项目整合到新建的cordova项目中

1. 将根目录/www/下的所有文件删除，把你的网页代码项目拷贝进去。
2. 修改配置文件config.xml,将src的路径改为你网页代码项目的入口文件的路径。

6、编译Corodava 工程

cordova build
编译./hello/platforms下所有平台工程，如果单独编译其中的平台，需要在build上增加该平台名即可。
cordova build　android
编译时间较长，最后输出build successful,则表示项目编译无误。
实际上，build命令是prepare 以及compile两条命令的缩写。上面这条命令相当于：
cordova prepare android
cordova compile android

7、运行Cordova工程

1). 运行至模拟器：

cordova emulate android
但是，查资料说Windows下convert命令冲突，直接“cordova emulate android”会报Error: spawn ENOENT，需要先启动模拟器。

2). 浏览器上运行：输入下面命令：

cordova serve android
然后在浏览器中输入http://localhost:80　即可看到支行情况。
注:可以打开多个cmd运行同一个app，但是端口会8000开始+1；

3). 设备上运行：插入usb，输入下面命令：

cordova run android

远程调试工具--weinre

iOS工程可以直接使用Safari进行远程调试(可以调过本节教程)
具体使用方法如下https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html1. 安装：打开git bash或cmd,输入命令npm install -g weinre

1. ipconfig 查看本机IP地址

设备要和PC处于同一个局域网中

1. 绑定的ip为pc的ip地址如 weinre --httpPort 80 --boundHost 192.168.51.1
   端口这里可以随意定，我这里习惯绑定80.运行了这行命令之后，要一直开着这个窗口。如若要输入其他命令，可另外再开一个窗口。

2. 把<script src="http://192.168.51.1:80/target/target-script-min.js#anonymous"></script>添加在要测试的html文件上

3. 把项目安装在手机，点击浏览，pc浏览器打开可以查看对应代码。
   http://192.168.51.1:80/client/#anonymous