前言
在上一篇文章中（使用Ionic3創(chuàng)建原生app系統(tǒng)入門）介紹了如何使用ionic構建一個Android app 項目,并生成apk安裝包。
ionic3中開發(fā)冒嫡，基本和angular開發(fā)類似，只要了解一點angular開發(fā)知識便可以很容易上手倦青。
簡單介紹下
主要的開發(fā)工作就是在pages文件夾下羹唠，看名字也知道是什么意思了志鹃。每個頁面是一個獨立的模塊硫狞。文件名稱不要重復，編譯時會報錯妓忍。
項目結構
cordova-plugin-inappbrowser組件使用
這個組件看名字愧旦，大致應該知道是調用app內(nèi)置瀏覽器的。
在我們的app中要嵌入第三方應用的時候需要使用笤虫。
在這個例子中，我要實現(xiàn)的便是個人介紹頁面琼蚯，鏈接到對應相關的第三方博客中酬凳。
官方
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: '更多內(nèi)容',
items:[
{name:"簡書", url:"http://www.reibang.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后手機上查看
