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方案，学习复杂度要高一点。