zoukankan      html  css  js  c++  java
  • 网页打包安卓APP流程

    搭建环境过程:

    1. 安装JDK。

           参见http://www.cnblogs.com/Li-Cheng/p/4334985.html

           注:实质上到该网址上下载好JDK安装包,安装后添加一个环境变量:

    JAVA_HOME,其值为:C:Program FilesJavajdk1.8.0_73(由于安装路径不同,从路径下复制即可),然后在PATH变量中添加一个:

           %JAVA_HOME%in;

           一定要记得在Path中添加的所有路径都要以;隔开,不然可能会影响系统运行。

    2. 安装Android SDK

           直接下载地址:

           http://dl.google.com/android/android-sdk_r24.4.1-windows.zip

           页面:

           http://www.android-studio.org/

           下载完成后解压,放置到一个非中文路径下。

           然后开始建环境变量:

           ANDROID_HOME=E:selfusegeappandroidsdk

           在path中添加:

           %ANDROID_HOME% ools; %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 odejs,然后去下载个npm包(解压后路径如下),这两个包比较小,我直接就放一起了。

           测试是否是全局,打开 cmd,输入 node –v,测试Npm则用 npm –v。

     

    4. 安装npm的包cordova

           Cmd命令中运行npm install -g cordova

    此时,我们就有全局的命令。后续命令操作全部在cmd中进行

    5. 创建应用

           Cmd中使用 cd e: est

           然后 e:

           这样我们就进入了一新用于创建应用的路径下。在该路径下运行

           cordova create hello com.example.hello HelloWorld

           create后面的三个是可以随便写的,其中第一个是创建的文件夹名称,不能为中文,第二个是应用的一个链接,也不能为中文 ,第三个是我们要安装后显示的应用名称,可以为中文。

           执行该命令成功后,我们用cd命令进行创建的应用

           Cd hello

           进入了 e: esthello

    下面所有的命令均在该路径下执行。

           添加一个安卓应用 :

           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中自动复制相关文件,不要直接修改platformsandroidassetswww下的网页,在使用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" onclick="inputScan();" style="margin-top:20px;margin-left:20px;80px;height:80px;">扫码</button>

    调用二维码控件:

    function inputScan(){

            cordova.plugins.barcodeScanner.scan(

         function (result) {

             alert("We got a barcode " +

                   "Result: " + result.text + " " +

                   "Format: " + result.format + " " +

                   "Cancelled: " + result.cancelled);

         },

         function (error) {

             alert("Scanning failed: " + error);

         }

      );

     }

     

    还有一点要注意的是:生成的示例的文件中第一个Meta要去掉,因为它禁了网页内编写js,我们这样写就会失效,如果是单独的Js文件是不影响的。

    最后一步终于来了:

    使用 cordova build android  --release命令来生成apk文件。如果没有报错的话就会在

    platformsandroiduildoutputsapk

    生成一个带签名,一个不带签名的文件。这样我们就生成了一个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

  • 相关阅读:
    Hibernate4
    Hibernate3 多对多关系
    Hibernate 二(一级缓存,多表设计之一对多)
    Hibernate 配置文件
    Hibernate 基础解析(Configuration,SessionFactory,Session,Transaction,Query,Criteria)
    struts2 防止表单的重复提交
    struts2 UI标签 和 主题
    struts2 OGNL配和通用标签和其它标签的使用
    struts2 对EL的改变
    struts2 contextMap
  • 原文地址:https://www.cnblogs.com/dreamless/p/5640130.html
Copyright © 2011-2022 走看看