ionic app 开发学习

ionic app 开发学习

---

一、创建ionic项目

1. 安装ionic

npm i –g @ionic/cli

2. 检测ionic环境

ionic –V

3. 创建ionic项目

ionic start name blank 

4. 下载相关依赖

npm i @ionic-native/in-app-purchase-2
npm i cordova-plugin-purchase5
ionic capacitor add android

二、打包生成 android APP 测试版本

第一步： 生成ionic项目ionic start dev blank --type = angular --capacitor --package-id=com.dev.iap
第二步：npm i @ionic-native/in-app-purchase-2
第三步：npm i cordova-plugin-purchase
第四步：ionic build
第五步：ionic capacitor add android
第六步： 用android studio打开生成的android文件，并同意安装所需依赖
第七步： 在android studio 平台内 进行如下操作Build => Build Bundle(s) / APK(s) => Build APK(s) 即可得到apk

三、二维码扫描功能实现（Barcode Scanner）

1. ionic二维码扫描Barcode Scanner插件安装

npm i phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner

2. 在要调用的页面的XXX.moudles.ts文件内导入。如下：

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
providers: [
    BarcodeScanner
],

3. 在要调用的页面的XXX.page.ts文件内导入、创建方法。如下：

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
 
constructor(
    private barcodeScanner: BarcodeScanner
) {}

4. 使用Barcode Scanner插件实现二维码、条形码扫描

test() {
    this.barcodeScanner.scan().then(barcodeData => {
       alert(JSON.stringify(barcodeData));
    }).catch(err => {
        alert(err);
    });
}

5. 在要调用的XXX.page.html页面内test方法，如：

<ion-button (click)="test()">扫一扫</ion-button>

6. 之后通过ionic命令生成APP测试：

ionic capacitor add android

---

小袁记录（2022-02-18）