ionic app 开发学习

2024-04-12 01:01:30

ionic app 开发学习

文章目录

ionic app 开发学习
一、创建ionic项目
二、打包生成 android APP 测试版本
三、二维码扫描功能实现（Barcode Scanner）

一、创建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）

ionic app 开发学习相关推荐

HTML5+app开发学习之快速入门篇
HTML5+app开发学习之快速入门篇 5+app开发概念理解相关开发环境与支持快速入门实战 5+app开发概念理解相关见博文:学习跨平台移动应用开发必须理解的一些概念开发环境与支持开发环境 ...
高性能Cordova App开发学习笔记
高性能Cordova App开发学习笔记文件结构添加插件构建准备各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...
app开发学习需要经历哪些流程
app开发学习需要经历哪些流程?如何零基础入门app开发?以下是知乎热心开发者的经验总结,对学习app开发有很好的参考意义 1.如果没有编程基础的,学习基础知识的过程肯定是必须的. 2.有了一些基础之 ...
HTML5+app开发学习之调试篇
HTML5+app开发学习之调试篇调试方式介绍一边改边看调试方式介绍二真机运行 HBuilder/HBuilderX真机联调常见问题调试方式介绍三 Android调试(Chrome) 调试方 ...
APP开发学习思路指导
1.首先,手机APP的开发技术(Android开发): 1.Android入门 2.JAVA基本语法 3.界面开发技术(UI) 4.数据存储技术(数据库) 5.网络编程 6.服务器端 2.html5在 ...
【app开发学习】APP开发的标准流程
最近公司外包要增加APP项目团队,领导有意让我带队,但之前开发App都是自己写点小工具来玩玩兴致一下而已,所以现在只好加班加点的在找些资料学习,也在这做一下分享. 通常一般的APP开发及上线流程步骤 ...
混合app开发学习笔记
什么是混合移动App开发[重点] 苹果上的软件是如何开发出来的:使用的是 OC.或者使用Swift这门语言安卓平台上的软件又是如何开发出来的:使用安卓相关的语言开发的,Java,安卓的控件进行开发 ...
HTML5 混合APP开发学习笔记（三）——CSS样式设计
CSS样式设计 CSS高级特性继承性书写CSS样式时,子标签会自动继承父标签的某些样式,恰当地使用继承这个特性可以简化代码,降低CSS样式的复杂性以下CSS样式不能被继承: 边框属性边距和填充 ...
HTML5+app开发学习之打包配置文件介绍篇
目录 manifest.json配置文件说明云端打包说明离线打包说明 APP在开发完成之后需要打包发布提供给别人安装使用,那么打包之前,必须要做的一件事就是配置好APP的各项信息.manifest ...
ionic app 开发和生产环境的配置
前言像 Angular2 一样,希望 ionic 可以提供 2 个文件 ( environment.dev.ts 和 environment.prod.ts ),其中包含与开发和生产环境相对应的不同 ...

最新文章

热门文章