Trust
Trust
  • 发布:2017-06-16 18:52
  • 更新:2019-02-28 17:21
  • 阅读:8358

【示例】内置浏览器titleNView版

分类:HTML5+

需求简述

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

实现思路

浏览器

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中加载的内容。
实际开发中,根据实际业务需求进行调整即可。

效果图及源码

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

7 关注 分享
赵梦欢 vaeke 菜鸡 lhyh mlm8368 h@feng0.com 791155030@qq.com

要回复文章请先登录注册

苛学加

苛学加

mark
2019-02-28 17:21
2389435811@qq.com

2389435811@qq.com

打开页面先弹出标题栏然后才弹出页面怎么解决
2018-12-26 16:19
282471092@qq.com

282471092@qq.com

怎么屏蔽网页广告
2018-11-15 08:46
j4142@qq.com

j4142@qq.com

text如果是几个文字要怎么加上去,多于一个字它就排不下了
2018-09-29 13:59
926365110@qq.com

926365110@qq.com

可不可以在旁边添加多一个360的网址。
2018-09-14 14:50
可能是个新手

可能是个新手

安卓报错Uncaught TypeError: Cannot call method 'loadURL' of undefined
2018-04-20 18:57
1144106538@qq.com

1144106538@qq.com

请问打开的第三方网页,怎么才能允许他缩放呢
2018-01-30 14:13
kaiven

kaiven

回复 m@nenge.net:
兄弟,解决了吗?
2017-12-02 14:49
kaiven

kaiven

苹果手机 ,再次打开,导航图标变成问号??。
经过测试,是内部view执行了clear之后造成的。
android机器没问题
2017-11-29 11:55
初樰

初樰

菜鸟请教:您这进入直接访问页面(不需要点击页面按钮即直接跳转)咋修改?
2017-09-22 15:54
1144106538@qq.com

1144106538@qq.com

安卓里面测试了是正常的,但是在苹果手机里测试不正常,打开第三方网站,没有关闭和退回按钮,请问怎么解决呢
2017-08-24 10:33
a8889244@qq.com

a8889244@qq.com

fontSrc无效问题怎么解决?图标不显示怎么查,按钮区域能点击
2017-08-16 23:07
vaeke

vaeke

回复 cgjtzp@gmail.com:
解决问题了吗 小小菜鸟也有相同问题
2017-08-09 19:38
m@nenge.net

m@nenge.net

fontSrc无效问题怎么解决?返回一下再打开就显示?而不是ttf的图标
2017-08-01 08:34
大胖子

大胖子

加载的子页面如何调用浏览器对象定义的方法?
2017-07-27 16:41
cgjtzp@gmail.com

cgjtzp@gmail.com

菜鸟请教:您这进入直接访问页面(不需要点击页面按钮即直接跳转)咋修改?
2017-07-24 11:42
efeiwork

efeiwork

回复 Trust:
谢谢,我试试
2017-07-13 17:29
Trust

Trust (作者)

回复 efeiwork:
字体名称与sdk自带的字体文件冲突了,换了一个名字应该没问题了。默认的叫“iconfont”,额外引入的字体库都不能叫这个名字。
2017-07-13 17:13
efeiwork

efeiwork

苹果手机,点击其他页面,返回到首页,再次点击“click”后,进入页面后,4个图标都变成了"?"号,请问怎么解决?
2017-07-13 16:58
移动达人

移动达人

不错,顶一个。
2017-06-17 00:22
DCloud_heavensoft

DCloud_heavensoft

应该贴个图
2017-06-16 18:54