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

前言

在上一篇文章中(使用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后手机上查看

生成apk后手机上查看

小结一下

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏糊一笑

webpack入门指南

1. 导语 github仓库 https://github.com/Rynxiao/webpack-test 1.1 什么叫做webpack webpack ...

23740
来自专栏keyWords

一个页面从输入URL到加载显示完成,发生了什么?

42920
来自专栏云计算教程系列

如何在Ubuntu 14.04中使用NodeJS,SailsJS和DustJS构建SPA(单页应用程序)

Node.js®是一个基于Chrome JavaScript运行时的平台,可轻松构建快速,可扩展的网络应用程序。Node.js使用事件驱动的非阻塞I / O模型...

15500
来自专栏FreeBuf

WordPress曝未经授权的密码重置漏洞(CVE-2017-8295 )

漏洞提交者:Dawid Golunski 漏洞编号:CVE-2017-8295 发布日期:2017-05-03 修订版本:1.0 漏洞危害:中/高 I. 漏洞 ...

240100
来自专栏java 成神之路

mysql 启动出错问题排查

24430
来自专栏分布式系统和大数据处理

Webpack入门

Webpack是一个前端构建工具,本文将简要介绍它最常用的功能,并创建一个基于webpack的前端开发环境。

19120
来自专栏前端儿

在找一份相对完整的Webpack项目配置指南么?这里有

Webpack已升级为v4版本,优化之后性能提升好几倍,请移步这个 webpack4项目配置Demo,以及 这篇升级优化点

92710
来自专栏禅林阆苑

Webpack学习总结 【原创】

Webpack学习总结 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/...

458130
来自专栏向治洪

解决Eclipse报errors running builder ‘javascript validator’ on project

今天导入jquery的js到项目中,Eclipse老是动不动就报错: errors running builder ‘javascript validator’...

18880
来自专栏jojo的技术小屋

转 入门Webpack,看这篇就够了

2017年8月13日更新,本文依旧最新的webpack3.5.3将代码部分完全重写,所有代码都在Mac上正常运行过。希望依旧对你学习webpack有帮助。 ...

402100

扫码关注云+社区

领取腾讯云代金券