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 --savecnpm install @ngx-translate/http-loader@2.0.1 --save- angular4安装：
npm install @ngx-translate/core@^7.2.2 --savecnpm 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 FAILEDBUILD FAILEDTotal 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.04. Themeable Browser插件加载不到图标
版本ionic4
将plugins/cordova-plugin-themeablebrowser/src/android/res/drawable-xhdpi/下的图片copy到platforms/android/app/src/main/res/drawable-xhdpi/back.pnggithub：https://github.com/liukai90/liukai90.github.io/blob/master/cordova%2Bionic/混合开发常见问题.md
