WebView的使用--Hybrid App

App页面是运行在WebView中的,一个App页面对应一个WebView,本例实现两个WebView之间的跳转。

实现过程(用到了MUI框架):

1、页面标识+跳转按钮(index.html、main.html)

2、分别对两页面的按钮添加监听事件

3、在index.html页面中创建id为main的WebView,添加main.html页面的路径

4、在main.html页面中获取当前的WebView,将其隐藏

代码如下:

 <!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>
</head>
<body>
这是main.html页面
<button type="button" id="gobackBtn">点击回到index.html页面</button>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript">
document.getElementById("gobackBtn").addEventListener('click',function(){
var currentWV=plus.webview.currentWebview();//获取当前webview
//var currentWV=plus.getWebviewById("main"); //通过webview的id来获取
currentWV.hide();
})
</script>
</body>
</hmain

main.html

 <!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>
</head>
<body>
这是index.html页面
<button type="button" id="btn">点击跳转至main.html页面</button>
<script type="text/javascript" src="js/mui.js"></script>
<script language="JavaScript">
//使用html5+实现页面跳转
/*
document.getElementById('btn').addEventListener('click',function(){
//先判断是否已经创建了id为main的webview
//需要获取到main的webview
var mainwv=plus.webview.getWebviewById('main');
if(!mainwv){//mianwv是null,mainwv是false,!mainwv是true成立。
var main=plus.webview.create("main.html","main");//创建webview
}
mainwv.show();
})
*/
//使用mui来实现
document.getElementById('btn').addEventListener('click',function(){
mui.openWindow('main.html','main');//相当于下面的代码
})
/*
var mainwv=plus.webview.getWebviewById('main');
if(!mainwv){//mianwv是null的话mainwv是false,!mainwv是true成立。
var main=plus.webview.create("main.html","main");//创建webview
}
mainwv.show();
*/
</script>
</body>
</index

index.html

上一篇:oracle学习 七 拼接变量+日期函数(持续更)


下一篇:Day2-基于医疗知识图谱的问答系统操作介绍