cordova实际使用总结

转载 2016年08月09日 08:24:31

• 标签：

• cordova /

• 6.3.0

• 4829

1.  Cordova的安装

来自：http://www.tuicool.com/articles/rimQjyU

Cordova是Node.js的一款第三方依赖包，并托管到 https://www.npmjs.com/ 中。通过npm下载即可：

$ npm install -g cordova

但是考虑到国内伟大的防火墙工程可能无法下载从http://www.npmjs.org/下载Cordova。幸运的是，国内有好几个镜像站点可以供我们使用，更新速度比较快的有淘宝镜像。具体下载方法如下：

（1）通过config命令：（临时指定镜像源）

$ npm config set registry https://registry.npm.taobao.org

$ npm install -g cordova

2.命令行指定：（临时指定镜像源）

$ npm --registry https://registry.npm.taobao.org info underscore

3.编辑 ~/.npmrc，并加入如下内容：（永久指定数据源）：

$ registry = https://registry.npm.taobao.org

国内镜像使用可参考： 电脑换源 npm 国内镜像 cnpm

下载Cordova后，通过以下命令可查看当前的Cordova版本：

$ cordova -v

升级Cordova的方法如下：

$ npm update -g cordova

2. 创建Cordova APP新项目

下载完Cordova之后，就能创建一个新的CordovaAPP实例程序：

$ cordova create MyApp com.example.myApp HelloWorld

（备注：如果想查看安装APP的进度，可以添加命令行选项 -d 。）

cordova create命令的参数如下：

·        第一个参数是CordovaAPP项目的文件目录，不可选；

·        第二个参数是APP项目的域名标识，可选；

·        第三个参数是APP应用的标题，可选。这个标题也可以后期在config.xml中进行修改。默认值是HelloCordova。

3. 为APP添加运行平台

例如，进入MyApp文件夹，为当前的MyApp项目添加浏览器运行平台。

$ cd MyApp

$ cordova platform add browser

在Mac中，可添加的平台有：

$ cordova platform add ios

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

在Windows中，可添加的平台有：

$ cordova platform add wp8

$ cordova platform add windows

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

列出当前的cordova运行平台：

$ cordova platforms ls

删除当前的运行平台：

$ cordova platform remove blackberry10

$ cordova platform rm android

4. 在特定平台上运行APP

一定要执行过cordova platform add的特定平台，才能指定cordovarun操作，在该运行平台上浏览效果。

例如，在浏览器中运行MyApp程序：

$ cordova run browser

此时，浏览器自动访问http://localhost:8000/，即可查看到如下界面，说明新建的默认APP项目已经可以跑起来了：

5. 编译Cordova APP

$ cordova build

还可以选择编译特定的运行平台代码：

$ cordova build ios

cordova build命令相当于一下两条命令的简写：

$ cordova prepare ios

$ cordova compile ios

7. 在模拟器和设备中运行APP

$ cordova emulate android

$ cordova run android

8. 帮助面板

$ cordova help

二. Cordova新项目的目录结构

新建的Cordova APP项目的目录结构如下：

MyApp/

|-- hooks/

  |-- README.md

|-- platforms/

  |-- browser/

  |-- platforms.json

|-- plugins/

  |-- cordova-plugin-whitelist/

  |-- browser.json

  |-- fetch.json

|-- www/

  |-- css/

  |-- img/

  |-- js/

  |-- index.html

|-- config.xml

三. 添加插件

Cordova自4.0以后的版本就不再自带任何的API，就连core API 都必须通过插件安装显式写出来。

1 . 搜索插件：

$ cordova plugin search bar code

结果如下：（2015-11-16）

com.blackberry.community.barcodescanner

com.cordova.plugins.barcodescanner

com.delhivery.barcodescanner

com.gpdi.plugin.myplugin.myplugin

com.heytz.plugins.barcodescanner

com.heytz.plugins.barcodescanner.portrait

com.ishaijaffe.zxingintent

com.manateeworks.barcodescanner

com.mirasense.scanditsdk.plugin

com.phonegap.plugins.barcodescanner

com.virtualama.bs

de.martinreinhardt.cordova.plugins.barcodescanner

org.bloxlab.barcodescanner

org.cloudsky.cordovaplugins.zbar

org.pluginporo.barcode_scan_plugin

org.pluginporo.honeywell_scanner_plugin

2 . 添加Plugin：

$ cordova plugin add <cordova-plugin>

3. 常用插件种类：

（1）基础设备信息API：

$ cordova plugin add cordova-plugin-device

（2）网络连接和电池事件：

$ cordova plugin add cordova-plugin-network-information

$ cordova plugin add cordova-plugin-battery-status

（3）加速度计、方向指示和地理位置：

$ cordova plugin add cordova-plugin-device-motion

$ cordova plugin add cordova-plugin-device-orientation

$ cordova plugin add cordova-plugin-geolocation

（4）相机、多媒体播放和拍摄：

$ cordova plugin add cordova-plugin-camera

$ cordova plugin add cordova-plugin-media-capture

$ cordova plugin add cordova-plugin-media

（5）获取本地或网络文件：

$ cordova plugin add cordova-plugin-file

$ cordova plugin add cordova-plugin-file-transfer

（6）对话框提示或振动：

$ cordova plugin add cordova-plugin-dialogs

$ cordova plugin add cordova-plugin-vibration

（7）通讯录：

$ cordova plugin add cordova-plugin-contacts

（8）全球化：

$ cordova plugin add cordova-plugin-globalization

（9）启动画面：

$ cordova plugin add cordova-plugin-splashscreen

（10）打开新的浏览器窗口：

$ cordova plugin add cordova-plugin-inappbrowser

（11）调试控制台：

$ cordova plugin add cordova-plugin-console

列出所有的插件列表：

$ cordova plugin ls

删除插件：

$ cordova plugin rm cordova-plugin-console

或

$ cordova plugin remove cordova-plugin-console

安装指定版本的插件：

$ cordova plugin add cordova-plugin-console@latest

$ cordova plugin add cordova-plugin-console@0.2.1

其他实际操作中遇到的问题汇总：

1、APP发布  cordova build –-release android

2、修改android:versionCode方法，app/config.xml

<widgetid="cn.jybd.bi" version="4.0.0"android-versionCode="4"

 xmlns="http://www.w3.org/ns/widgets"xmlns:cdv="http://cordova.apache.org/ns/1.0">

其中version对应android:versionName

3、应用名汉字乱码问题解决办法：将app/config.xml文件另存为UTF-8编码格式；

4、使用vconsole.js调试js代码部分；

5、可以将CordovaLib以库的形式集成到android studio工程中，便于调试；

6、本工程需要的cordova插件如下：

$ cordova plugin add cordova-plugin-device

$ cordova plugin add cordova-plugin-dialogs

$ cordova plugin add cordova-plugin-network-information

版本更新源代码：

package cn.jybd.bi;

import android.app.AlertDialog;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.net.Uri;
import android.os.Bundle;
import android.os.Looper;
import android.util.Log;
import org.apache.cordova.*;
import org.json.JSONArray;
import org.json.JSONObject;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;


public class MainActivity extendsCordovaActivity
{

    String newVerName = "";//新版本名称
    int newVerCode = -1;//新版本号
    ProgressDialog pd = null;
    String UPDATE_SERVERAPK = Constant.APK_NAME;
    private Thread downLoadThread;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> inconfig.xml
        loadUrl(launchUrl);
        new Thread(){
            @Override
            public void run() {
                // TODO Auto-generated method stub
                //super.run();
                Looper.prepare();
                updateVersion();//启动时就检查 或者在菜单中调用
                Looper.loop();
            }
        }.start();
    }

    public void updateVersion(){
        if(getServerVer()){
            int verCode= this.getVerCode(getBaseContext());
            if(newVerCode>verCode){
                doNewVersionUpdate();//更新版本
            }else{
                //alert("")
                notNewVersionUpdate();//提示已是最新版本
            }
        }
    }

    /**
     * 获得版本号
     */
    public int getVerCode(Context context){
        int verCode= -1;
        try {
            String packName =context.getPackageName();
            verCode =context.getPackageManager().getPackageInfo(packName, 0).versionCode;
        } catch (PackageManager.NameNotFoundExceptione) {
            // TODO Auto-generated catch block
            Log.e("版本号获取异常",e.getMessage());
        }
        return verCode;
    }

    /**
     * 获得版本名称
     */
    public String getVerName(Context context){
        String verName = "";
        try {
            String packName =context.getPackageName();
            verName =context.getPackageManager().getPackageInfo(packName, 0).versionName;
        } catch (PackageManager.NameNotFoundExceptione) {
            Log.e("版本名称获取异常", e.getMessage());
        }
        return verName;
    }

    /**
     * 从服务器端获得版本号与版本名称
     * @return
     */
    public boolean getServerVer(){
        try {
            //版本检测地址
            URL url = new URL(Constant.SERVER_VERSION_URL);
            HttpURLConnectionhttpConnection = (HttpURLConnection) url.openConnection();
           httpConnection.setRequestMethod("GET");
            httpConnection.connect();
            InputStreamReader reader = new InputStreamReader(httpConnection.getInputStream());
            BufferedReader bReader = new BufferedReader(reader);
            String json =bReader.readLine();
            JSONArray array = new JSONArray(json);
            JSONObject jsonObj =array.getJSONObject(0);
            newVerCode = Integer.parseInt(jsonObj.getString("verCode"));
            newVerName = jsonObj.getString("verName");
        } catch (Exceptione) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return true;//如果这里改为false 则不更新会退出程序
        }
        return true;
    }

    /**
     * 不更新版本
     */
    public void notNewVersionUpdate(){
        int verCode= this.getVerCode(this);
        String verName = this.getVerName(this);
        StringBuffer sb = new StringBuffer();
        sb.append("当前版本：");
        sb.append(verName);
        sb.append(" Code:");
        sb.append(verCode);
        sb.append("\n已是最新版本，无需更新");
        Dialog dialog = new AlertDialog.Builder(this)
                .setTitle("软件更新")
               .setMessage(sb.toString())
                .setPositiveButton("确定", new DialogInterface.OnClickListener() {

                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        // TODO Auto-generated method stub
                        //finish();
                    }
                }).create();
        dialog.show();
    }

    /**
     * 更新版本
     */
    public void doNewVersionUpdate(){
        int verCode= this.getVerCode(this);
        String verName = this.getVerName(this);
        StringBuffer sb = new StringBuffer();
        sb.append("当前版本：");
        sb.append(verName);
        sb.append(" Code:");
        sb.append(verCode);
        sb.append(",发现版本：");
        sb.append(newVerName);
        sb.append(" Code:");
        sb.append(newVerCode);
        sb.append(",是否更新");
        Dialog dialog = new AlertDialog.Builder(this)
                .setTitle("软件更新")
                .setMessage(sb.toString())
                .setPositiveButton("更新", new DialogInterface.OnClickListener() {

                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        // TODO Auto-generated method stub
                        Intent intent = new Intent();//只调用系统控件下载，不自动下载安装
                        intent.setAction("android.intent.action.VIEW");
                        Uri content_url =Uri.parse(Constant.SERVER_DOWNLOAD_URL);
                        intent.setData(content_url);
                       startActivity(intent);
                    }
                })
                .setNegativeButton("暂不更新", new DialogInterface.OnClickListener() {

                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        // TODO Auto-generated method stub
                        //finish();
                    }
                }).create();
        //显示更新框
        dialog.show();
    }








}

 /**

*常量配置文件

*/

Constant.java

package cn.jybd.bi;

public class Constant {
   /**
    * 土司显示时间
    */
   public static final int TOAST_SHOWTIME = 2;  
   public static final String APK_NAME = "*****.apk";
   /**
    * 服务器apk版本保存路径
    */
   public static final String SERVER_VERSION_URL = "http://***********/version.js";
   /**
    * 服务器apk下载地址
    */
   public static final String SERVER_DOWNLOAD_URL = "http://**********/BI_Mobile.apk";

}

 /*需要放在服务器上，给客户端提醒新版本的信息*/

version.js文件内容格式：JSON

[{'verCode':4,'verName':'4.0.0Beta','apkPath':'http://*********/BI_Mobile.apk'}]