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

港控/mmm° 2022-04-24 10:30 150阅读 0赞

我用的是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"