【示例】内置浏览器titleNView版

需求简述

在手机应用内，可以访问外部的网站信息。通常用于推广信息以及商城的活动页等。

实现思路

浏览器

WebView是基于手机webkit内核浏览器封装的一个组件，无论是本地的还是网络的html都可以加载，可以将其视作一个浏览器。
html5plus封装了Webview模块，那么基本的浏览器就有了。

基本操作

浏览器的使用，最基本的操作，大致如下：

• 前进
• 后退
• 刷新
• 关闭

在html5plus环境下，操作的就是WebviewObject。现有的API，完全可以满足这些基本操作。
Webview窗口对象

菜单栏

titleNView是HBuilder8.8更新发布时，html5plus新增的一个与Webview关联的原生组件。
该组件提供了更多的配置，方便进行按钮的布局，并且可以配置进度条等，那么菜单栏就有了。

布局

因为不是真的开发一款浏览器，布局直接从简。功能按钮排布在顶部的titleNView上，剩下的Webview区域用于展示页面内容。

具体实现

创建浏览器

创建Webview直接调用相关API即可，这里就不再详细说明了，关键在于titleNView的配置。

给菜单栏添加按钮

阅读titleNView中标题栏上的自定义按钮相关的API说明，按钮的文本是可以使用unicode字符的。
推荐上Iconfont-阿里巴巴矢量图标库下载所需的矢量图，并将字体文件放在工程目录下。

注意：这里配置icon时，有个需要注意的地方。比如后退箭头，从浏览器中获取的unicode码是"\e603"，但是配置的时候，需要填写为"\ue603"才能被原生层正确解析。

buttons: [{ //后退按钮  
    'float': 'left',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue603',  
    onclick: _self.back.bind(_self) //指定函数的上下文为browser，否则是当前这个对象；  
}, { //前进箭头  
    'float': 'left',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue602',  
    onclick: _self.forward.bind(_self)  
}, { //关闭按钮  
    'float': 'right',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue601',  
    onclick: _self.close.bind(_self)  
}, { //刷新按钮  
    'float': 'right',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue600',  
    onclick: _self.reload.bind(_self)  
}]

实现按钮功能

打开浏览器

// 显示浏览器  
browser.show = function(url) {  
    url = url || 'http://www.dcloud.io/'; //默认使用DCloud官网  
    this.webview.loadURL(url);  
    this.webview.show('slide-in-right');  
};

这里采用预加载方案，打开浏览器时，加载目标地址。

前进

// 前进  
browser.forward = function() {  
    var _self = this;  
    _self.webview.canForward(function(event) {  
        if(event.canForward) {  
            _self.webview.forward();  
        } else {  
            plus.nativeUI.toast('没有可前进的地址');  
        }  
    });  
};

首先要检测，是否可以前进。不能前进，就做出相应的提示。

后退

// 后退  
browser.back = function() {  
    var _self = this;  
    _self.webview.canBack(function(event) {  
        console.log('event:', event)  
        if(event.canBack) {  
            _self.webview.back();  
        } else {  
            _self.close();  
        }  
    });  
};

与前进同理，先检查是否可以后退，然后再执行相关的逻辑。

刷新

// 刷新  
browser.reload = function() {  
    this.webview.reload(true);  
};

刷新就很简单了，直接调用相关API即可。

关闭

// 关闭  
browser.close = function() {  
    this.webview.hide('slide-out-right');  
    this.webview.clear();  
};

关闭操作中，由于是使用预加载方案，所以选择隐藏了Webview，然后清空了Webview中加载的内容。
实际开发中，根据实际业务需求进行调整即可。

效果图及源码

下载附件中的文件，直接解压真机运行即可体验。