HBuilder webapp创建带有前进后退刷新的内置浏览器

创建带有前进后退刷新的内置浏览器

在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");