ionic 中 cordova-plugin-inappbrowser组件的使用
ionic 中 cordova-plugin-inappbrowser组件的使用
易兒善
发布于 2018-08-21 15:35:01
发布于 2018-08-21 15:35:01
前言
在上一篇文章中（使用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后手机上查看
小结一下
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.05.02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录