Ionic—二维码扫描与关于模块的开发

版权声明：作者已开启版权声明，如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/85222623

一.二维码扫描功能布局开发

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中引入QRScannerimport { 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() {
      //准备启动QRScanner
      this.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;
        });
    }
  }