一、入口文件加载与跳转的页面(页面之间传值)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<style type="text/css">
</style>
</head>
<body>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function(){
api.openWin({
name: 'main',
url: './html/main.html',
pageParam: {
name: 'test' //这里是参数的传递，在另一页面接受
}
});
};
</script>
</html>
二、加载main页面
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
position: relative;
width: 100%;
height: 60px;
background-color: #f0f;
}
header h1{
position: relative;
height:60px;
line-height: 80px;
font-size: 20px;
color: #fff;
text-align: center;
}
header .right
{
position: absolute;
bottom: 0;
right:0;
width: 100px;
height: 60px;
line-height: 80px;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>每日活动</h1>
<div class="right" tapmode onclick="fnOpenpersonCenterWin();">个人中心</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
//alert(api.pageParam.name);// 页面传值。
};
function fnOpenpersonCenterWin()
{
api.openWin({
name: 'page1',
url: './login.html',
pageParam: {
name: 'test'
}
});
}
</script>
</html>
三、跳转的页面
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
position: relative;
width: 100%;
height: 60px;
background-color: #f0f;
}
header h1{
position: relative;
height:60px;
line-height: 80px;
font-size: 20px;
color: #fff;
text-align: center;
}
header .left
{
position: absolute;
bottom: 0;
left:0;
width: 100px;
height: 60px;
line-height: 80px;
font-size: 16px;
text-align: center;
}
header .right
{
position: absolute;
bottom: 0;
right:0;
width: 100px;
height: 60px;
line-height: 80px;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>登陆</h1>
<div class="left" tapmode onclick="api.closeWin();">返回</div>
<div class="right" tapmode onclick="fnOpenRegisterWin();">注册</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
};
function fnOpenRegisterWin()
{
api.openWin({
name: 'register',
url: './register.html',
pageParam: {
name: 'test'
}
});
}
</script>
</html>
四、注册页面
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
position: relative;
width: 100%;
height: 60px;
background-color: #f0f;
}
header h1{
position: relative;
height:60px;
line-height: 80px;
font-size: 20px;
color: #fff;
text-align: center;
}
header .left
{
position: absolute;
bottom: 0;
left:0;
width: 100px;
height: 60px;
line-height: 80px;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>登陆</h1>
<div class="left" tapmode onclick="api.closeWin();">返回</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
};
</script>
</html>
——————————————————————————————————————————
**打开**frame
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
position: relative;
width: 100%;
height: 60px;
background-color: #f0f;
}
header h1{
position: relative;
height:60px;
line-height: 80px;
font-size: 20px;
color: #fff;
text-align: center;
}
header .left
{
position: absolute;
bottom: 0;
left:0;
width: 100px;
height: 60px;
line-height: 80px;
font-size: 16px;
text-align: center;
}
header .right
{
position: absolute;
bottom: 0;
right:0;
width: 100px;
height: 60px;
line-height: 80px;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>每日活动</h1>
<div class="left" tapmode onclick="fnOpenframe();">frmae</div>
<div class="right" tapmode onclick="fnOpenpersonCenterWin();">个人中心</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
};
function fnOpenframe(){
api.openFrame({
name: 'frame',
url: './frame.html',
rect: {
x: 0,
y: 60,
w: 'auto',
h: 'auto'
},
pageParam: {
name: 'test'
},
bounces: true,
bgColor: 'rgba(0,0,0,0)',
vScrollBarEnabled: true,
hScrollBarEnabled: true
});
}
function fnOpenpersonCenterWin()
{
api.openWin({
name: 'page1',
url: './login.html',
pageParam: {
name: 'test'
}
});
}
</script>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,body {
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
</script>
</html>