创建带有前进后退刷新的内置浏览器
在webapp中打开普通的打开一个网页是没有工具栏的
//普通的打开网页
mui.openWindow({
id: 'QINDON.html',
url: 'jian/QINDON.html',
styles: {
popGesture: "none"
},
show: {
aniShow: 'none'
},
waiting: {
autoShow: false
}
});
现在的HBuilder提供了一个titleNView的功能
可以让webapp与原生组件进行关联让app使用起来更加顺畅
因此可以用titleNView来创建一个带有前进、返回、刷新等功能按钮的标题栏
具体如下:
// 内置浏览器
var browser = {};
// 初始化webview相关
function dkwyss(url) {
var _self = browser;
// 创建webview
_self.webview = plus.webview.open(url, 'browser', {
decelerationRate:0.5,
scrollIndicator:"vertical",
titleNView: {
titleColor:"#fff",
backgroundColor: '#1a7ecb',
progress: { //进度条
color: '#ff3300',
height: '1px'
},
splitLine: { //底部分割线
color: '#cccccc',
height: '1px'
},
buttons: [
{ //后退按钮
'float': 'left',
color:"#fff",
fontSrc: '_www/fonts/browser.ttf',
text: '\ue603',
onclick: _self.back.bind(_self)
}, { //前进箭头
'float': 'left',
color:"#fff",
fontSrc: '_www/fonts/browser.ttf',
text: '\ue602',
onclick: _self.forward.bind(_self)
},{ //刷新按钮
'float': 'right',
color:"#fff",
fontSrc: '_www/fonts/browser.ttf',
text: '\ue600',
onclick: _self.reload.bind(_self)
}]
},
},"slide-in-right");
};
// 后退
browser.back = function() {
var _self = this;
_self.webview.canBack(function(event) {
if(event.canBack) {
_self.webview.back();
} else {
_self.webview.hide('pop-out');
_self.webview.clear();
}
});
};
//前进
browser.forward = function() {
var _self = this;
_self.webview.canForward(function(event) {
if(event.canForward) {
_self.webview.forward();
} else {
plus.nativeUI.toast('没有可前进的地址');
}
});
};
// 刷新
browser.reload = function() {
this.webview.reload(true);
};
//打开网页只需传入网页url即可
dkwyss("https://juejin.im");