Cordova in action 学习笔记三：实现网页实现不了的功能

1 概述

上节实现了开发一个web，就可以生成app的功能，但问题也来了，web局限性很大，不能访问文件系统，不能访问摄像头，不能访问gps信息，那怎么办，我们开发的app不可能就单纯实现一个webview的功能呀。这一节我们学习通过插件plugin实现这些网页实现不了的功能。

2 插件

    2.1插件就是负责做javascript与手机原生组件中间的控制器，比如js要调用摄像头，则通过调用摄像头插件实现，见下图：

     2.2 怎么找到这些插件，cordova插件基本都可以在npmjs.com找到，在首页输入ecosystem:cordova搜索可以找到相关的插件，见下图

 

     常用插件：

• Battery Status (cordova-plugin-battery-status)

• Camera (cordova-plugin-camera)

• Console (cordova-plugin-console)

• Contacts (cordova-plugin-contacts)

• Device (cordova-plugin-device)

• Device Motion and Orientation (cordova-plugin-device-motionand

  cordova-plugin-device-orientation)

• Dialogs and Vibration (cordova-plugin-dialogs)

• File System and FileTransfer (cordova-plugin-fileandcordova-plugin-

  file-transfer)

• Geolocation (cordova-plugin-geolocation)

• Globalization (cordova-plugin-globalization)

• InAppBrowser (cordova-plugin-inappbrowser)

• Media and Media Capture (cordova-plugin-mediaandcordova-plugin-

  media-capture)

• Network Information (cordova-plugin-network-information)

• Splashscreen (cordova-plugin-splashscreen)

• Vibration (cordova-plugin-vibration)

• StatusBar (cordova-plugin-statusbar)

• Whitelist (cordova-plugin-whitelist) 

      如果无法确认插件ID的话，比如在cli输入

$ cordova plugin search barcode

     就会弹出条形码的搜索页面，见下图，注意，出结果前需要先选择支持的设备，如果要支持andoird ios，就勾选上android／ios，如下图所示

       

  2.3 安装插件输入

         在cordova添加plugin需要输入 cordova plugin add [pluginID],如果是摄像头的话，就如下所示：

$ cordova plugin add cordova-plugin-camera

3 我们来做一个调用插件的应用，我们以dialog弹框为例

    可能你会说html5有弹框呀，但我要告诉你，原生的弹框就是一个坑，显示如下图

         

     这在app界面是无法忍受的，所以我们需要实现原生的弹框务必调用dialog插件

     我们的目标是实现4种dialog，一：alert警告框，二：多项选择确认框 ，三问答框 ，四 beep警告声

4  

    4.1 开始创建一个新项目dialogApp

$ cordova create dialogApp com.fzp.dialogApp myDialogApp

    4.2 添加dialog插件支持     

$ cordova plugin add cordova-plugin-dialogs

    4.3 添加platforms

$ cordova platforms add android

$ cordova platforms add ios

    4.4编辑index.html

    
        
        
        
    
    
        

          alert
          Confirm
          Ask
          

        
        
        
    

   4.5 编辑js/index.js文件

var app={
   initialize:function(){
       this.assignEvent();  
   },
   assignEvent:function(){
       document.addEventListener("deviceready",this.buttonEvent,false);
   },
   buttonEvent:function(){
       document.querySelector("#btAlert").addEventListener("touchend",function(){
           navigator.notification.alert("This is an alert...",null,"Alert Test","OK"); 
       },false) 
       var titles=["yes","No","Maybe"];
       function youConfirmed(idx){
           navigator.notification.alert("You clicked"+titles[idx-1]+"!",null)
       }
         document.querySelector("#btConfirm").addEventListener("touchend",function(){
           navigator.notification.confirm("Are you Confirm",youConfirmed,"Confirm This",titles); 
       },false) 
         document.querySelector("#btAsk").addEventListener("touchend",function(){
           navigator.notification.prompt(
               "What is your favorite food?"
               ,function(r){
                      navigator.notification.alert("You answerd:"+r.input1+"!",null)
                 }
                ,"Ask",["OK"],null); 
       },false) 
         document.querySelector("#btBeep").addEventListener("touchend",function(){
         navigator.notification.beep(1);
       },false) 
   }
};
app.initialize();

       这里最重要的方法就是添加deviceready 监听，所有关于原生插件的调用，首先就要启用deviceready 监听才能生效。

  4.6 编辑css/index.css文件

body{
    margin: 20px;
}

button,input {
    padding: 10px;
    width:100%;
    font-size: 1em;
}

   4.7 编译执行,效果见下图

$ cordova emulate 

     

大功告成，设计目标已实现

5 扩展

   弹框实现了，但是只是改善了网页的弹框，要不来点大家更关注的，比如调用摄像头，调用相册，条码扫描，好，那扩展篇，我们就试着加下照片

 5.1 首先加载插件

$ cordova plugins add cordova-plugin-camera 

$ cordova plugins add phonegap-plugin-barcodescanner

  5.2 更改代码

  更改index.html,再btBeep后加几行

          
          Take 
          Use Picture 
          

   更改css/index.css，增加img的css描述

img {
    margin-top:10px;
    max-width: 100%;
    max-height:250px;
    margin-left:auto;
    margin-right:auto;
    
}

更改js/index.js，我直接给出全部

var app={
   initialize:function(){
      document.addEventListener("deviceready",this.bindEvents,false);
   },
   bindEvents:function(){
       app.buttonEvent("deviceready");
       app.cameraEvent("deviceready");
       app.barcodeEvent("deviceready");
   },
   buttonEvent:function(){
       document.querySelector("#btAlert").addEventListener("touchend",function(){
           navigator.notification.alert("This is an alert...",null,"Alert Test","OK"); 
       },false) 
       var titles=["yes","No","Maybe"];
       function youConfirmed(idx){
           navigator.notification.alert("You clicked"+titles[idx-1]+"!",null)
       }
         document.querySelector("#btConfirm").addEventListener("touchend",function(){
           navigator.notification.confirm("Are you Confirm",youConfirmed,"Confirm This",titles); 
       },false) 
         document.querySelector("#btAsk").addEventListener("touchend",function(){
           navigator.notification.prompt(
               "What is your favorite food?"
               ,function(r){
                      navigator.notification.alert("You answerd:"+r.input1+"!",null)
                 }
                ,"Ask",["OK"],null); 
       },false) 
         document.querySelector("#btBeep").addEventListener("touchend",function(){
         navigator.notification.beep(1);
       },false) 
   },
   cameraEvent:function(){
      function onCameraSuccess(imageData){
          var img=document.querySelector("#imgApp");
          img.src=imageData;
      }
      function onCameraFail(message){
         navigator.notification.alert(message,null,"load camera failed");
      }
      //use from camera
      document.getElementById("btTakePhoto").addEventListener("touchend",function(){
            navigator.camera.getPicture(onCameraSuccess,onCameraFail,
            {
                quality: 50,
               sourceType: Camera.PictureSourceType.CAMERA,
               destinationType: Camera.DestinationType.FILE_URI

            });
      },false)

      document.querySelector("#btUsePicture").addEventListener("touchend",function(){
          navigator.camera.getPicture(onCameraSuccess,onCameraFail,
      {
        quality:50,sourceType:Camera.PictureSourceType.PHOTOLIBRARY
        ,destinationType:Camera.DestinationType.FILE_URI
      })
      },false)

   },
   barcodeEvent:function(){
       document.querySelector("#btBarcode").addEventListener("touchend",function(){
            cordova.plugins.barcodeScanner.scan(
                function (result) {
                    alert("拿到了条码\n" +
                            "条码数据: " + result.text + "\n" +
                            "格式: " + result.format + "\n" +
                            "取消: " + result.cancelled);
                },
                function (error) {
                    alert("Scanning failed: " + error);
                },
                {
                    "preferFrontCamera" : false, // iOS and Android 
                    "prompt" : "请讲方框对准条码区域"//, // supported on Android only 
                }
            );
       },false)
   }

};
app.initialize();

5.3  测试执行，大功告成