项目经验Ionic中根据登录的账户名和账户id生成二维码

Posted 2022-12-11 Yolanda94

目录

         一、项目前提：

二、项目宏观说明：

1、基于Ionic4项目：

 2、组件包括：根组件app和二维码组件ngx-qrcode2；

 3、二维码是依据登录的账户名和账户id生成的，所以这里有一个前提是开发的系统必须是有登录系统的（否则无法获取登录的账户名和账户id）。

三、开发过程：

1、准备工作：

2、具体代码编写：

2、父组件的配置：

项目启动，预览最后的显示效果：

最后的开发效果图如下：

---

【背景】

体测项目中需要在手机端的学生端实现生成学生的体测二维码功能，因为整个项目是使用的ionic，所以采用ionic实现，还有其他的实现方式，这里主要介绍一下如何用ionic实现。

【内容】

一、项目前提：

据开发项目ITOO-体测具体情况，需要开发生成二维码组件，此组件以Ionic框架为基础。

 

二、项目宏观说明：

1、基于Ionic4项目：

 2、组件包括：根组件app和二维码组件ngx-qrcode2；

 3、二维码是依据登录的账户名和账户id生成的，所以这里有一个前提是开发的系统必须是有登录系统的（否则无法获取登录的账户名和账户id）。

 

三、开发过程：

1、准备工作：

（1）npm包拉取：下载项目源码后，安装npm包：npm install或者cnpm install还有yarn install都可以。

cnpm install /npm install/yarn install

（2）添加插件- ngx-qrcode2：安装二维码插件-ngx-qrcode2：cnpm install ngx-qrcode2 –save或者yarn add ngx-qrcode2 –save都可以。

cnpm install ngx-qrcode2 –save

yarn add ngx-qrcode2 –save

执行过程截图：

（3）添加@ionic/storage包- @ionic/storage: 使用cnpm install @ionic/storage或者yarn add @ionic/storage安装都可以。

cnpm install @ionic/storage

yarn add @ionic/storage

安装成功后package.json文件界面截图：

（4）创建页面- qr-code（要显示二维码的界面）：在相应的页面文件夹下使用ionic g pages QR-code命令建立qr-code页面。

ionic g pages qr-code

创建成功qr-code页面后的截图：

也可以只输入ionic g，根据系统提示一步步建立qr-code页面。

（5）在qr-code.module.ts中引入二维码插件：主要是下面两句，具体位置见下面截图：

      注意！！！不是也不需要再app.module.ts文件里引入！！！

import  NgxQRCodeModule  from 'ngx-qrcode2';

NgxQRCodeModule,

2、具体代码编写：

（1）开发qr-code.page.html页面：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>我的二维码</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="contentback" color="light">
  <br />
  <ion-card style="border-radius:12px;background:white" *ngIf="createdCode">      
    <ion-item>
      <ion-thumbnail slot="start">
        <img src="assets/images/头像.png" style=" border-radius:12px;">
      </ion-thumbnail>
      <ion-label>
        <h2>userName</h2>
        <p>userCode</p>
      </ion-label>
    </ion-item>
    <ngx-qrcode [qrc-value]="userCode + '/' +  userName" qrc-class="qrcode" qrc-margin="1" qrc-errorCorrectionLevel="L"></ngx-qrcode>
    <ion-card-content style="text-align: center">扫一扫上方的二维码图案,可以进行体测哦</ion-card-content>
  </ion-card>
</ion-content>

（2）开发qr-code.page.ts页面：

import  Component, OnInit  from '@angular/core';
import  NavController  from '@ionic/angular';
import  InterceptorService  from '../../shared/providers/interceptor.service';
import  Storage  from '@ionic/storage';

@Component(
  selector: 'app-qr-code',
  templateUrl: './qr-code.page.html',
  styleUrls: ['./qr-code.page.scss'],
)
export class QrCodePage implements OnInit 
  // 生成二维码定义变量
  qrData = null;
  createdCode = null;
  scannedCode = null;
  userCode: string;
  userName: string;
  constructor(
    public http: InterceptorService,
    public navCtrl: NavController,
    public storage: Storage,
  ) 
  

  ngOnInit() 
    this.createCode();
  

  createCode() 
    this.storage.get('userCode').then((val) => 
      this.userCode = val;
    );
    this.storage.get('userName').then((val) => 
      this.userName = val;
    );
    this.createdCode = this.userCode + '/' + this.userName;
    if (this.createdCode === '' || this.createdCode === null || this.createdCode === undefined)  // "",null,undefined
      this.userName = '请重新登录！！！';
    
  

2、父组件的配置：

（1）父组件：student-main.page.html：主要是父组件html页面需要一个能跳转到生成二维码页面的组件（可以是按钮也可以是其他）必须有click事件。

// 可跳转到二维码的按钮（此处可省略）
<ion-button ion-button color="dark" (click)="code()">二维码</ion-button>

（2）模块：student-main.page.ts：主要是父组件ts文件里需要写能跳转到生成二维码页面的路由。

import  Component, OnInit  from '@angular/core';
import  Router  from '@angular/router';
@Component(
  selector: 'app-student-main',
  templateUrl: './student-main.page.html',
  styleUrls: ['./student-main.page.scss'],
)
export class StudentMainPage implements OnInit 

  constructor(public router: Router)  

  ngOnInit() 
  
  score()
    this.router.navigateByUrl('tabs/home/student-main/score-show')
  
  standard()
    this.router.navigateByUrl('tabs/home/student-main/physical-standard')
  
// 二维码页面路由
  code() 
    this.router.navigateByUrl('tabs/home/student-main/qr-code');
    

PS：以上添加注释的地方，是在开发生成二维码组件需要配置的，具体配置的地方需要根据开发人员开发的具体模块决定。

至此，根据登录的账户名和账户id就大功告成啦！恭喜你，非常棒！

项目启动，预览最后的显示效果：

ionic serve

最后的开发效果图如下：

IOS端显示效果：

安卓端显示效果：