ionic常用api

设置沉浸式：

对于android来说需要设置paddingtop，因为沉浸之后header的高度有一部分填充了手机导航栏，可以在global.scss中设置公共的header的样式

//app.component.ts
import { StatusBar } from '@ionic-native/status-bar/ngx';
//在方法中使用
this.statusBar.overlaysWebView(true);

退出app：

  exitApp(){
    this.platform.backButton.subscribe(()=>{
      // alert(JSON.stringify(this.router.url))
      if(this.router.url== '/'){  //判断是那个页退出
        navigator['app'].exitApp()
      }
    })
    //如果需要扩展 可以设置双击退出 这个自行扩展
  }

获取当前位置

//安装插件
ionic cordova plugin add cordova-plugin-geolocation
npm install @ionic-native/geolocation
//引用
import { Geolocation } from '@ionic-native/geolocation/ngx';
//使用
this.geolocation.getCurrentPosition().then((resp)=>{
    console.log(resp)
    let longitude = (resp.coords.longitude).toFixed(4);
    let latitude = (resp.coords.latitude).toFixed(4);
  }).catch(err=>{
    console.log(err) 
})

下拉刷新

//http://www.ionic.wang/components_doc-index-id-297.html 官网位置
//home.page.html
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
//home.page.ts
doRefresh(e){
  //可以将e赋值给一个全局变量 这样可以在请求的方法回调里加上结束刷新
  e.target.complete() //加上这句话证明刷新停止
}

上拉加载

//infinite.page.html
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingText="正在加载数据...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>
//inifnite.page.ts
//跟上拉加载一样 需要一个结束的命令
diInfinnte(e){
  e.target.complete()
}

图片压缩

  compress(img, width, height, ratio) {
    var canvas, ctx, img64;
    canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    img64 = canvas.toDataURL("image/jpeg", ratio);
    return img64;
  }

选择图片

  pickImg(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.CAMERA
    }
    this.camera.getPicture(options).then((imageData) => {
      var image = new Image();
      image.src = 'data:image/jpeg;base64,' + imageData;
      let this_ = this;
      image.onload = function(){
        var img64 = this_.compress(image, 800, 800, 0.7);
        let photoBase64 = img64.replace('data:image/jpeg;base64,', '');
        this_.uploadImg(photoBase64)
      }
    }, (err) => {
      // Handle error
    });
  }

app打开文件或者链接

//安装依赖
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

//使用
this.iab.create(url,"_system",{}) 
 //_system指的是打开手机系统的应用  _blank指打开app内部浏览器多用于打开一个网址

使用导航打开手机自带地图

判断手机是否安装
打开手机自身应用

    let appAmap = "";
    let appBmap = "";
    if (this.platform.is("ios")) {
      appAmap = "iosamap://";
      appBmap = "baidumap://";
    } else if (this.platform.is("android")) {
      appAmap = "com.autonavi.minimap";
      appBmap = "com.baidu.BaiduMap";
    }

    this.appAvailability.check(appAmap).then(
      (yes: boolean) => {
        this.hasAmap = true;
      },
      (no: boolean) => {
        this.hasAmap = false;
      }
    );

    this.appAvailability.check(appBmap).then(
      (yes: boolean) => {
        this.hasBmap = true;
      },
      (no: boolean) => {
        this.hasBmap = false;
      }
    );

//打开高德地图
  openByAmap() {
    if (this.platform.is("ios")) {
      let urlAmap =
        "iosamap://viewMap?sourceApplication=applicationName&poiname=" +
        this.destinationName +
        "&lat=" +
        this.latGCJ2 +
        "&lon=" +
        this.lonGCJ2 +
        "&dev=1";
      this.iab.create(urlAmap, "_system", {});
    } else if (this.platform.is("android")) {
      let urlAmap =
        "androidamap://viewMap?sourceApplication=appname&poiname=" +
        this.destinationName +
        "&lat=" +
        this.latGCJ2 +
        "&lon=" +
        this.lonGCJ2 +
        "&dev=0";
      this.iab.create(urlAmap, "_system", {});
    }
  }

//打开百度地图
  openByBmap() {
    if (this.platform.is("ios")) {
      let urlBmap =
        '"baidumap://map/marker?location=' +
        this.latBD9 +
        "," +
        this.lonBD9 +
        "&title=" +
        this.destinationName +
        "&src=ios.baidu.openAPIdemo";
      this.iab.create(urlBmap, "_system", {});
    } else if (this.platform.is("android")) {
      let urlBmap =
        "baidumap://map/marker?location=" +
        this.latBD9 +
        "," +
        this.lonBD9 +
        "&title=" +
        this.destinationName +
        "&traffic=on&src=andr.baidu.openAPIdemo";
      this.iab.create(urlBmap, "_system", {});
    }
  }

手机预览pdf

//安装依赖
import { FileTransfer, FileTransferObject } from "@ionic-native/file-transfer/ngx";
import { File } from '@ionic-native/file/ngx';
import { FileOpener } from '@ionic-native/file-opener/ngx';

//使用
async lookView(url) {
  // this.iab.create(url,'_system',{})
  const fileTransfer: FileTransferObject = this.transfer.create();
  fileTransfer.download(url, this.file.dataDirectory + 'file.pdf').then((entry) => {
    this.fileOpener.open(this.file.dataDirectory + 'file.pdf', 'application/pdf')
      .then(() => console.log('File is opened'))
      .catch(e => console.log('Error opening file'));
  }, (error) => {
    // handle error
    console.log(JSON.stringify(error))
  });
}

生成秘钥打包

//使用到了java-sdk的keytool jarsinger两个命令 
keytool -genkey -alias huanggang.keystore -keyalg RSA -validity 20000 -keystore huanggang.keystore

jarsigner -verbose -keystore huanggang.keystore -signedjar huanggang.apk platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk huanggang.keystore

readme.md


# 沈阳生成 keystore

keytool -genkey -alias huanggang.keystore -keyalg RSA -validity 20000 -keystore huanggang.keystore

# 打包沈阳安卓命令（秘钥）

jarsigner -verbose -keystore huanggang.keystore -signedjar huanggang.apk platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk huanggang.keystore

#安卓视频 build.gradle
ndk{
abiFilters "armeabi", "armeabi-v7a","x86","mips"
}

#ios info.plist
LSApplicationQueriesSchemes:[baidumap,iosamap]
NSPhotoLibraryUsageDescription: view previously-taken environment-protecting photos for uploading
NSPhotoLibraryAddUsageDescription: writing album
NSCameraUsageDescription: take photos of actions taken to protect environment
NSLocationWhenInUseUsageDescription: access bits during use

#引入第三方组件
ionic cordova plugin add cordova-plugin-appavailability
npm install --save @ionic-native/app-availability

ionic cordova plugin add cordova-plugin-inappbrowser
npm install --save @ionic-native/in-app-browser

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

ionic cordova plugin add cordova-plugin-file
npm install --save @ionic-native/file

ionic cordova plugin add cordova-plugin-filepath
npm install --save @ionic-native/file-path

ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer

ionic cordova plugin add com-sarriaroman-photoviewer
npm install --save @ionic-native/photo-viewer

ionic cordova plugin add cordova-plugin-splashscreen
npm install --save @ionic-native/splash-screen

ionic cordova plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-barx

ionic cordova plugin add cordova-plugin-geolocation
npm install --save @ionic-native/geolocation

ionic cordova plugin add com-sarriaroman-photoviewer
npm install --save @ionic-native/photo-viewer

cordova-hot-code-push-plugin

cordova plugin add cordova-disable-http-cache
npm i cordova-disable-http-cache

ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
npm install --save @ionic-native/image-picker@4

#热更新步骤
[1] cordova plugin add cordova-hot-code-push-plugin
npm install -g cordova-hot-code-push-cli
[2] config.xml 
<chcp>
<config-file url="http://prd9.hbjk.com.cn:90/chcp.json" />
<native-interface version="1" />
</chcp>
[3] cordova-hcp build
现在 在项目文件下的 www 文件里面我们可以看到两个新增的文件，chcp.json 和 chcp.manifest。
{
"autogenerated": true,
"release": "2017.07.08-16.56.31",
"content_url": "http://prd9.hbjk.com.cn:90",
"update": "start"
}
[4] 添加安卓平台
cordova platform add android
[5] 备份 chcp.json
根目录下新建 cordova-hcp.json, 配置内容:
{
"autogenerated": true,
"release": "2017.07.08-16.56.31",
"name": "hea",(option)
"min_native_interface": 1(option)
"content_url": "http://192.168.1.203:8121", (+require)
"update": "now" (+require)
}

ionic常用api

设置沉浸式：

退出app：

获取当前位置

下拉刷新

上拉加载

图片压缩

选择图片

app打开文件或者链接

使用导航 打开手机自带地图

手机预览pdf

生成秘钥 打包

readme.md

使用导航打开手机自带地图

生成秘钥打包