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

在上一篇文章中（使用Ionic3创建原生app系统入门）介绍了如何使用ionic构建一个Android app 项目,并生成apk安装包。

ionic3中开发，基本和angular开发类似，只要了解一点angular开发知识便可以很容易上手。

主要的开发工作就是在pages文件夹下，看名字也知道是什么意思了。每个页面是一个独立的模块。文件名称不要重复，编译时会报错。

项目结构

这个组件看名字，大致应该知道是调用app内置浏览器的。 在我们的app中要嵌入第三方应用的时候需要使用。 在这个例子中，我要实现的便是个人介绍页面，链接到对应相关的第三方博客中。

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

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文件

  
    
      {{app.name}}
    
    
      {{ item.name }}
      
    
  

浏览器中查询效果

浏览器中查询效果

生成apk后手机上查看