ionic 中 cordova-plugin-inappbrowser組件的使用

小編:管理員 271閱讀 2022.09.13

前言

在上一篇文章中(使用Ionic3創建原生app系統入門)介紹了如何使用ionic構建一個Android app 項目,并生成apk安裝包。

ionic3中開發,基本和angular開發類似,只要了解一點angular開發知識便可以很容易上手。

簡單介紹下

主要的開發工作就是在pages文件夾下,看名字也知道是什么意思了。每個頁面是一個獨立的模塊。文件名稱不要重復,編譯時會報錯。

項目結構

cordova-plugin-inappbrowser組件使用

這個組件看名字,大致應該知道是調用app內置瀏覽器的。 在我們的app中要嵌入第三方應用的時候需要使用。 在這個例子中,我要實現的便是個人介紹頁面,鏈接到對應相關的第三方博客中。

官方

https://ionicframework.com/docs/native/in-app-browser/

安裝cordova-plugin-inappbrowser
ionic cordova plugin add cordova-plugin-inappbrowser
npm install --save @ionic-native/in-app-browser
復制在模塊中引入

app.module.ts文件

import { InAppBrowser } from '@ionic-native/in-app-browser';

  providers: [
    Api,
    Items,
    BlogApi,
    InAppBrowser,  // 添加
    User,
    Camera,
    SplashScreen,
    StatusBar,
    { provide: Settings, useFactory: provideSettings, deps: [Storage] },
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
復制使用

ts 文件

import { InAppBrowser } from '@ionic-native/in-app-browser';

export class ContactPage{
  apps: GroupItem[] = [
    {name: '更多內容',
      items:[
        {name:"簡書", url:"https://www.jianshu.com/u/8afb7e623b70"},
        {name:"segmentfault", url:"https://segmentfault.com/u/yiqrshan"},
        {name:"csdn", url:"https://blog.csdn.net/yiershan1314"},
        {name:"github", url:"https://github.com/yiershan"}
      ]},
  ];

  constructor(private iab: InAppBrowser
  ) { }
  itemSelected(item:Item){
    const browser = this.iab.create(item.url,'_self');
   browser.show();
  }
}
復制

html文件

<ion-content>
  <ion-list *ngFor="let app of apps" no-border>
    <ion-list-header>
      {{app.name}}
    </ion-list-header>
    <ion-item *ngFor="let item of app.items"  (click)="itemSelected(item)">
      {{ item.name }}
      <ion-icon name="ios-arrow-forward" item-end></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>
復制

瀏覽器中查詢效果

瀏覽器中查詢效果

生成apk后手機上查看

關聯標簽:
亚洲国产欧美图片,亚洲aⅴ在线av,日韩亚洲综合图片视频,日本av精品在线中文