cordova + ionic混合开发常见问题

1.ion-content 内置元素边距问题

在使用的过程中发现ion-content里的元素都距四周有一定的距离，在实际需求中不需要四周距离，经查阅文档去掉ion-content 里面的padding属性即可。

2.ionic app 国际化

经查阅文档和博客目前ionic+cordova混合开发的app目前国际化较好的方案是ngx-translate

2.1 插件安装

• Angular5安装

cnpm install @ngx-translate/core@^9.11  --save

cnpm install @ngx-translate/http-loader@2.0.1 --save

• angular4安装：

npm install @ngx-translate/core@^7.2.2  --save

cnpm install @ngx-translate/http-loader  --save

• angular6+ 需要安装10.0.0+版本的国际化插件

2.2 插件设置

app.module.ts引入服务

//引入国际化
import { TranslateLoader,TranslateModule} from '@ngx-translate/core';
//加载国际化静态资源文件
import { TranslateHttpLoader} from '@ngx-translate/http-loader';
//通过http的方式加载
import { HttpClient,HttpClientModule } from "@angular/common/http";

国际化的一些配置

export function create(http:HttpClient) {
//加载资源的位置
  return new TranslateHttpLoader(http,'./assets/i18n/','.json');
}

加入到模块

HttpClientModule,
TranslateModule.forRoot({loader:{
  provide:TranslateLoader,
  useFactory:(create),
  deps:[HttpClient]
}})

创建国际化资源文件

内容是一个json文件，例如

en.json

{
    "LOGIN":{
        "TITLE":"ACOINFO",
        "USER_NAME":"username",
        "PASSWORD":"password",
        "LOGIN_BUTTON":"sign in"
    },
    "ME":{
        "ACCOUNT":"account:",
        "CHANGE_LANGUAGE":{
            "LABEL":"language",
            "CANCEL":"cancel",
            "OK":"OK"
        },
        "IMG":{
            "AVATAR":"./assets/imgs/logo.png"
        }
    }
}

Zh-CN.json

{
    "LOGIN":{
        "TITLE":"翼辉信息",
        "USER_NAME":"用户名",
        "PASSWORD":"密码",
        "LOGIN_BUTTON":"登录"
    },
    "ME":{
        "ACCOUNT":"账号：",
        "CHANGE_LANGUAGE":{
            "LABEL":"语言",
            "CANCEL":"取消",
            "OK":"确定"
        },
        "IMG":{
            "AVATAR":"./assets/imgs/avatar.png"
        }
    }
}

如何在页面上使用

如果不是懒加载页面则只需在在页面的ts文件中导入

import { TranslateService}from '@ngx-translate/core'

//构造函数声明变量
constructor(public navCtrl: NavController, public navParams: NavParams,
            public translate:TranslateService) {
}

页面使用

<ion-label>{{"ME.CHANGE_LANGUAGE.LABEL"|translate }}</ion-label>

如果延迟加载页面则在页面module.ts文件中引入

//引入
import { TranslateModule} from '@ngx-translate/core';


@NgModule({
  declarations: [
    MePage,
  ],
  imports: [
    IonicPageModule.forChild(MePage),
//引入
    TranslateModule
  ],
})

2.3设置语言类型

参数就是我们我们静态资源文件名

//设置默认语言
this.translate.setDefaultLang(‘en’);
//设置使用的语言
this.translate.use(‘en’);

2.4获取本机系统语言环境

navigator对象可以获取本机系统的语言类型
navigator.language就可以获取系统语言环境

3.使用插件打包错误问题

问题原有：由于需求需要使用file-transfer文件传输插件，执行打包命令导致如下错误

C:\Users\liukai@acoinfo.co\WebstormProjects\router-management\platforms\android\src\org\apache\cordova\filetransfer\FileTransfer.java:49: ????: ?????org.apache.cordova.fil
e??????
import org.apache.cordova.file.FileUtils;
                              ^
C:\Users\liukai@acoinfo.co\WebstormProjects\router-management\platforms\android\src\org\apache\cordova\filetransfer\FileTransfer.java:851: ????: ?????????
                        FileUtils filePlugin = (FileUtils) pm.getPlugin("File");
                        ^
  ????: ?? FileUtils
C:\Users\liukai@acoinfo.co\WebstormProjects\router-management\platforms\android\src\org\apache\cordova\filetransfer\FileTransfer.java:851: ????: ?????????
                        FileUtils filePlugin = (FileUtils) pm.getPlugin("File");
                                                ^
  ????: ?? FileUtils
?: ?Щ???????????????????? API??
?: ?й???????, ????? -Xlint:deprecation ???±???
?: C:\Users\liukai@acoinfo.co\WebstormProjects\router-management\platforms\android\src\org\apache\cordova\filetransfer\FileTransfer.java?????δ???????????????
?: ?й???????, ????? -Xlint:unchecked ???±???
3 ??????

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
:compileDebugJavaWithJavac FAILED

BUILD FAILED

Total time: 2.923 secs
Error: Error code 1 for command: cmd with args: /s,/c,"C:\Users\liukai@acoinfo.co\WebstormProjects\router-management\platforms\android\gradlew cdvBuildDebug -b C:\Users\liukai@acoi
nfo.co\WebstormProjects\router-management\platforms\android\build.gradle -Dorg.gradle.daemon=true -Pandroid.useDeprecatedNdk=true"
[ERROR] An error occurred while running subprocess cordova.

        cordova run android exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

通过查阅博客和官方社区，大致原因是，插件版本过高，cordova-android版本低于6.3.0所导致的问题。

解决方案如下：

//移除低版本的平台
ionic cordova platform remove android
//添加高版本的平台
ionic cordova platform add android@6.3.0

4. Themeable Browser插件加载不到图标

版本ionic4
将plugins/cordova-plugin-themeablebrowser/src/android/res/drawable-xhdpi/下的图片copy到platforms/android/app/src/main/res/drawable-xhdpi/back.png

github：https://github.com/liukai90/liukai90.github.io/blob/master/cordova%2Bionic/混合开发常见问题.md