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 <文件夹名> <包名>

       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 [email protected] # 添加版本为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方案,学习复杂度要高一点。

你可能感兴趣的:(android)