ionic3 开发问题3年大总结

精选原创

风沉醉的梦 2024-03-31 19:58:25 博主文章分类：ionic ©著作权

文章标签 android iOS ionic ionic3 cordova 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者风沉醉的梦的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、ionic问题

1. 添加ios/android 平台报自定义插件文件找不到

原因：因为.gitignore 中添加了www ,导致自定义插件中的www文件没有提交上去

解决：从其他项目将plugins下的插件拷贝到新项目下，重新add platform；或将_SDK中的插件复制到项目的plugins 文件下;同时修改 .gitignore 中的 www/ 为 /www

2. webpack 编译过慢，修改webpack版本方法

进入 node_modules/@ionic/app-scripts

修改 package.json: "webpack": "3.5.5",

进入项目根目录，执行:

npm install webpack@3.5.5 && npm uninstall webpack@3.12.0

3. ionic 开发过程中解决跨域问题

在.ionic.config.json 中添加一下内容

"proxies": [
  {
    "path": "/cq",    // 你的简写地址
    "proxyUrl": "http://ip/mobile"    // 代理地址
  }
]

4. build --prod 包内存益出

<--- Last few GCs --->

[466:0x103800000]   256943 ms: Mark-sweep 1314.6 (1445.2) -> 1313.1 (1447.2) MB, 455.2 / 0.0 ms  (average mu = 0.153, current mu = 0.051) allocation failure scavenge might not succeed
[466:0x103800000]   257671 ms: Mark-sweep 1319.0 (1447.2) -> 1315.2 (1450.2) MB, 707.2 / 0.0 ms  (average mu = 0.082, current mu = 0.028) allocation failure scavenge might not succeed
<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x3f1f7715be3d]
    1: StubFrame [pc: 0x3f1f7715d3c6]
Security context: 0x29ac2ed9e6e1 <JSObject>
    2: /* anonymous */(aka /* anonymous */) [0x29ac38567d61] [/Users/zyh/work/apps/ctfgps/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Stats.js:~342] [pc=0x3f1f7a4fad9c](this=0x29ac74c826f1 <undefined>,reason=0x29ac1d5ca829 <ModuleReason map = 0x29ac5fc1c821>)
    3: arguments adaptor frame: 3->1
    4: map [...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

大概原因：build 时使用的内存大于node 默认的使用内存，因此把node 的默认内存扩大即可。打开

node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js

把第一行
#!/usr/bin / env node

换成
#!/usr/bin/env node --max-old-space-size=4096


尝试值1024和2048，但对于相对较大的应用程序，您可能需要4096

5. build 过程 sass 问题

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (67)

解决：

npm rebuild node-sass

6. ion-select popover内容显示不全问题：

<ion-select [selectOptions]="{'cssClass': 'wider-popover'}" />

二、插件踩坑

1. 热代码更新插件code-push

(2) 推送更新

构建项目：ionic cordova prepare ios/android --prod

推送：

Android：

code-push release jxgc-android ./platforms/android/app/src/main/assets/www/ 0.0.2 --description "1、测试热推送-打卡测试\n" -d "Staging"

code-push release-cordova jxgc-android android -d Production --description '解决已知bug，建议全部更新'

清理：

code-push deployment clear jxgc-android Production

2. 附件选择-上传-下载-查看

需要的插件

// 选择插件
ionic cordova plugin add cordova-plugin-filechooser

//解析原生路径插件
ionic cordova plugin add cordova-plugin-filepath
//上传、下载插件同图片，file Transfer

//利用默认程序打开文件
ionic cordova plugin add cordova-plugin-file-opener2

遇到的问题

选择文件：
fileChooser.open() 文件选择文件选择后返回的是原生路径URI，中文会被转码，导致上传的时候文件名是转码后的文字；因此要通过filePath.resolveNativePath 转一下
下载存放的路径：
this.file.externalRootDirectory ：系统根目录下
this.file.dataDirectory：本app的目录下
下载后
fileTransfer.download(url, saveUrl).then(entry），要使用entry.toURL() 路径打开
打开报 state：9，message：Activity not found: No Activity found to handle Intent手机没有装打开此类型的软件

3. 极光推送获取不到res id 但也不报错

将极光推送版本升级到 3.7.3 即可；原因是cordova-plugin-jcore 已经是1.3.1高版本了，但是原来的配置文件jpush-phonegap-plugin为3.6.4低版本。jpush 依赖jcore.

4. 百度插件不能用bug

原因：Cordova高版本，Android 项目的目录结构变了，而百度地图的路径依旧是以前的路径；

将platforms/android/app/src/com/aruistar 复制到 platforms/android/app/src/main/java/com目录下

5. 安卓重新add android 打开图片选择应用闪退

解决步骤：（非最新，根据具体情况解决）

imagePicker 插件android崩溃：修改project.properties

com.android.support:appcompat-v7:23+ => com.android.support:appcompat-v7:27+

6. 图片插件提示文字改为中文

找到目录platforms/android/res有国际化的几个文件夹

values-de values-es values-fr values-hu

复制其中一个文件夹，修改为values-zh，然后修改其中的xml文件为multiimagechooser_strings_zh.xml。打开multiimagechooser_strings_zh.xml文件，替换成如下内容即可。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="multi_app_name">图片选择器</string>
    <string name="free_version_label">免费版本 - 剩余图片: %d</string>
    <string name="error_database">打开相册出现错误.</string>
    <string name="requesting_thumbnails">请稍后...</string>
    <string name="processing_images_header">图像选择</string>
    <string name="processing_images_message">这可能是一个短暂的瞬间的时间.</string>
    <string name="maximum_selection_count_error_header">Auswahllimit erreicht</string>
    <string name="maximum_selection_count_error_message">Sie können maximal %d Bilder auf einmal auswählen.</string>
    <string name="discard">取消</string>
    <string name="done">确定</string>
</resources>

修改源码文件platforms/android/src/com/synconset/MultiImageChooserActivity.java

progress = new ProgressDialog(this);
        progress.setTitle(getString(fakeR.getId("string", "multi_image_picker_processing_images_title")));
        progress.setMessage(getString(fakeR.getId("string", "multi_image_picker_processing_images_message")));
        progress.setTitle("图片处理");
	progress.setMessage("请稍后...");
// 另外一处
        new AlertDialog.Builder(this)
                    .setTitle("提示")
                    .setMessage("您只能选择 " + maxImageCount + "张图片")
                    .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            dialog.cancel();
                        }
                    })
                    .create()
                    .show();

三、iOS 相关问题

1. 添加iOS平台时

错误：

Source image files were not found for the following platforms/types:
        
        - ios/icon

原因resource文件下缺少icon.png；将项目的logo添加即可；iOS平台是已经添加成功了的。

2. Xcode build 失败

命令行执行： ionic cordova build ios 执行失败

通过一下命令：

在XCode的菜单中，选择"File" -> "Project Settings "，选择"Legacy Build System"，然后：

// run
ionic cordova run ios -- --buildFlag="-UseModernBuildSystem=0"
// build
ionic cordova build ios -- --buildFlag="-UseModernBuildSystem=0"

3. 如果使用上面的命令build iOS 还是报错，检查APPBackgroundMode.m文件

/platforms/ios/xxx/Plugins/cordova-plugin-background-mode/APPBackgroundMode.m

中，修改👇

NSString* str = @"X2Fsd2F5c1J1bnNBdEZvcmVncm91bmRQcmlvcml0eQ==";

为：

NSString* str = @"YWx3YXlzUnVuc0F0Rm9yZWdyb3VuZFByaW9yaXR5";

4. 使用AppAvailability检查APP是否存在的时候

ios需要添加LSApplicationQueriesSchemes:url_scheme

5. 部分老iOS 版本手机闪退，因为需要添加蓝牙权限说明：

原因：iOS系统要求对蓝牙等功能使用添加说明

蓝牙说明： Privacy - Bluetooth Always Usage Description

6. 第三方IOS app打开本app，iOS不成功

解决步骤：

检查cordova-plugin-ionic-webview 和cordova-plugin-inappbrowser 插件版本

cordova-plugin-ionic-webview 升级到3.0即可

7. build iOS 报： Cannot read property 'toLowerCase' of undefined 错误

原因：xcode 11与list-emulator-build-targets文件中的验证存在一些冲突

解决办法： list-emulator-build-targets文件中：

第50行：将以下语句更改为以下内容：

var availableDevices = Object.keys(devices).reduce(function (availAcc, deviceCategory) {
    var availableDevicesInCategory = devices[deviceCategory];
    availableDevicesInCategory.forEach(function (device) {
    if ( === .replace(/\-inch/g, ' inch') && 
        !("availabilityError" in device))
    {
           availAcc.push(device);
     }
    });
    return availAcc;
   }, []);

或者卸载platform iOS 重新安装最新版本的cordova-ios

8. ios build 出现下面错误1：

CordovaError: Promise rejected with non-error: 'xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance\n'
at cli.catch.err (/usr/local/lib/node_modules/cordova/bin/cordova:30:15)
at process._tickCallback (internal/process/next_tick.js:68:7)

原因：

可能重装了系统，xcodebuild找不到Xcode，所以我们要重定向一下Xcode的文档的位置

解决办法：

//命令行执行
$ sudo xcode-select --switch /Applications//Contents/Developer/

9. ios build 出现下面错误2：

/ctfgps/platforms/ios/xxx/Plugins/cordova-plugin-fingerprint-aio/Fingerprint.swift:44:32: error: 'deviceOwnerAuthentication' is only available on iOS 9.0 or newer
        var policy:LAPolicy = .deviceOwnerAuthentication;

如果Xcode版本>=9.2需要在config.xml添加

<preference name="UseSwiftLanguageVersion" value="3.2" />

10. 通过url schemes 打开其他app在iOS上失效问题

**原因：** 因为iOS9的时候苹果加强了权限，只有在info.plist文件中加入了URL Schemes白名单才能使用canOpenURL

**解决：** 在MyApp的info.plist里面将weixin设置为白名单。

步骤：点击info.plist->右键->Open As->Source Code->添加下面的代码

<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>weixin</string>
    </array>

11. iOS 常用权限列表

相册 NSPhotoLibraryUsageDescription
相机 NSCameraUsageDescription
麦克风 NSMicrophoneUsageDescription
位置 NSLocationUsageDescription
在使用期间访问位置NSLocationWhenInUseUsageDescription
始终访问位置 NSLocationAlwaysUsageDescription
日历 NSCalendarsUsageDescription
提醒事项 NSRemindersUsageDescription
运动与健身 NSMotionUsageDescription
健康更新 NSHealthUpdateUsageDescription
健康分享 NSHealthShareUsageDescription
蓝牙 NSBluetoothPeripheralUsageDescription
媒体资料库 NSAppleMusicUs
指定您的应用获得用户照片库的只写访问权限的原因 NSPhotoLibraryAddUsageDescription

四、Android 相关问题

1. 从本地_SDK文件夹中安装插件

ionic cordova plugin add file:_SDK/com.xxx.xxx

此时如果修改包名，同时安装修改前后的两个app时android会提示“与已安装应用内容提供者冲突”,

原因： 插件的包名依旧为修改前的，从而安卓配置文件AndroidManifest.xml中 authorities 仍为以前的包名；

解决办法： 修改插件包名

2. 安卓打开程序时，弹出此bug：application Error the connection to the server was unsuccessful (file://android_asset/www/index.html)

原因：index.html 中引用了第三方js文件，请求加载时第三方js抛出超时错误

解决：在config中加入：<preference name="loadUrlTimeoutValue" value="700000" />

（loadUrlTimeoutValue加载页面时，在抛出超时错误之前等待的时间。）

存在的隐患：项目中可能需要重新安装Android平台

3. 打包过程中遇到的问题 AAPT not found

C:\Users\Administrator\.gradle\caches\transforms-1\files-1.1\appcompat-v7-23.4.0.aar\78f708fa0f6b827f3a30e138b1d80db0\res\values\values.xml:102:5-69: AAPT: error: resource android:attr/fontVariationSettings not found.

AAPT: error: resource android:attr/ttcIndex not found.

com.android.ide.common.process.ProcessException: Failed to execute aapt
    ......

解决办法：在 build.gradle 文件中添加

configurations.all {
    resolutionStrategy {
        force 'com.android.support:support-v4:27.1.0'
    }
}

问题参考链接：github

4. Android 9 以后不允许http

解决办法：

在Mainfiests appliction标签下配置该属性

android:networkSecurityConfig="@xml/network_security_config"

创建在 res 下新建一个xml目录，然后创建一个名为：network_security_config.xml 文件（名字自定）内容如下：

<uses-library
            android:name="org.apache.http.legacy"
            android:required="false" />

5. Android 运行debug可以请求接口，release包无法请求，已处理http

小米等手机，监测非应用商店app，默认会禁止网络连接，因此无法访问

6. Android 漏洞基础修复

在Mainfiests appliction标签下配置一下属性

android:allowBackup="false" android:taskAffinity="" tools:replace="android:allowBackup"

在manifest 标签下添加：

xmlns:tools="http:///tools"

7. app进入后台后再打开app，app重启

原因：是因为没有加前台服务权限，在Android中添加下面权限

<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>

8. 从相册选择图片没有反应

日志如下：

"Unable to find explicit activity class {....synconset.MultiImageChooserActivity}; have you declared this activity in your AndroidManifest.xml?"

原因：插件的原因，如果插件已经安装了，你做了platform remove，然后platform add，节点不会添加到Android清单（像它应该在这里）。删除插件并重新添加可以修复它。或者在config.xml中 <platform name="android"></platform> 添加如下内容：

<config-file parent="/manifest/application" platform="android" target="AndroidManifest.xml">
        <activity android:label="@string/multi_app_name" android:name="com.synconset.MultiImageChooserActivity" android:theme="@style/Theme.AppCompat.Light" />
    </config-file>

ionic3 开发问题3年大总结_cordova