ionic3项目实战教程 - 第9讲 ionic3应用内主题浏览

这一讲主要实现商品的"抢购"功能

• 1.安装ThemeableBrowser插件；
• 2.使用ThemeableBrowser插件；

1.安装插件

分别执行以下命令：

 ionic cordova plugin add cordova-plugin-themeablebrowser
 npm install --save @ionic-native/themeable-browser`

2.ThemeableBrowser的使用

在product-details.html中给"去抢购"的button增加(click)="goBuy()"事件; 在product-details.ts增加goBuy()函数实现跳转;

 goBuy() {
    let options = {
        statusbar: {
            color: '#f8285c'
        },
        toolbar: {
            height: 44,
            color: '#f8285c'
        },
        title: {
            color: '#ffffffff',
            showPageTitle: true
        },
        backButton: {
            image: 'back',
            imagePressed: 'back_pressed',
            align: 'left',
            event: 'backPressed'
        },
        backButtonCanClose: true
    };
    new ThemeableBrowser(this.selectedItem.ClickUrl, '_blank', options)
}

注意，如果引用ThemeableBrowser时出现错误，请安装 npm install ionic-native --save，即可解决。

这里简单介绍下ThemeableBrowser用到的几个属性：

• statusbar：状态栏的颜色；
• toolbar：工具栏配置；
• titll：标题的配置；
• backButton：返回按钮配置；

效果图

662292D357307D307E36113FC003DFEF.jpg

关于ThemeableBrowser的其他属性，感兴趣的可查阅官方资料：https://ionicframework.com/docs/native/themeable-browser/

完！