网页打包安卓APP流程

搜索泥称

　　搭建环境过程：
　　1. 安装JDK。
　　参见http://www.cnblogs.com/Li-Cheng/p/4334985.html。
　　注：实质上到该网址上下载好JDK安装包，安装后添加一个环境变量：
　　JAVA_HOME,其值为：C:\Program Files\Java\jdk1.8.0_73（由于安装路径不同，从路径下复制即可），然后在PATH变量中添加一个：
　　%JAVA_HOME%\bin;
　　一定要记得在Path中添加的所有路径都要以;隔开，不然可能会影响系统运行。
　　2. 安装Android SDK
　　直接下载地址：
　　http://dl.google.com/android/android-sdk_r24.4.1-windows.zip
　　页面：
　　http://www.android-studio.org/
　　下载完成后解压，放置到一个非中文路径下。
　　然后开始建环境变量:
　　ANDROID_HOME=E:\selfuse\geapp\androidsdk
　　在path中添加：
　　%ANDROID_HOME%\tools; %ANDROID_HOME%\platform-tools;
　　添加完成后并没有结束，下面才是比较关键的：
　　打开SDK Manager.exe，如果连接google失败，下载的目录中只有几个，需要在工具栏中的tools下的options，添加国内的镜像下载点：
　　mirrors.neusoft.edu.cn，端口80。打勾的选项参见下图。点击close后就会刷新出我们需要下载的内容。

　　主要需要下载的内容包括：tools选项下的所有项（实际上只下载API19以上的任意一个即可，但考虑到要和安卓6.0兼容，我们可以下载版本比较新一些的。建议全部下载下来）、安卓6.0下所有文件（其他版本可下可不下）、extra下的所有文件（建议全下，实际上只需要图示中三个，其他haxm之类的是用于电脑端模拟安卓的）。

　　3. 使用nodejs和npm包。
　　https://nodejs.org/en/download/下载下面两个中的一个即可，放于一个路径下，并在path中添加一个路径如：E:\selfuse\nodejs，然后去下载个npm包（解压后路径如下），这两个包比较小，我直接就放一起了。
　　测试是否是全局，打开 cmd，输入 node –v，测试Npm则用 npm –v。

　　4. 安装npm的包cordova
　　Cmd命令中运行npm install -g cordova
　　此时，我们就有全局的命令。后续命令操作全部在cmd中进行
　　5. 创建应用
　　Cmd中使用 cd e:\test\
　　然后 e:
　　这样我们就进入了一新用于创建应用的路径下。在该路径下运行
　　cordova create hello com.example.hello HelloWorld
　　create后面的三个是可以随便写的，其中第一个是创建的文件夹名称，不能为中文，第二个是应用的一个链接，也不能为中文 ，第三个是我们要安装后显示的应用名称，可以为中文。
　　执行该命令成功后，我们用cd命令进行创建的应用
　　Cd hello
　　进入了 e:\test\hello
　　下面所有的命令均在该路径下执行。
　　添加一个安卓应用 :
　　cordova platform add android
　　添加我们需要的插件：
　　cordova plugin add phonegap-plugin-barcodescanner
　　后面示例中使用了
　　cordova plugin add cordova-plugin-camera
　　cordova plugin add cordova-plugin-geolocation
　　cordova plugin add cordova-plugin-dialogs
　　cordova plugin add cordova-plugin-splashscreen
　　cordova plugin add cordova-plugin-device
　　这个后面插件具体可到官网上查看，也可从附件中text中复制
　　http://cordova.apache.org/plugins/
　　添加完成插件后，我们可以看到一个路径：

　　其中platforms保存了android应用，里面内容可后续在其他软件编辑。
　　www中用于存放我们构建的网页，使用build命令后会在andriod中自动复制相关文件，不要直接修改platforms\android\assets\www下的网页，在使用build命令后会把android下的文件覆盖掉，修改也无效。
　　将网页所有的文件放在www文件夹下，然后修改config.xml文件。
　　其文件代码如下：
　　<?xml version='1.0' encoding='utf-8'?>
　　<widget id="my.app.camera" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
　　<name>摄像头示例</name>
　　<description>
　　只在Play商店中使用
　　</description>
　　<author email="wenlong.yao@wellintech.com" href="http://kingview.com">
　　作者信息
　　</author>
　　<content src="index.html" />
　　<plugin name="cordova-plugin-whitelist" spec="1" />
　　<preference name="loglevel" value="ERROR" />
　　<preference name="android-maxSdkVersion" value="23"/>
　　<preference name="android-minSdkVersion" value="14"/>
　　<preference name="android-targetSdkVersion" value="23"/>
　　<access origin="*" />
　　<allow-intent href="http://*/*" />
　　<allow-intent href="https://*/*" />
　　<allow-intent href="tel:*" />
　　<allow-intent href="sms:*" />
　　<allow-intent href="mailto:*" />
　　<allow-intent href="geo:*" />
　　<platform name="android">
　　<icon src="res/fire.png" />
　　<allow-intent href="market:*" />
　　</platform>
　　<platform name="ios">
　　<allow-intent href="itms:*" />
　　<allow-intent href="itms-apps:*" />
　　</platform>
　　</widget>
　　文件中黄色体部分是需要修改的。Name标签表示我们建立的app名字,description是app描述，在Play商店中才会显示,author是作者信息，也只会在商店中显示，content表示我们打开app跳转的第一个页面，可进行修改。Icon表示我们app显示的图标。这里面的路径是工程下的文件夹路径，为添加图片可建立一个文件夹res，放置需要的图片（我偷懒了，就用了一个图标）。图标可根据屏幕密度不同选择多个，设置的方式则变为：
　　<icon src="res/android/ldpi.png" density="ldpi" />
　　<icon src="res/android/mdpi.png" density="mdpi" />
　　<icon src="res/android/hdpi.png" density="hdpi" />
　　<icon src="res/android/xhdpi.png" density="xhdpi" />
　　<icon src="res/android/xxhdpi.png" density="xxhdpi" />
　　<icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
　　Preference标签中定义了日志等级，最小SDK版本、最大SDK版本和指定的SDK版本。14表示安卓4.0版本，23表示安卓6.0版本，这一部分不设置则会有一个默认的值，也可不添加。
　　7.下面就是插件的使用及应用构建
　　插件的使用以二维码为例吧，由于bacodescanner比较特殊，需要单独引入js文件，所以我们先将barcodescanner.js复制到我们www文件夹下。

　　路径下取出插件的js文件放置到我们www文件夹下。
　　在构建的网页中引用两个文件：
　　<script type="text/javascript" src="cordova.js"></script>
　　<script type="text/javascript" src="barcodescanner.js"></script>
　　然后在body里面添加
　　<button id="btn">扫码</button>
　　调用二维码控件：
　　function inputScan(){
　　cordova.plugins.barcodeScanner.scan(
　　function (result) {
　　alert("We got a barcode\n" +
　　"Result: " + result.text + "\n" +
　　"Format: " + result.format + "\n" +
　　"Cancelled: " + result.cancelled);
　　},
　　function (error) {
　　alert("Scanning failed: " + error);
　　}
　　);
　　}

　　还有一点要注意的是：生成的示例的文件中第一个Meta要去掉，因为它禁了网页内编写js，我们这样写就会失效，如果是单独的Js文件是不影响的。
　　最后一步终于来了：
　　使用 cordova build android  --release命令来生成apk文件。如果没有报错的话就会在
　　platforms\android\build\outputs\apk
　　生成一个带签名，一个不带签名的文件。这样我们就生成了一个apk文件。基本上完成了。
　　如果是第一次打包，npm会自动下载gradle打包工具，也可以自己下载好配置一下全局变量，我就偷懒了，直接让它自己下载了。这个下载过程比较长，得耐心等待。
　　注意：如果不带有—release命令则生成的是debug版本的。正式版本是需要key的，可能使用ecsllape生成一个，在项目目录下添加了一个build.json，其内容如下：
　　{
    "android": {
        "debug": {
            "keystore": "./mykey.keystore",
            "storePassword": "www.dd.com",
            "alias": "dd.com",
            "password" : "www.dd.com",
            "keystoreType": ""
        },
        "release": {
            "keystore": "./mykey.keystore",
            "storePassword": "www.dd.com",
            "alias": "dd.com",
            "password" : "www.dd.com",
            "keystoreType": ""
        }
    }
}
　　两个文件放在工程的根目录下，此时生成apk的命令应该使用：
　　cordova build --release --buildConfig=./build.json
　　使用一次之后就会自动使用该build.json生成apk。
　　。
　　另：打包后的这个具体配置可以到官网上找，不习惯用这个生成的话可以在生成一次apk后的工程可以导入到esclipse中进行再操作，有经验可以在那个里面操作。
　　关于用chrome调试：
　　http://jingyan.baidu.com/article/db55b609fde96d4ba30a2fa9.html
　　更多关于cordova的知识进入下面网址：
　　http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
　　参考的网址：
　　http://www.4u4v.net/full-configuration-cordova-phonegap-ant-jdk-android-environment.html
　　http://jingyan.baidu.com/article/22a299b53ea2b89e19376a8d.html
　　http://blog.csdn.net/jyy_12/article/details/46416161
　　http://blog.csdn.net/linyingzhi829/article/details/50589875