ionic app 開發(fā)學(xué)習(xí)

---

文章目錄

• ionic app 開發(fā)學(xué)習(xí)
• 一、創(chuàng)建ionic項(xiàng)目
• 二、打包生成 android APP 測試版本
• 三、二維碼掃描功能實(shí)現(xiàn)（Barcode Scanner）

一、創(chuàng)建ionic項(xiàng)目

1. 安裝ionic

npm i –g @ionic/cli

2. 檢測ionic環(huán)境

ionic –V

3. 創(chuàng)建ionic項(xiàng)目

ionic start name blank

4. 下載相關(guān)依賴

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

二、打包生成 android APP 測試版本

第一步： 生成ionic項(xiàng)目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 平臺內(nèi) 進(jìn)行如下操作Build => Build Bundle(s) / APK(s) => Build APK(s) 即可得到apk

三、二維碼掃描功能實(shí)現(xiàn)（Barcode Scanner）

1. ionic二維碼掃描Barcode Scanner插件安裝

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

2. 在要調(diào)用的頁面的XXX.moudles.ts文件內(nèi)導(dǎo)入。如下：

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

3. 在要調(diào)用的頁面的XXX.page.ts文件內(nèi)導(dǎo)入、創(chuàng)建方法。如下：

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

4. 使用Barcode Scanner插件實(shí)現(xiàn)二維碼、條形碼掃描

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

5. 在要調(diào)用的XXX.page.html頁面內(nèi)test方法，如：

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

6. 之后通過ionic命令生成APP測試：

ionic capacitor add android

---

小袁記錄（2022-02-18）

總結(jié)

以上是生活随笔為你收集整理的ionic app 开发学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。