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