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)