Ionic—二维码扫描与关于模块的开发
一.二维码扫描功能布局开发
1.开发设计
- 功能需求:布局二维码扫描页面
- 二维码扫描在Ionic Native中为QS Scanner插件,安装如下
sudo ionic cordova plugin add cordova-plugin-qrscanner
加载与底层交互的cordova插件sudo npm install --save @ionic-native/qr-scanner
- app.module的providers中引入QRScanner
import { QRScanner } from '@ionic-native/qr-scanner';
- 生成扫描二维码页面
ionic g page scan
- 在more页面添加跳转scan页面的按钮选项
2.实例代码
more.html
<ion-header><ion-navbar><ion-title>更多</ion-title></ion-navbar></ion-header><ion-content><div *ngIf="!isLogined"><ion-card><ion-card-header text-center>Log in 'Free Skin' and experience more features...</ion-card-header><ion-card-content text-center><button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up </button></ion-card-content></ion-card></div><div *ngIf="isLogined"><ion-list class="marginTop0px"><button ion-item (click)="editUserInfo()"><ion-avatar item-start><img [src]="avatarUrl"></ion-avatar><h2>{{userName}}</h2><p>Click to edit your user info</p></button></ion-list><ion-list class="marginTop10px"><ion-list-header>我的信息</ion-list-header><button ion-item (click)="gotoDataList('question')"><!-- 使用color属性也可以给icon添加颜色,color中的值在theme中定义,可以直接给定颜色 --><ion-icon name="paper" item-start color="primary"></ion-icon><ion-label>我的直播</ion-label></button><button ion-item (click)="gotoDataList('favourite')"><ion-icon name="star" item-start color="orange"></ion-icon><ion-label>我的关注</ion-label></button><button ion-item (click)="gotoDataList('answer')"><ion-icon name="disc" item-start color="secondary"></ion-icon><ion-label>我的护肤</ion-label></button></ion-list><ion-list class="marginTop10px"><ion-list-header>个人设置</ion-list-header><ion-item><ion-icon name="cloudy-night" item-start color="purple"></ion-icon><ion-label>夜间模式</ion-label><!-- 左右切换小按钮 --><ion-toggle color="purple" (ionChange)="toggleChangeTheme()"></ion-toggle></ion-item><!-- 扫描二维码功能页面按钮 --><button ion-item><ion-icon name="qr-scanner" item-start color="dark"></ion-icon><ion-label>扫描二维码</ion-label></button></ion-list></div> </ion-content>
二.二维码扫描功能实现
1.开发设计
- 功能需求:开发二维码扫描逻辑功能
- 开发技巧1:注意在跳转scan扫描页面时,navCtrl.push()的第三个参数需要设置
{"animate":false}
关闭跳转动画【animate的值默认为true】,实现相机能够在整个屏幕中显示,如果不加相机就出不来 - 为了使得扫描更加真实,首先将扫描页面的背景设为透明,之后利用css动画设置一条绿线上下滑动告诉用户在扫描中
- 在控制器中编写scan详情逻辑:启动QRScanner,通过回调参数QRScannerStatus判断是否被授权,如果被授权再监听QRScanner的scan事件并利用alter弹框展示,如果没有被授权或是抛出异常则会执行其他逻辑,详情参见Ionic-native对QRScanner的实例讲解
- 当提示
scan.ts:65 Error: cordova_not_available
时,表示不能使用扫描功能,因为是用浏览器打开的,当使用真机测试时则不会出现此问题 - 执行
sudo ionic build
将当前项目同步打包到所有注册的平台,到对应平台测试即可
2.实例代码
more.html中添加内容
<button ion-item (click)="gotoScanQRCode()"><ion-icon name="qr-scanner" item-start color="dark"></ion-icon><ion-label>扫描二维码</ion-label> </button>
more.ts中添加内容’
//跳转进行二维码扫描页面 //一定要在第三个参数中设置关闭跳转动画{"animate":false},实现相机能够在整个屏幕中显示,如果不加相机就出不来 //animate的值默认为true gotoScanQRCode() {this.navCtrl.push(ScanPage,null,{"animate":false}); }
scan.html
<ion-header><ion-navbar><ion-title>扫描二维码</ion-title></ion-navbar> </ion-header> <!-- line样式用于编写扫描的线条效果 --> <div class="line"></div>
scan.scss
page-scan {//调用时,背景色应该完全是透明的,相机才能完全显示在页面html,body,ion-app,ion-content,ion-page,.nav-decor{//强制变成透明的background-color: transparent!important;}//设置扫描时左右滚动的绿线.line {position: absolute;z-index: 99999;top: 15px;height: 1px;width: 100%;background-color: #009900;//动画animation: scan 1s infinite alternate;-webkit-animation: scan 1s infinite alternate;}@keyframes scan {from {top: 20%;}to {top: 80%;}} }
scan.ts
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular'; import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';@Component({selector: 'page-scan',templateUrl: 'scan.html', }) export class ScanPage {constructor(public navCtrl: NavController, public navParams: NavParams,public qrScanner: QRScanner,public alterCtrl: AlertController) {}//在页面进入的时候就进行扫描ionViewDidEnter() {this.scanQRCode();}//实现扫描功能scanQRCode() {//准备启动QRScannerthis.qrScanner.prepare().then((status:QRScannerStatus)=>{//返回的QRScannerStatus是扫描的状态//判断是否被授权if(status.authorized){//如果被授权则监听扫描let scanSub = this.qrScanner.scan().subscribe((text:string)=>{//设置弹框let alter = this.alterCtrl.create({title:'二维码内容',subTitle: text,buttons:['OK']});//显示弹框alter.present();//取消监听扫描事件scanSub.unsubscribe();});//显示二维码扫描this.qrScanner.show();}//设置如果没有被授权的处理方式else if(status.denied){//提醒用户权限没有开}else{//其他操作}}).catch((e:any)=>{//当捕获异常时打印异常console.error('Error:',e);})} }
三.关于模块的App信息读取
1.开发设计
- 功能需求:关于模块的信息读取功能开发,通过Ionic native的App Version插件读取项目的版本信息
- 版本信息读取使用Ionic native的App Version插件,安装如下
sudo ionic cordova plugin add cordova-plugin-app-version
sudo npm install --save @ionic-native/app-version
- 在app.module中引入
import { AppVersion } from '@ionic-native/app-version';
,并添加到Providers中
- 生成versions显示页面
ionic g page versions
- 在more页面添加跳转到versions的逻辑
2.实例代码
more.html添加内容
<button ion-item (click)="gotoVersions()"><ion-icon name="help-circle" item-start color="dark"></ion-icon><ion-label>关于</ion-label> </button>
more.ts添加内容
//跳转到版本页面 gotoVersions() {this.navCtrl.push(VersionsPage); }
versions.html
<ion-header><ion-navbar><ion-title>版本信息</ion-title></ion-navbar> </ion-header> <ion-content><ion-list><ion-item>AppName : {{appName}}</ion-item><ion-item>PackageName : {{packageName}}</ion-item><ion-item>VersionCode : {{versionCode}}</ion-item><ion-item>VersionNumber : {{versionNumber}}</ion-item></ion-list> </ion-content>
versions.ts
import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { AppVersion } from '@ionic-native/app-version';@Component({selector: 'page-versions',templateUrl: 'versions.html', }) export class VersionsPage {appName:string;packageName:string;versionCode:string;versionNumber:string;constructor(public navCtrl: NavController, public appVersion: AppVersion,public navParams: NavParams) {}ionViewDidLoad() {//通过Appversion获取软件的版本信息this.appVersion.getAppName().then(val=>{this.appName = val;});this.appVersion.getPackageName().then(val=>{this.packageName = val;});this.appVersion.getVersionCode().then((val:string)=>{this.versionCode = val;});this.appVersion.getVersionNumber().then((val:string)=>{this.versionNumber = val;});} }
Ionic—二维码扫描与关于模块的开发相关推荐
- Hololens开发二维码扫描和场景重置
写这篇文章的目的主要是记录一下最近的工作成果,感觉有些东西还是比较有价值的. 1.二维码扫描.在Hololens上开发二维码扫描功能,其实已经有很多文章介绍过了,但大多是针对特殊版本,遇到其他版本或版 ...
- GM65条形码二维码扫描识别模块与STM32学习
目录 模块介绍: 简介: 原理介绍: 工作流程: 技术参数: 修改配置: 代码介绍: 串口函数: 主函数: 模块介绍: 简介: GM65 条形码二维码扫描识别模块是一种基于激光扫描头的识别设备 原理介 ...
- 基于Capacitor编写Ionic React二维码扫描应用
在上一篇文章中,我们简要演示了如何使用capacitor-plugin-dynamsoft-barcode-reader构建跨平台二维码扫描应用.在本文中,我们将使用Ionic React来构建一个二 ...
- ionic+Angular 手机二维码扫描
ionic+Angular 手机二维码扫描 HTML 主要二维码插件 npm install @ionic-native/qr-scanner/ngx <ion-header class=&qu ...
- Ionic二维码扫码插件QR Scanner不能扫描一维码问题
三款扫码插件优劣 在Ionic开发中经常需要用到扫码功能,这个时候就需要用到二维码扫码插件. 目前市面上主要提供了三款扫码的插件,具体的可以参考如下链接: Ionic2入门教程(十三)带你走近3款二维 ...
- Ionic二维码扫码插件QR Scanner不能扫描一维码问题(只解决了android)
三款扫码插件优劣 在Ionic开发中经常需要用到扫码功能,这个时候就需要用到二维码扫码插件. 目前市面上主要提供了三款扫码的插件,具体的可以参考如下链接: Ionic2入门教程(十三)带你走近3款二维 ...
- win10 vs2022 .net6 opencvsharp 4.5.5自己编译wecharts 微信二维码扫描模块。
文章主要介绍如何自己编译opencvsharp源码,因为需要.net 6 ,所以介绍vs2022 的编译. https://github.com/shimat/opencvsharp 首先在githu ...
- 基于MUI框架的HTML5+的二维码扫描实现
Barcode的一个实现案例 一.简介 Barcode模块管理条码扫描,提供常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入.通过plus.ba ...
- iOS原生实现二维码扫描
iOS原生实现二维码扫描 最近项目上需要开发扫描二维码进行签到的功能,主要用于开会签到的场景,所以为了避免作弊,我们再开发时只采用直接扫描的方式,并且要屏蔽从相册读取图片,此外还在二维码扫描成功签到时 ...
最新文章
- 【Dlib】dlib和opencv的互转
- Dubbo将积极适配Spring Cloud生态,Spring Cloud体系或将成为微服务的不二选择!
- 如何成为一名优秀的web前端工程师[转]
- 用css3写遨游的logo
- spring boot实现软删除
- 华为27asph是什么型号_上半年苹果全球销量第一,红米次之,华为表现不佳
- Redis的三种集群原理
- 工作不饱和 ? 给你 8 个程序员接私活的网站
- 实时 Git,在版本控制之前控制源码
- 运维实战案例之“Too many open files”错误与解决方法
- HDU 4966 GGS-DDU(最小树形图)
- cmk聪明客机器人餐厅_住了10年的老房大改造,45客餐厅全开放,更有整面大衣柜,高级又实用!...
- bat打包成exe_拜托!看完这篇文章别再问我怎么Python打包成exe了!
- Linux基本操作和基础命令(Linux修改IP地址以及修改网卡地址)
- Scratch软件编程等级考试一级——20210911
- 行尸走肉第一季/全集The Walking Dead迅雷下载
- Redis基本数据类型String——数据结构解析
- Please sign in with an app-specific password. You can create one at appleid.apple.com.
- 分享通过tensorflow证书考试的经验
- 如何高效录制教学视频?
热门文章
- 【华为云技术分享】成熟度模型:企业规模化推广敏捷和DevOps利器
- python sklearn 置信概率
- html小游戏--纯页面html小游戏贪吃蛇(基础版)
- 06、Vue-Header组件(商家信息)《饿了吗》
- 51单片机串行口程序c语言编程,单片机C语言编程串行口通讯.ppt
- 查看一篇SCI是几区的等信息的方法
- 《俞军产品方法论》:一个产品学派的诞生
- 用mosquitto替换AWS KVS(Kinesis Video Streams)之WebRTC-C库的信令控制
- yolov2 论文翻译与解读
- 算力和硬件的关系_硬件算力需求飙升,为什么软件生意越来越火?