APP-应用(使用ionic+cordova)创建

my-app

简介

版本
基础框架：Ionic: 6.19.0
基础库：[Cordova]: 11.0.0
基础语言：Angular
nodejs: v14.17.3
npm: 6.14.13
jdk: 1.8.0_71
sdk:

创建新项目

$ ionic start my-app
#创建完成之后启动预览项目
$ cd my-app
$ ionic serve

添加平台

# 添加完平台后app目录下会多了一个 platforms 文件夹
$ ionic cordova platform add android
# 如果使用命令报错[ERROR] Refusing to use Cordova inside a Capacitor project.根据提示运行
$ ionic integrations disable capacitor

添加必要插件

下载gradle插件
打开：http://services.gradle.org/distributions/ 选择 gradle-7.4.2-all.zip
下载完不用解压，直接拷贝到项目文件下的这个gradle文件下

注意：新项目没有gradle这个文件夹，需要新建一个，操作如下：
首先需要配置环境变量 path: D:\Program Files (x86)\gradle\gradle-7.4.2-all\gradle-7.4.2\bin

# 确认是否配置成功
$ gradle -v
# 创建新gradle文件
$ gradle init

修改配置
找到下面路径下的 GradleBuilder.js文件(我这里是gradle-wrapper.properties文件)
/platforms/android/cordova/lib/builders/GradleBuilder.js

将： 　　‘https\😕/services.gradle.org/distributions/gradle-7.4.2-all.zip’ 改为： 　‘…/gradle/gradle-7.4.2-all.zip’
或者安装gradle插件
windows上打包Android过程中可能会遇到cordova-android-support-gradle-release插件报错问题，请将此插件更新到最新即可，更新需要先移除插件，然后再添加插件，命令如下

ionic cordova plugin rm cordova-android-support-gradle-release;
ionic cordova plugin add cordova-android-support-gradle-release@latest;

使用步骤

安装依赖

$ npm install

安装平台

# 查看已安装的平台
$ cordova platform ls
# 安装需要的平台，比如android
$ ionic cordova platform add android
# 移除不需要的平台，比如android
$ ionic cordova platform rm android

启动

$ ionic serve

真机调测

$ ionic cordova run android -rc
$ ionic cordova run ios -rc
# 打包完成之后，将apk文件
打开android studio，选择open项目，打开 platforms-android节点，导入，等待片刻，点击debugger按钮，

打包

$ ionic cordova build android

插件

调用NFC的插件是phonegap-nfc

$ ionic cordova plugin add phonegap-nfc
$ npm install @ionic-native/nfc

安装完成需要在项目里面注入依赖，首先是 app.module.ts 文件里面，引入插件

import {NFC, Ndef} from '@ionic-native/nfc/ngx';

然后在 @NgModule 里面的 providers 里面加入 NFC 和 Ndef，就像这个样子：

providers: [
        ···
        NFC,
        Ndef,
        ···
    ],

然后在需要调用的页面里面引入插件，注入一下依赖：

import {NFC, Ndef} from '@ionic-native/nfc/ngx';

在构造函数里面加点东西：

constructor(private nfc: NFC, private ndef: Ndef) {}

最后监听 NFC 就可以了，可以写一个方法，都行，开心就好。

this.nfc.addTagDiscoveredListener(() => {
    console.log('successfully attached ndef listener');
    alert('启动监听nfc');
}, (err) => {
    alert('监听nfc失败' + err);
    console.log('error attaching ndef listener', err);
}).subscribe((event) => {
    this.tag = event.tag;
    this.id = this.nfc.bytesToHexString(event.tag.id);
});

还有 addTagDiscoveredListener 方法是 为匹配任何标签类型的标签注册一个事件侦听器。
如果需要其他的监听类型可以修改，下面是官方的文档，有很多类型根据自己的需要改吧！
监听器官方文档

常用命令

# 注：常用命令
#（npm镜像源指向淘宝）
npm install -g cnpm --registry=https://registry.npm.taobao.org
# （安装cordova 6.x和 ionic 2.x）
cnpm install -g cordova@6 ionic@2
# （安装最新版cordova ionic）
cnpm install -g cordova ionic
# （更新cordova ionic）
cnpm update -g cordova ionic
# （查看帮助）
ionic -help
# （查看版本）
ionic -v
# （查看版本）
cordova -v 

# （创建项目并跳过npm安装使用cnpm安装步骤1）
ionic start yourAppName tutorial --v2 --skip-npm
# （创建项目并跳过npm安装使用cnpm安装步骤2）
cnpm install

# （空项目）
ionic start myApp blank –-v2
# （带导航条）
ionic start myApp tabs –-v2
# （带侧滑菜单）
ionic start myApp tutorial –-v2

# （查看项目已安装平台）
cordova platform ls
# （添加android平台）
ionic cordova platform add android
# （移除android平台）
ionic cordova platform rm android

# （编译项目apk）
ionic build android
# （用--prod编译项目apk并签名）
ionic build android -–prod –-release 
# （运行项目apk 手机连接在手机运行 模拟器连接在模拟器运行）
ionic emulate android
# （相当于build + emulate）
ionic run android 
# （开启服务调试）
ionic serve

配置

jdk：本地地址:D:\Program Files (x86)\Java\jdk1.8.0_71
sdk：本地地址:D:\Program Files (x86)\sdk
环境变量配置
添加JAVA_HOME:D:\Program Files (x86)\Java\jdk1.8.0_71
添加ANDROID_HOME:D:\Program Files (x86)\sdk
path添加：%JAVA_HOME%bin;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
检查配置是否正确
javac
android -h

SDK配置
SDK Manager.exe工具
打开界面上的Tools,选择options，先配置国内镜像：

域名千万不要输入http或者https协议前缀
HTTP Proxy Server：mirrors.neusoft.edu.cn
HTTP Proxy Port：80

回到主界面，点packages再点reload

config.xml配置
app基本信息：

<name>NFC读写</name>
<description>NFC读写App用于对NFC卡进行简单的读写操作.</description>
<author email="king6180@gmail.com" href="http://www.egtch.com/">Kexin front-end engineer</author>

applogo:
替换assets里面的icon和svg

图标生成
各种尺寸的
[icon]
提供1024*1024的icon.png图片, 放到根目录下的resources目录下, 执行命令就能生成各个尺寸的图片了

$ ionic cordova resources --icon

[splash]

$ ionic cordova plugin add cordova-plugin-splashscreen
# 同样的提供2732*2732的splash.png图片, 执行命名
ionic cordova resources --splash

最后记得将其添加到platform中

报错

打包出现ANDROID_SDK_ROOT=undefined (recommended setting)

环江变量配置ANDROID_SDK_ROOT
ANDROID_SDK_ROOT 变量值同 ANDROID_HOME

No usable Android build tools found. Highest 30.x installed version is 30.0.0-preview; Recommended version is 30.0.3

根据SDK配置下载build tools 30.0.3以上的版本的tool
无法下载到30.0.3以上的版本，就降低gradle版本

Parsing error: Cannot read file ‘d:\studyspace\app\tsconfig.json’.

d:\studyspace\app\tsconfig.json路径不对，更换路径即可

UnhandledPromiseRejectionWarning: Error: The target entry-point “@ionic-native/nfc” has missing dependencies: [ng] - @ionic-native/core

提示@ionic-native/core未识别到,以下命令安装依赖

$ npm i @ionic-native/core

打包android程序过慢

1.kotlin-compiler-embeddable-1.5.21.jar下载慢
解决：手动添加官网下载的jar包
在文件夹C:\Users\CQL\.gradle\caches\modules-2\files-2.1\org.jetbrains.kotlin\kotlin-compiler-embeddable\1.5.21\b7d083256154ce255baa44547e3156505e18d29a目录下添加

修改过splash图片可能会出现打包错误的问题 - Execution failed for task ‘:mergeDebugResources’.

办法是在platforms\android\build.gradle中加入下面这段

android {
    aaptOptions.cruncherEnabled = false
    aaptOptions.useNewCruncher = false

真机调试命令找不到真机

手机端：
打开手机开发者权限，”设置“ 中找到 “版本号”，连续多次点击，会提示打开“开发者”。我的是 “设置” --> “关于手机” --> “版本号”，
开发人员选项 --> 允许“USB调试”
电脑端：
打开Android Studio --> 选择“file” --> ‘Settings’​
勾选SDK Tools 里面的Google USB driver并安装
查看需要连接的手机的Andriod版本号，还是在这个页面，SDK Platforms --> 勾选对应的手机版本号 -->下载完了就行
打开“设备管理器”，找到自己的手机型号，鼠标右键，选择“更新驱动程序”
选第二个“浏览我的计算机…”–> 找到刚刚安装GOOGLE USB DRIVER的目录，复制 ，粘贴到此电脑，找到这个目录，复制，我的是“D:\Program Files (x86)\sdk\extras\google\usb_driver” --> 粘贴到刚刚的设备管理器那里 --> “下一步”
最后在android studio 里面添加真机设备

注意：apk文件应该在android studio的profile or debug APK这种方式打开