素材巴巴 > 程序开发 >

Ionic ngcordova 二维码扫描

程序开发 2023-09-07 11:30:04
ionic 中ngcordova提供二维码扫描功能 二维码插件 http://ngcordova.com/docs/plugins/barcodeScanner
 ionic corodova nodejs bower 的安装方法网上有教程,下面是各个模块的版本   
 

版本号
这里写图片描述
下面开启项目之旅
1、新建项目
ionic start Ionic_barcode blank
cd Ionic_barcode
ionic platform add android
2、 添加二维码扫描插件
cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git

我用的subline 整个项目的结构如下
这里写图片描述

3、添加ngcordova
3.1 下载 ng-cordova.min.js
https://github.com/driftyco/ng-cordova/releases
将ng-cordova.min.js拷贝到项目的www/js目录。
3.2 也可以用下面的方法下载
bower install ngCordova
4、index.html中引用
我用的是3.2的方法
项目结构如下:
这里写图片描述
index.html 中的引用如下
这里写图片描述
注:ngcordova.min.js 一定要在cordova.js 前面引用

5、修改app.js
angular.module(‘starter’, [‘ionic’,’ngCordova’])
6、编写controller
在www/js目录下新建controller.js
angular.module(‘starter.controllers’, [])
.controller(‘barcodeCtrl’, 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);
});
};
});
记得在app.js 注入controller 模块
angular.module(‘starter’, [‘ionic’,’ngCordova’,’starter.controllers’])

7、方法的调用
在index.html中

二维码扫描示例

Barcode Results
二维码信息: {{scanResult.text}}
编码格式: {{scanResult.format}}
Cancelled: {{scanResult.cancelled}}


 


注:在index 引人controller.js

打包apk 注:下载android sdk 我的是android-sdk-23
ionic build android


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。