2019-05-14 15:47:40 u010792039 阅读数 213
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1755 人正在学习 去看看 姜博

1添加插件

cordova plugin add cordova-plugin-qrscanner
2创建html

<!DOCTYPE html>
<html>

<head>
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <link rel="stylesheet" href="../css/ercode.css">
  <title>二维码扫描</title>
  <style>
    button {
      margin: .3rem;
    }
  </style>
</head>

<body>
  <div class="app">
    <div class="qrscanner">
      <div class="qrscanner-area">
      </div>
      <div class="through-line"></div>
      <div class="button-bottom">
        <button id="btn1" class="btn btn-primary">
          手电筒
        </button>
        <button id="btn2" class="btn btn-info">
          切换摄像头
        </button>
      </div>
    </div>

  </div>
  <script type="text/javascript" src="../cordova.js"></script>
  <script type="text/javascript" src="../js/index.js"></script>
  <script>
    document.addEventListener("deviceready", onDeviceReady, false);
    var light = false;
    var frontCamera = false;
    function onDeviceReady() {
      if (typeof (QRScanner) != 'undefined') {
        //初始化检测,申请摄像头等权限
        QRScanner.prepare(onDone); // show the prompt
      } else {
        alert('插件加载失败');
      }
      function onDone(err, status) {
        if (err) {
          console.error(err);
        }
        if (status.authorized) {
          //绑定扫描监听
          // `QRScanner.cancelScan()` is called.
          QRScanner.scan(displayContents);
          function displayContents(err, text) {
            if (err) {
              // an error occurred, or the scan was canceled (error code `6`)
              alert('启动扫描出错:' + JSON.stringify(err));
            } else {
              // The scan completed, display the contents of the QR code:
              alert(text);
              QRScanner.scan(displayContents);//重复扫描
            }
          }
          //开始扫描,需要将页面的背景设置成透明
          QRScanner.show();
        } else if (status.denied) {
          alert('用户拒绝访问摄像头');
        } else {
        }
      }


      //切换开启手电筒

      document.querySelector('#btn1').addEventListener('click', function () {
        if (light) {
          QRScanner.enableLight();
          alert('enableLight');
        } else {
          QRScanner.disableLight();
        }
        light = !light;
      });


      //切换前后摄像头
      document.querySelector('#btn2').addEventListener('click', function () {
        if (frontCamera) {
          QRScanner.useFrontCamera();
          alert('useFrontCamera');
        } else {
          QRScanner.useBackCamera();
        }
        frontCamera = !frontCamera;
      });

    }
  </script>
</body>

</html>

3编译项目(android)

此过程可能出错,不要着急根据提示信息一步步来,

我主要的问题有:

a编译版本问题

b摄像头权限声明重复

c依赖方式 compile 换成 implementation

           d.  js文件夹下index.js自动生成的代码报错了,receivedEvent方法中报null了判空处理以下就可以了

 

 

2017-03-31 17:37:19 ljw124213 阅读数 495
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1755 人正在学习 去看看 姜博

由于下个ionic项目需要用到二维码扫描,就提前研究了,为了快速开发,选择使用优秀的第三方。

在网上看许多人都介绍了BarcodeScanner的使用,自己也就搭建了个项目尝试了一番,下面把自己实现得最顺的一次分享给大家。

1,搭建项目,我是使用VS2015搭建的一个空白的ionic项目。

2,添加二维码扫描的插件(如果使用VS,可以直接在插件中安装),cordova安装插件的命令:

cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner
3,在此处下载最新版本的ngCordova,将ng-cordova.min.js拷贝到项目的www/js目录下。

4,在index.html中引入上面的ngCordova,一定要注意引用的位置:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/platformOverrides.js"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ng-cordova.min.js"></script>

    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/ExampleController.js"></script>
</head>
<body ng-app="starter">
    <ion-content ng-controller="ExampleController">
        <button class="button button-positive" ng-click="scanBarcode()">Scan</button>
    </ion-content>
</body>
</html>

5,将ngCordova在app.js中注入:

angular.module('starter', ['ionic', 'ngCordova'])


6,新建一个Controller,我这里是ExampleController.js,写逻辑代码:

angular.module('starter')
.controller("ExampleController", function ($scope, $cordovaBarcodeScanner) {
    $scope.scanBarcode = function () {
        $cordovaBarcodeScanner.scan().then(function (imageData) {
            alert(imageData.text);
            console.log("Barcode Format -> " + imageData.format);
            console.log("Cancelled -> " + imageData.cancelled);
        }, function (error) {
            console.log("An error happened -> " + error);
        });
    };
});


7,同时,要把此js在index.html中声明:

<script src="js/ExampleController.js"></script>

8,在index.html中调用我们在ExampleController.js中写的方法:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/platformOverrides.js"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ng-cordova.min.js"></script>

    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/ExampleController.js"></script>
</head>
<body ng-app="starter">
    <ion-content ng-controller="ExampleController">
        <button class="button button-positive" ng-click="scanBarcode()">Scan</button>
    </ion-content>
</body>
</html>

好了,到此就能够成功的实现二维码扫描了。


2016-05-24 21:50:40 csdn_ljh 阅读数 13358
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1755 人正在学习 去看看 姜博

以android平台为例,IDE使用 android-studio(因为需要引用aar文件),项目是使用 $ cordova create HelloWorld 创建的


当我们按照cordova官方说明为cordova项目添加 phonegap-plugin-barcodescanner 插件后,我们发现libs目录下多了一个 barcodescanner.aar 文件

(这是这个扫描插件的资源集,如果你很好奇的话可以改下后缀解压看看里面有什么)


1、引用 barcodescanner.aar

     打开 build.gradle 文件


    把libs目录添加为资源仓库,并引用 barcodescanner.aar (下面是build.gradle修改完成后的代码。有中文注释的两个地方就是我们要添加的内容),

    然后Rebuild我们的android项目

//添加一个本地资源仓库
repositories{
    flatDir {
        dirs 'libs'
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: '*.jar')
    //引用cordova二维码扫描插件aar
    compile(name:'barcodescanner', ext:'aar')
    debugCompile project(path: "CordovaLib", configuration: "debug")
    releaseCompile project(path: "CordovaLib", configuration: "release")
}


    Rebuild完成后进入 " android \ build \ intermediates \ exploded-aar " 文件夹就可以看到我们的android项目已经引用了 barcodescanner.aar 中的资源



2、然后就可以调用官方的说明方法进行测试了。。。


2015-12-14 22:48:00 liu36032075 阅读数 2814
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1755 人正在学习 去看看 姜博


添加二维码功能采用的是:ngcordova

官方网站:http://ngcordova.com/


使用方式:下载ngcordova

GitHub地址:https://github.com/driftyco/ng-cordova

官网地址::http://ngcordova.com/


1、将ng-cordova.min.js 引入到项目中




2、index.html中引入JS



3、angular.modul中加载 ngCordova



4controller中使用


.controller('xxxController',function($scope, $cordovaBarcodeScanner ){
   $scope.scanBarcode = function() {
      $cordovaBarcodeScanner.scan().then(function(imageData) {

        alert(imageData.text);

        console.log("Barcode Format -> " + imageData.format);

        console.log("Cancelled -> " + imageData.cancelled);

      }, function(error) {

        console.log("An error happened -> " + error);

      });

    };

}


运行OK


2014-03-20 14:19:30 wayne_ren 阅读数 122
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1755 人正在学习 去看看 姜博
[quote][color=blue]这个插件采用的是开源版的[url=https://github.com/zxing/zxing]zxing[/url],如果性能、识别率不满足需求的话,建议使用[url=http://www.scandit.com/]Scandit[/url],它提供了Community SDK,并且支持Platforms(iOS/Android)、Frameworks(Titanium/Xamarin/Phonegap/Worklight)。其中Community版的支持UPC-A / UPC-E、EAN8 / EAN13、QR Code。[/color][/quote]

插件地址:[url=https://github.com/wildabeast/BarcodeScanner]https://github.com/wildabeast/BarcodeScanner[/url]

[b](1)创建工程[/b]
[quote]cordova create HelloBarcode com.rensanning.cordova HelloBarcode
cd HelloBarcode
cordova platform add android[/quote]

[b](2)安装plugin[/b]
[quote]cordova plugin add https://github.com/wildabeast/BarcodeScanner.git[/quote]

[b](3)修改index.html后编译执行[/b]
[img]http://dl2.iteye.com/upload/attachment/0095/1270/cce182bd-c144-3940-8ae1-e41950eaf479.png[/img]
<a href="#" class="btn" onclick="scanCode();">Scan Code</a>
<script type="text/javascript">
function scanCode() {
cordova.plugins.barcodeScanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
</script>

[img]http://dl2.iteye.com/upload/attachment/0095/1272/698c5292-f7c1-30c3-8cbd-102083884af2.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0095/1274/7a271034-834c-3d76-a687-cec3a0a906d7.png[/img]

[color=red][b]Android版本的Zxing插件默认是横向扫描的,竖向扫码需要修改插件的代码。这里有改好的,可以试试。[/b][/color][url=http://dl.iteye.com/topics/download/d3b82782-506f-3e21-bec3-157e883713a5]com.phonegap.plugins.barcodescanner.rar[/url]

<a href="#" class="btn enc" onclick="encodeText();">Encode Text</a>
<script type="text/javascript">
function encodeText() {
cordova.plugins.barcodeScanner.encode(
"TEXT_TYPE",
"http://www.baidu.com",
function(success) {
alert("encode success: " + success);
}, function(fail) {
alert("encoding failed: " + fail);
}
);
}
</script>

[img]http://dl2.iteye.com/upload/attachment/0095/1276/81adbb13-2fbc-3e65-8b96-4f8ed7e1c9ca.png[/img]

<a href="#" class="btn enc" onclick="encodeEmail();">Encode Email</a>
<script type="text/javascript">
function encodeEmail() {
cordova.plugins.barcodeScanner.encode(
"EMAIL_TYPE",
"rensanning@gmail.com",
function(success) {
alert("encode success: " + success);
}, function(fail) {
alert("encoding failed: " + fail);
}
);
}
</script>

[img]http://dl2.iteye.com/upload/attachment/0095/1278/3a4e58de-6e59-3a41-9889-5aed9c46a408.png[/img]

<a href="#" class="btn enc" onclick="encodePhone();">Encode Phone</a>
<script type="text/javascript">
function encodePhone() {
cordova.plugins.barcodeScanner.encode(
"PHONE_TYPE",
"135-1234-5678",
function(success) {
alert("encode success: " + success);
}, function(fail) {
alert("encoding failed: " + fail);
}
);
}
</script>

[img]http://dl2.iteye.com/upload/attachment/0095/1282/0f1adb02-6887-356d-a5f0-3b2711544676.png[/img]

<a href="#" class="btn enc" onclick="encodeSMS();">Encode SMS</a>
<script type="text/javascript">
function encodeSMS() {
cordova.plugins.barcodeScanner.encode(
"SMS_TYPE",
"An important message for someone.",
function(success) {
alert("encode success: " + success);
}, function(fail) {
alert("encoding failed: " + fail);
}
);
}
</script>

[img]http://dl2.iteye.com/upload/attachment/0095/1280/58801f20-7690-3d33-a360-058725691c12.png[/img]

[color=red][b]注意:[/b][/color]

a) 没有实现CONTACT_TYPE 和 LOCATION_TYPE的encode。
b) 如果encode出错:
java.lang.NullPointerException
at com.google.zxing.client.android.encode.EncodeActivity.onCreateOptionsMenu(EncodeActivity.java:89)

下载最新的[url=http://zxing.googlecode.com/svn/trunk/android/res/menu/encode.xml]encode.xml[/url]文件,覆盖 platforms\android\res\menu\encode.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/menu_share"
android:title="@string/menu_share"
android:icon="@android:drawable/ic_menu_share"
android:orderInCategory="1"
android:showAsAction="withText|ifRoom"/>
<item android:id="@+id/menu_encode"
android:title="@string/menu_encode_vcard"
android:icon="@android:drawable/ic_menu_sort_alphabetically"
android:orderInCategory="2"
android:showAsAction="withText|ifRoom"/>
</menu>

ionic2--扫描二维码

阅读数 219

没有更多推荐了,返回首页