HBuilder的webview操作

webviewAPI文档:http://www.html5plus.org/doc/zh_cn/webview.html

创建新的webview窗口:

WebviewObject plus.webview.create( url, id, styles, extras );

说明:创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来。

显示Webview窗口

void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

说明:显示已创建或隐藏的Webview窗口,需先获取窗口对象或窗口id,并可指定显示窗口的动画及动画持续时间。

隐藏Webview窗口

void plus.webview.hide( id_wvobj, aniHide, duration, extras );

说明:根据指定的WebviewObject对象或id隐藏Webview窗口,使得窗口不可见。

获取当前窗口的WebviewObject对象

WebviewObject plus.webview.currentWebview();

说明:获取当前页面所属的Webview窗口对象。

查找指定标识的WebviewObject窗口

WebviewObject plus.webview.getWebviewById( id );

说明:在已创建的窗口列表中查找指定标识的Webview窗口并返回。 若没有查找到指定标识的窗口则返回null,若存在多个相同标识的Webview窗口,则返回第一个创建的Webview窗口。 如果要获取应用入口页面所属的Webview窗口,其标识为应用的%APPID%,可通过plus.runtime.appid获取。

创建并打开Webview窗口

WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );

说明:创建并显示Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后自动将Webview窗口显示出来。

以上内容来自文档,详细可阅读官方文档。

1.mui的双webview模式需要在页面初始化的时候配置器参数:

mui.init({
//子页面
subpages: [{
//...
}],
//预加载
preloadPages:[
//...
],
//下拉刷新、上拉加载
pullRefresh : {
//...
},
//手势配置
gestureConfig:{
//...
},
//侧滑关闭
swipeBack:true, //Boolean(默认false)启用右滑关闭功能 //监听Android手机的back、menu按键
keyEventBind: {
backbutton: false, //Boolean(默认truee)关闭back按键监听
menubutton: false //Boolean(默认true)关闭menu按键监听
},
//处理窗口关闭前的业务
beforeback: function() {
//... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
},
//设置状态栏颜色
statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
})

在APP开发中,若调用API,必须等plusready事件发生后才能正常运行,mui将该事件封装成mui.plusReady(),所以建议API的操作都写在mui.plusReady方法中。
如打印当前页面的URL:

mui.plusReady(function(){
console.log("当前页面URL:"+plus.webview.currentWebview().getURL());
});

2.创建子页面

将固定的页面分离出来,然后在init方法中初始发子页面的内容,具体可参照mui的index页面和list页面。

mui.init({
subpages:[{
url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
id:your-subpage-id,//子页面标志
styles:{
top:subpage-top-position,//子页面顶部位置
bottom:subpage-bottom-position,//子页面底部位置
width:subpage-width,//子页面宽度,默认为100%
height:subpage-height,//子页面高度,默认为100%
......
},
extras:{}//额外扩展参数
}]
});

参数说明:styles:表示窗口属性,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。

3.打开新页面

mui的解决思路是:单个webview只承担页面的dom,减少dom层级及页面大小,页面切换使用原生动画,将最消耗性能的部分交给原生实现。

mui.openWindow({
url:new-page-url,
id:new-page-id,
styles:{
top:newpage-top-position,//新页面顶部位置
bottom:newage-bottom-position,//新页面底部位置
width:newpage-width,//新页面宽度,默认为100%
height:newpage-height,//新页面高度,默认为100%
......
},
extras:{
.....//自定义扩展参数,可以用来处理页面间传值
},
createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
show:{
autoShow:true,//页面loaded事件发生后自动显示,默认为true
aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
},
waiting:{
autoShow:true,//自动显示等待框,默认为true
title:'正在加载...',//等待对话框上显示的提示内容
options:{
width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
......
}
}
})

注意:扩展参数只在打开页面的时候有效,若目标窗口为预加载页面,则通过mui.openwindow方法打开时传递的extras参数无效。

1.示例1,打开新页面

//tap为mui封装的单击事件,可参考手势事件章节
document.getElementById('info').addEventListener('tap', function() {
//打开关于页面
mui.openWindow({
url: 'examples/info.html',
id:'info'
});
});

2.打开需要从服务器端获取数据的页面

1.在跳转页面loaded事件发生后,不自动显示:

//A页面中打开B页面,设置show的autoShow为false,则B页面在其loaded事件发生后,不会自动显示;
mui.openWindow({
url: 'B.html',
show:{
autoShow:false
}
});

2.在调转页面获取数据之后再关闭等待框,显示调转页面:

//B页面onload从服务器获取列表数据;
window.onload = function(){
//从服务器获取数据
....
//业务数据获取完毕,并已插入当前页面DOM;
//注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后;
mui.plusReady(function(){
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
mui.currentWebview.show();
});
}

关闭页面

1.包含.mui-action-back类可以触发关闭,代码如下:

<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>

2.如果需要在其他按钮上触发返回事件,只需要添加.mui-action-back类

3.屏幕右滑动关闭页面,需要在mui.init()方法中是设置:

mui.init({
swipeBack:true //启用右滑关闭功能
});

实战:练习代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title" id="title">标题</h1>
</header>
<nav class="mui-bar mui-bar-tab" href="html/home.html">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="html/message.html">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item" href="html/setting.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</body>
</html>
<script type="text/javascript" charset="utf-8">
// mui初始化
mui.init(); var subpages = ['html/home.html', 'html/message.html', 'html/setting.html'];
var subpage_style = {
top: '45px',
bottom: '51px'
};
var aniShow = {};
// 当前激活选项
var activeTab = subpages[0];
var title = document.getElementById("title"); if(mui.os.plus){
// 创建子页面,首个选项卡页面显示,其它均隐藏;
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for (var i = 0; i < subpages.length; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
}
self.append(sub);
}
});
}else{
// 创建iframe代替子页面
createIframe('.mui-content',{
url: activeTab,
style: subpage_style
});
} // 选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href'); if (targetTab == activeTab) {return;}
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML; //显示目标选项卡
if(mui.os.plus){
//若为iOS平台或非首次显示,则直接显示
if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab);
}else{
//否则,使用fade-in动画,且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",300);
}
//隐藏当前;
plus.webview.hide(activeTab);
}else{
// 创建iframe代替子页面
createIframe('.mui-content',{
url: targetTab,
style: subpage_style
});
}
//更改当前活跃的选项卡
activeTab = targetTab;
}); /*兼容处理方法*/
var createIframe=function(el,opt){
var elContainer=document.querySelector(el);
var wrapper=document.querySelector('.mui-iframe-wrapper');
if (!wrapper) {
//创建wrapper和iframe
wrapper = document.createElement('div');
wrapper.className = 'mui-iframe-wrapper';
for(var i in opt.style){
wrapper.style[i] = opt.style[i];
}
var iframe = document.createElement('iframe');
iframe.src = opt.url;
iframe.id = opt.id || opt.url;
iframe.name = opt.id;
wrapper.appendChild(iframe);
elContainer.appendChild(wrapper);
} else{
var iframe = wrapper.querySelector('iframe');
iframe.src = opt.url;
iframe.id = opt.id || opt.url;
iframe.name = iframe.id;
}
} </script>

//在根目录下,新建html文件,在文件夹中新建home,message,setting的mui页面。

mui webview操作的更多相关文章

  1. HBuilder的webview操作

    HBuilder的webview操作 webviewAPI文档:http://www.html5plus.org/doc/zh_cn/webview.html 创建新的webview窗口: Webvi ...

  2. HTML5+和MUI页面操作

    最近总是碰到针对页面的一些操作,以下是针对webview的一些简单方法以及个人理解.更多详尽的内容请参考标准文档:http://www.html5plus.org/doc/zh_cn/webview. ...

  3. Mui Webview下来刷新上拉加载实现

    有些事情经历过之后才会发现,原来再次之前我是如此的啥,因为是第一次做,毫无头绪,有时会想假如有个一demo就好了,那么就不会花费这么多的无用功了.今天使用mui 的webview实现了一个H5页面的上 ...

  4. js,mui,jq 操作基本的DOM

    一.HTML <ul> <li>1111111</li> <li>22222222</li> </ul> 二.CSS li{ h ...

  5. appium+python自动化43-微信公众号webview操作

    前言 上一篇已经解决切换到微信公众号的webview上了,但是定位webview上元素的时候一直提示找不到,打印page_source也找不到页面上的元素,这个问题困扰了一整天,还好最后找到了原因, ...

  6. appium+python自动化-微信公众号webview操作

    前言 上一篇已经解决切换到微信公众号的webview上了,但是定位webview上元素的时候一直提示找不到,打印page_source也找不到页面上的元素,这个问题困扰了一整天,还好最后找到了原因, ...

  7. mui webview 预加载

    所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验.mui提供两种方式实现页面预加载. 方式一:通过mu ...

  8. appium获取toast和操作webview实例

    从testerhome上看到很多测试同学分享了toast的获取方式,其中大部分是java版本的,但也有个python版本的:Appium1.7.2 android toast 消息测试 Appium获 ...

  9. Android WebView 总结 —— Java和JavaScript交互

    交互如何实现 实现Java和js交互十分便捷.通常只需要以下几步. WebView开启JavaScript脚本执行 WebView设置供JavaScript调用的交互接口. 客户端和网页端编写调用对方 ...

随机推荐

  1. python之面向对象编程一

    概述: 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 面向过程编程最易被初 ...

  2. Xamarin提示安装包错误解决办法

    Xamarin提示安装包错误解决办法大学霸 Xamarin提示安装包错误,错误信息类似于:Please install package:'Xamarin.Android.Support.v7.Medi ...

  3. VB查询数据库之导出表格——机房收费总结(四)

    在机房收费系统中,有几个窗体需要导出数据到EXCEL表格中,如:学生上机记录查询窗体.学生充值记录查询窗体.收取金额查询窗体等. 前面的几篇总结,大家建议我不要把代码写的太详细,这样,不利于读者思考, ...

  4. [BZOJ2109][NOI2010]航空管制(贪心+拓扑)

    2109: [Noi2010]Plane 航空管制 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1227  Solved: 510[Submit][ ...

  5. [BZOJ4033][HAOI2015]树上染色(树形DP)

    4033: [HAOI2015]树上染色 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 2437  Solved: 1034[Submit][Stat ...

  6. ARC-100 E - Or Plus Max

    题面在这里! 我们如果可以求出 f[x] = max{ a[i] + a[j] , i!=j && i or j == x},那么就可以通过前缀max直接递推答案了. 但是这个玩意不是 ...

  7. 【推导】Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) B. Arpa and an exam about geometry

    题意:给你平面上3个不同的点A,B,C,问你能否通过找到一个旋转中心,使得平面绕该点旋转任意角度后,A到原先B的位置,B到原先C的位置. 只要A,B,C构成等腰三角形,且B为上顶点.那么其外接圆圆心即 ...

  8. 【欧拉回路】【Fleury算法】CDOJ1642 老当益壮, 宁移白首之心?

    题意: 构造一个01串,使得满足以下条件: 1. 环状(即首尾相连) 2. 每一位取值为0或1 3. 长度是2^n 4. 对于每个(2^n个)位置,从其开始沿逆时针方向的连续的n位01串(包括自己) ...

  9. 【概率DP】BZOJ4318-OSU!

    [题目大意] 一共有n次操作,每次操作只有成功与失败之分,成功对应1,失败对应0,n次操作对应为1个长度为n的01串.在这个串中连续的 X个1可以贡献X^3 的分数,这x个1不能被其他连续的1所包含( ...

  10. GCDAsyncSocket类库,IOS下TCP通讯使用心得

    关于在IOS下使用Socket进行通讯的技术文章也许诺很久了,今日又是一个还债的日子,网上虽然很多介绍过AsyncSocket或GCDAsyncSocket的文章,但其实就那么一两篇大部分都是转载,于 ...