cordova 跨平台初探

cordova 跨平台初探

移动端app的开发由于手机操作系统的多样化，典型的如ios与android，如何省精力的一次开发，到处运行是所有移动端开发者都会遇到的问题。

具体的问题大概有一下几项:

1. 开发环境不同
2. 开发语言不通
3. 操作系统提供API不一致
4. 部署方式不同

譬如说作者意在开发一个租房APP，是对南京市内所有APP信息的整合。但是为了果粉必须开发ios版本，还有广大安卓用户安卓版本，而有的人是不愿意为了这种一次性使用的软件装app的，所以还得有一款网页版。
如果一下子开发全套平台的应用，经济与技术成本无疑是巨大的，尤其是在投入初期，产品往往还在实验阶段，如此巨大的投入是低性价比的。

有没有像JVM上的Java方案一样一统天下？
有，但是不是通过虚拟机，更多的是语言转译解决的。RoboVM，好像要收费了。

当然还有其他hybrid,react,ionic等解决方案。

但这不是我今天要介绍的。像RoboVM可以跨平台，但是还是得单独开发一个网页版，所以很自然的就想到了用js来开发跨平台应用。

下面开始搭建第一个cordova项目，我使用的是webstorm.

• nodejs安装，java环境配置，java环境配置
• 安装配置cordova

• 创建cordova工程
  cordova <文件夹名> <包名> <app名>

     cordova create cordovaProject package.subpackage.appName 

  • 文件夹目录如下

    • hooks 目前为空，存放自定义cordova命令的脚本文件。
    • platforms 存放各个平台相关的代码，为工程创建一种平台后都会有一个相应的目录在这个文件夹下面
    • plugins 开发的插件目录
    • www 存放H5和JS代码的目录（APP）的首页面对应这个目录中的index.html
    • config.xml APP配置信息,包括平台信息，版本信息，APP名等

  • 添加平台

        cordova platforms add android # 添加安卓支持
        # cordova platforms add android@4.1.1 # 添加版本为4.1.1的安卓支持
        cordova platforms add browser

  然后在platforms目录下面会多出两个目录，android和browser; 在config.xml里面的platform与engine属性也会有对应的变化。

  • 删除平台

    cordova platforms rm android #移除安卓平台
    cordova platforms rm browser

  • 运行与调试

    cordova install android //将编译好的应用程序安装到模拟器上。
    cordova emulate android //在模拟器上运行（前提是创建好AVD）
    cordova serve android //在浏览器运行
    cordova build android //打包cordova项目到android平台。
    cordova run android //通过USB直接安装到真机

  这里我采用了cordova run android直接在真机上测试，结果失败了，
  于是直接把apk文件传到手机上安装再运行，成功了，说明是真机调试环境的问题，
  cordova是搭好了。

  • 修改APP图标
    

    <icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />
    <icon src="res/icon.png" />
    
    # 如果不指定platform，会对所有的平台生效
    

  如上，在config.xml文件中修改元素便可。

  • 本地存储
    cordova的本地存储提供同步的、简洁的 key/value对 存储，并且在所有的cordova平台下被基本的webView支持。

  //通过window.localStorage访问
  var storage = window.localStorage;
  var value = storage.getItem(key); // Pass a key name to get its value.
  storage.setItem(key, value) // Pass a key name and its value to add or update that key.
  storage.removeItem(key) // Pass a key name to remove that key from storage.

      **优点**
  - 所有cordova平台均支持
  - 因为是同步的，易于使用，安全
  
      **缺点**
  - 只支持字符串，需要对复杂数据序列化
  - 性能表现差
  - 存储空间有限（大约5M）
  - IOS平台的本地存储可能会被OS清空
  

  • WEBSOL
    支持Android,BlackBerry 10,iOS.
    通过window.openDatabase()连接数据库：

    /**
     *  name (string): 数据库名称.
     *  version (string): 数据库版本.
     *  displayName (string): 用户友好的数据库名字.
     *  estimatedSize (number): 预期最大使用内存，单位是BYTES。后期扩展需要弹出权限请求。 
     */
    var db = window.openDatabase(name, version, displayName, estimatedSize);
    db.transaction(function (tx) {
        tx.executeSql(sqlStatement, valueArray, function (tx, result) {
            console.log(result);
        }, function (error) {
            console.log(error);
        });
    });

  • 插件概述

  plugin便是cordova提供的访问设备底层接口的一种方式，把设备底层API以javascript一致接口的形式提供给开放人员，提供跨平台的功能。

  安装camera插件：cordova plugin add cordova-plugin-camera
  删除该插件：cordova plugin rm cordova-plugin-camera
  查看已经安装插件： H:\code\android\cordovatest
  更新插件：cordova plugin update

  其他常见插件：

  
  # 让程序可以在控制台中打印输出日志
  
  cordova plugin add cordova-plugin-console 
  
  # 用来判断网络连接类型（2G、3G、4G、Wifi、无连接等）
  
  cordova plugin add cordova-plugin-network-information
  
  # 获取一些设备信息
  
  cordova plugin add cordova-plugin-device
  
  # 让设备蜂鸣或振动。
  
  cordova plugin add cordova-plugin-vibration
  
  # 可以获取电池状态信息。
  
  cordova plugin add cordova-plugin-battery-status
  
  # Accelerometer(加速计)
  
  
  # 让应用在三维空间(使用笛卡尔三维坐标系统)中决定设备方向。
  
  cordova plugin add cordova-plugin-device-motion
  
  # Compass(指南针)
  
  
  # 可以让开发者读取移动设备的朝向。
  
  cordova plugin add cordova-plugin-device-orientation
  
  # Geolocation(地理定位), 让应用判断设备的物理位置。
  
  cordova plugin add cordova-plugin-geolocation
  
  # Camera(相机) 用相机获取图像。
  
  cordova plugin add cordova-plugin-camera
  
  # Media Capture （媒体捕获）
  
  
  # 与Camera API相比，不仅能获取图像，还可以录视频或者录音。
  
  cordova plugin add cordova-plugin-media-capture
  
  # Globalization(全球化)
  
  
  # 允许应用查询操作系统的当前设置，判断用户使用的语言。
  
  cordova plugin add cordova-plugin-globalization
  
  # 读取联系人列表并在应用中使用联系人数据，或使用应用数据向联系人列表中写新的联系人。
  
  cordova plugin add cordova-plugin-contacts
  
  # Media（播放/记录媒体文件）
  
  
  # 让应用能记录或播放媒体文件。用它可以在手机后台播放音频文件或玩桌面视频游戏。
  
  cordova plugin add cordova-plugin-media
  
  # InAppBrowser（内置浏览器）
  
  
  # 允许在在单独的窗口中加载网页。例如要向应用用户展示其他网页。
  
  
  # 当然可以很容易地在应用中加载网页内容并管理，但有时候需要不同的用户体验
  
  
  # InAppBrowser加载网页内容，应用用户可以更方便的直接返回到主应用。
  
  cordova plugin add cordova-plugin-inappbrowser
  
  # Splashscreen（闪屏）
  
  
  # 用来在Cordova应用启动时显示自定义的闪屏。
  
  cordova plugin add cordova-plugin-splashscreen
  
  # 让 Android 或者 Windows Phone 8 上的APP关闭退出（iOS系统不支持）。
  
  cordova plugin add cordova-plugin-exitapp

  下面以相机插件为例介绍：

  • 安装

    
    # 进入工程所在的目录,安装插件，可能需要一段时间
    
    cordova plugin add cordova-plugin-camera

  • 使用JS调用

              //拍照成功
              function onPhotoDataSuccess(imageData) {
                  console.log(imageData);
                  var smallImage = document.getElementById('smallImage');
                  smallImage.style.display = 'block';
                  smallImage.src = "data:image/jpeg;base64," + imageData;
              }
    
              //拍照失败
              function onFail(message) {
                  alert('拍照失败: ' + message);
              }
    //拍照
    function capturePhoto() {
           //拍照并获取Base64编码的图像（quality : 存储图像的质量，范围是[0,100]）
          navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                 destinationType: destinationType.DATA_URL }
          );
    }
    

    在关键的位置触发capturePhoto，并在onPhotoDataSuccess中处理图片即可。

    • 关于cordova与phonegap
      官方的大概意思是cordova是精简版.

    • 关于cocos-js
      js也有cocos库，并提供了API访问，如果是游戏开发的话可以一试，界面效果上可以补cordova的短板。

当然，使用cordova开发肯定会遇到运行速度问题，但是在投入初期，产品还没有得到市场验证且功能不是很复杂的情况下，这是一个很经济的选择。如果对程序速度要求高，请使用hybrid或者native方案，学习复杂度要高一点。