使用ThemeableBrowser打开第三方网站并遇到的问题

我用的是ionic做的项目,这期间用了ThemeableBrowser打开了第三方网站,出现的问题就是在打包之后能打开但是不显示顶部的title和状态栏。下边就直接上教程

1,引用插件

       ionic cordova plugin add cordova-plugin-themeablebrowser

       npm install @ionic-native/themeable-browser

       下载不成功也没关系,在项目的package.json中添加三行代码,之后重新npm install

       dependencies中添加"@ionic-native/themeable-browser": "^4.20.0",

                                        "cordova-plugin-themeablebrowser": "^0.2.15",    

       cordova的plugins中添加"cordova-plugin-themeablebrowser": {},

2,注册

       main.js中添加两行代码

       import { ThemeableBrowser } from '@ionic-native/themeable-browser';

       providers中添加一个ThemeableBrowser

3,使用

       (1)在使用ThemeableBrowser的页面的ts文件中添加

       import { ThemeableBrowser,ThemeableBrowserObject,ThemeableBrowserOptions } from '@ionic-native/themeable-browser';

       (2)在constructor中声明一下  private themeableBrowser: ThemeableBrowser

       (3)在使用的地方添加如下代码

       

const options: ThemeableBrowserOptions = {
      statusbar: {
        color: '#45b0f6'
      },
      toolbar: {
        height: 44,
        color: '#45b0f6'
      },
      title: {
        color: '#ffffff',
        showPageTitle: true
      },
      backButton: {
        wwwImage: 'assets/back.png',
        wwwImagePressed: 'assets/back.png',
        align: 'left',
        event: 'backPressed'
      },
      closeButton: {
        wwwImage: 'assets/close.png',
        wwwImagePressed: 'assets/close.png',
        align: 'right',
        event: 'closePressed'
      },
      backButtonCanClose: true
    };
    var url = "你要跳转到的外部也买你地址"
    const browser: ThemeableBrowserObject = this.themeableBrowser.create(url, '_blank', options);

4,遇到的问题

       (1)顶部titile栏不显示图标,例如关闭和返回等

       这个问题是路径的问题,看我上边代码的路径就是assets/back.png或者是assets/close.png,这个问题很简单,不需要去添加ios平台之后搞这搞那,把你需要的图片直接放到ionic项目的assets中就可以了

       (2),不显示title栏

       this.themeableBrowser.create()方法的第二个参数,要用"_blank",别用"_self"

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值