1. 程式人生 > >ionic3學習筆記3(native:本機外掛)

ionic3學習筆記3(native:本機外掛)

(摘自官網:)
Ionic Native是Cordova / PhoneGap外掛的TypeScript包裝器,可以讓您的Ionic移動應用程式輕鬆新增任何您需要的本機功能。

Promise或Observable:承諾和可觀察

Ionic Native在Promise或Observable中包裝外掛回撥,為所有外掛提供通用介面,並確保本機事件觸發角度更改檢測

import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

class MyComponentOrService
{
constructor(private platform: Platform, private geolocation: Geolocation) { platform.ready().then(() => { // get current position geolocation.getCurrentPosition().then(pos => { console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude); }); const
watch = geolocation.watchPosition().subscribe(pos => { console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude); }); // to stop watching watch.unsubscribe(); })
; } }

安裝:(到自己的運用程式)

npm install @ionic-native/core –save

(預設情況下,每個Ionic應用程式都會包含Ionic Native核心軟體包。)

用法:
1.安裝所需的外掛

2.為要新增的每個外掛安裝Ionic Native包。

例如,如果要安裝Camera外掛,則a。需要執行以下命令:
npm install @ionic-native/camera –save

b。然後再使用Cordova或Ionic CLI安裝外掛。

例如:

ionic cordova plugin add cordova-plugin-camera

所有包名稱都記錄在外掛的文件中。建議按照每個外掛文件的安裝說明進行操作,因為某些外掛需要額外的步驟來完全安裝。

c。將外掛新增到應用程式的模組中ngmodule

...

import { Camera } from '@ionic-native/camera';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})
export class AppModule { }

在瀏覽器中使用本地外掛

onic Native 3.0現在允許開發人員通過簡單的覆蓋機制來模擬和使用瀏覽器中的本機外掛,從而可以方便地從感測器提供測試資料,或者訪問純native API(如HealthKit)。

現在絕大多數的離子應用程式完全可以在瀏覽器中構建,而無需部署到裝置或者模擬器。(牛逼的開發速度聞所未聞,哈哈哈)

用法:
讓我們試試嘲笑Camera外掛來返回影象,而不是使用在裝置上下文之外可能不可用的本機攝像頭

1.在我們的src/app/app.module.ts檔案中匯入類

import { Camera } from '@ionic-native/camera';

2.建立一個Camera使用模擬實現擴充套件類的新類:

class CameraMock extends Camera {
  getPicture(options) {
    return new Promise((resolve, reject) => {
      resolve("BASE_64_ENCODED_DATA_GOES_HERE");
    })
  }
}

3.覆蓋Camera我們providers這個模組的上一個類

providers: [
  { provide: Camera, useClass: CameraMock }
]

一:3D觸控
1。安裝:
(1)安裝Cordova和Ionic Native外掛:

$ ionic cordova plugin add cordova-plugin-3dtouch
$ npm install --save @ionic-native/three-dee-touch

(2)將此外掛新增到應用程式的模組中(import和providers)

2.支援平臺:ios
3.例項見官網

二:行動表

ActionSheet外掛顯示使用者可以選擇的選項的本機列表。

1.安裝:
(1)安裝Cordova和Ionic Native外掛:

$ ionic cordova plugin add cordova-plugin-actionsheet
$ npm install --save @ionic-native/action-sheet

(2)
將此外掛新增到應用程式的模組中

2.支援平臺:
Android的
瀏覽器
iOS版
視窗
Windows Phone 8

3.例項見官網

三:AdMob免費:行動電話廣告市場

1.安裝:
(1)安裝Cordova和Ionic Native外掛:

$ ionic cordova plugin add cordova-plugin-admob-free
$ npm install --save @ionic-native/admob-free

(2)
將此外掛新增到應用程式的模組中

2.支援平臺:
Android的
iOS版

3.例項見官網

四:AdMob免費:行動電話廣告市場(專業版需要付費)

$ ionic cordova plugin add cordova-plugin-admobpro
$ npm install --save @ionic-native/admob-pro

五:支付寶
1.安裝Cordova和Ionic Native外掛:

$ ionic cordova plugin add cordova-alipay-base --variable APP_ID=your_app_id
$ npm install --save @ionic-native/alipay

2.將此外掛新增到應用程式的模組中
支援平臺

六:Android指紋認證
此外掛將開啟一個本地對話片段,提示使用者使用其指紋進行身份驗證。如果裝置具有安全的鎖定螢幕(模式,PIN或密碼),則使用者可以選擇使用該方法進行身份驗證作為備份。
1.安裝Cordova和Ionic Native外掛:

$ ionic cordova plugin add cordova-plugin-android-fingerprint-auth
$ npm install --save @ionic-native/android-fingerprint-auth

2.將此外掛新增到應用程式的模組中

七:Android全屏

1.安裝Cordova和Ionic Native外掛:

使用Android 4.0+,您可以使用“精簡模式”中的真實全屏,您在YouTube等應用程式中看到的方式,將應用程式擴充套件到螢幕邊緣,隱藏狀態和導航欄,直到使用者下一步進行互動。這非常適合視訊或剪輯場景內容。

然而,在Android 4.4+中,您現在可以輸入真正的全螢幕,完全互動式的沉浸式模式。

$ ionic cordova plugin add cordova-plugin-fullscreen
$ npm install --save @ionic-native/android-full-screen

2.將此外掛新增到應用程式的模組中

八:Android許可權

1.安裝Cordova和Ionic Native外掛:

支援Android新的許可權檢查機制。

$ ionic cordova plugin add cordova-plugin-android-permissions
$ npm install --save @ionic-native/android-permissions

2.將此外掛新增到應用程式的模組中

九:Android許可權

1.安裝Cordova和Ionic Native外掛:

支援Android新的許可權檢查機制。

$ ionic cordova plugin add cordova-plugin-android-permissions
$ npm install --save @ionic-native/android-permissions

2.將此外掛新增到應用程式的模組中

九:應用可用性
檢查使用者裝置上是否安裝了應用程式。他需要iOS上的URI方案(例如twitter://)或Android上的軟體包名稱(例如com.twitter.android)。

1、安裝

(1)安裝Cordova和Ionic Native外掛:

 $ ionic cordova plugin add cordova-plugin-appavailability
$ npm install --save @ionic-native/app-availability

(2).將此外掛新增到應用程式的模組中

以下省略安裝指令:上官網

九:應用程式最小化
用於最小化Android裝置上的應用程式

十:應用程式偏好:AppPreferences
允許您讀取和寫入應用程式首選項
支援平臺:
Android的
黑莓10
瀏覽器
iOS版
MACOS
Windows 8
Windows Phone

十一:應用率:AppRate
AppRate外掛可以輕鬆提示使用者對您的應用進行評分,無論是現在還是以後,甚至永遠不要。

十二:應用程式更新

這個外掛可以自動更新android。

您應該首先在伺服器上託管一個XML檔案,其中包含以下資料:

<update>
    <version>302048</version>
    <name>APK Name</name>
    <url>https://your-remote-api.com/YourApp.apk</url>
</update>

然後使用以下程式碼:

import { AppUpdate } from '@ionic-native/app-update';

constructor(private appUpdate: AppUpdate) {

   const updateUrl = 'http://your-remote-api.com/update.xml';
   this.appUpdate.checkAppUpdate(updateUrl);

}

13.應用版本:AppVersion
從目標構建設定中讀取您的應用的版本。