前言
我们已经把web app的大概骨架给建好了，下面来对具体的子页面内容进行填充。
思考
home.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<!--引入公用样式-->
<link rel="stylesheet" type="text/css" href="../css/public.css" />
</head>
<body>
<!--轮播图插件-->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/kenan4.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/kenan1.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/kenan2.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/kenan3.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/kenan4.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/kenan1.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<!--服务-->
<div class="home-listbox bs-bb bgc-ff">
<div class="serviceTitle">
<span class="listFontSize">服 务</span>
</div>
<!--第一排-->
<div class="mui-row row-imgbox fatherbox">
<div class="mui-col-xs-3 publicjumppage" id="home-identificationCard">
<div class="ta-c imgbox">
<img src="../images/shenfen.png" alt="" />
</div>
<div class="smFontSize ta-c">身份查询</div>
</div>
<div class="mui-col-xs-3 publicjumppage" id="home-banks">
<div class="ta-c imgbox">
<img src="../images/yinhangka.png" alt="" />
</div>
<div class="smFontSize ta-c">银行查询</div>
</div>
<div class="mui-col-xs-3 publicjumppage" id="home-belongingTo">
<div class="ta-c imgbox">
<img src="../images/guishudi.png" alt="" />
</div>
<div class="smFontSize ta-c">手机查询</div>
</div>
<div class="mui-col-xs-3 publicjumppage" id="home-equipment">
<div class="ta-c imgbox">
<img src="../images/shebei.png" alt="" />
</div>
<div class="smFontSize ta-c">设备信息</div>
</div>
</div>
</div>-->
</div>
<!--待开发想-->
<div class="home-listbox bs-bb bgc-ff">
<div class="serviceTitle">
<span class="listFontSize">待开发...</span>
</div>
<!--第一排-->
<div class="mui-row row-imgbox nofatherbox">
<div class="mui-col-xs-3 publicjumppage">
<div class="ta-c imgbox">
<img src="../images/shegoku.png" alt="" />
</div>
<div class="smFontSize ta-c">社工库</div>
</div>
<div class="mui-col-xs-3 publicjumppage">
<div class="ta-c imgbox">
<img src="../images/kuaidi.png" alt="" />
</div>
<div class="smFontSize ta-c">快递查询</div>
</div>
<div class="mui-col-xs-3 publicjumppage">
<div class="ta-c imgbox">
<img src="../images/ditie.png" alt="" />
</div>
<div class="smFontSize ta-c">公交地铁</div>
</div>
<div class="mui-col-xs-3 publicjumppage">
<div class="ta-c imgbox">
<img src="../images/sl.png" alt="" />
</div>
<div class="smFontSize ta-c"></div>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<!--引入页面跳转公用方法-->
<script src="../js/public.js"></script>
<script type="text/javascript">
mui.init();
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
});
//预加载页面
mui.plusReady(function() {
mui.preload({
url: "home-banks.html",
id: "home-banks"
});
mui.preload({
url: "home-belongingTo.html",
id: "home-belongingTo"
});
mui.preload({
url: "home-equipment.html",
id: "home-equipment"
});
mui.preload({
url: "home-identificationCard.html",
id: "home-identificationCard"
});
})
</script>
</body>
</html>
在home页面，我们设置了一个轮播图片，然后提供了4个服务，和待开发的3个。
身份查询home-identificationCard.html，银行查询home-banks.html，手机查询home-belongingTo.html，设备信息home-equipment.html 这些都是引用页面跳转的公用方法。public.js
home-identificationCard.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>身份证归属地</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<!--引入公用样式-->
<link rel="stylesheet" type="text/css" href="../css/public.css" />
</head>
<body class="dp-n" id="body">
<header class="mui-bar mui-bar-nav titleBar-bgcolor" id="header">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left c-ff"></a>
<h1 class="mui-title titleBar-color">身份证归属地</h1>
</header>
<!--这里面是content页面-->
<div class="mui-content">
<!--头部搜索框-->
<div class="header-search bs-bb">
<div class="header-title">
<span class="c-a3 bdFontSize">请输入您的要查询的身份证号</span>
</div>
<!--搜索框-->
<div class="header-inp">
<input type="text" class="bdFontSize" placeholder="身份证号码" id="val" />
<span></span>
</div>
<!--确认按键-->
<div class="header-btn">
<button class="bdFontSize c-ff" id="btn">确 认</button>
</div>
</div>
<!--显示内容区域-->
<div class="content bs-bb dp-n" id="results">
<div class="content-tt bs-bb">
<span class="ttFontSize c-a3">详细信息</span>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-2">
<span>号码：</span>
</div>
<div class="mui-col-xs-10">
<span id="idcard"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-2">
<span>生日：</span>
</div>
<div class="mui-col-xs-10">
<span id="birthday"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-2">
<span>性别：</span>
</div>
<div class="mui-col-xs-10">
<span id="sex"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-2">
<span>属性：</span>
</div>
<div class="mui-col-xs-10">
<span id="zodiac"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-2">
<span>时辰：</span>
</div>
<div class="mui-col-xs-10">
<span id="cnEra"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-2">
<span>星座：</span>
</div>
<div class="mui-col-xs-10">
<span id="constellation"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-2">
<span>地址：</span>
</div>
<div class="mui-col-xs-10">
<span id="area"></span>
</div>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/immersed.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
plus.nativeUI.showWaiting("加载中...");
var topoffset = '45px';
if(plus.navigator.isImmersedStatusbar()) {
topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
}
document.getElementById('header').style.height = (immersed + 44) + 'px';
document.querySelector('.mui-content').style.marginTop = (immersed) + 'px';
plus.nativeUI.closeWaiting();
document.getElementById("body").className = "";
/*
*发送请求获取值
*
**/
document.getElementById('btn').addEventListener('tap', function(event) {
//获取用户名
var val = document.getElementById('val').value;
var url = "http://www.zhaotool.com/v1/api/lt/e10adc3949ba59abbe56e057f20f883e/" + val;
//判断是否为空
if(val != '') {
plus.nativeUI.showWaiting("加载中...");
mui.ajax(url, {
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
plus.nativeUI.closeWaiting();
if(data.code == "0") {
var dat = data.data;
//赋值
document.getElementById('birthday').innerText = dat.birthday;
document.getElementById('area').innerText = dat.area;
document.getElementById('constellation').innerText = dat.constellation;
document.getElementById('zodiac').innerText = dat.zodiac;
document.getElementById('idcard').innerText = dat.idcard;
document.getElementById('sex').innerText = dat.sex;
document.getElementById('cnEra').innerText = dat.cnEra;
document.getElementById("results").className = "content bs-bb";
} else {
plus.nativeUI.toast("请输入正确的身份证号！");
}
},
error: function(xhr, type, errorThrown) {
plus.nativeUI.closeWaiting();
}
});
} else {
plus.nativeUI.toast("请输入身份证号！");
}
})
})
//重写back
var oldBack = mui.back;
mui.back = function() {
document.getElementById("results").className = "content bs-bb dp-n";
document.getElementById('val').value = "";
oldBack();
};
</script>
</body>
</html>
这里关键是调用了找工具的api接口http://www.zhaotool.com/v1/api/lt/e10adc3949ba59abbe56e057f20f883e/"
额外要注意的还有mui.ajax和传统的ajax有些不同。
home-banks.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>银行卡查询</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<!--引入公用样式-->
<link rel="stylesheet" type="text/css" href="../css/public.css" />
</head>
<body class="dp-n" id="body">
<header class="mui-bar mui-bar-nav titleBar-bgcolor" id="header">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left c-ff"></a>
<h1 class="mui-title titleBar-color">银行卡查询</h1>
</header>
<!--这里面是content页面-->
<div class="mui-content bs-bb">
<!--头部搜索框-->
<div class="header-search bs-bb">
<div class="header-title">
<span class="c-a3 bdFontSize">请输入您的要查询的银行卡号</span>
</div>
<!--搜索框-->
<div class="header-inp">
<input type="text" class="bdFontSize" placeholder="银行卡号" id="val" />
<span></span>
</div>
<!--确认按键-->
<div class="header-btn">
<button class="bdFontSize c-ff" id="btn">确 认</button>
</div>
</div>
<!--显示内容区域-->
<div class="content bs-bb dp-n" id="results">
<div class="content-tt bs-bb">
<span class="ttFontSize c-a3">详细信息</span>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-3">
<span>银行卡号：</span>
</div>
<div class="mui-col-xs-9">
<span id="cardnum"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-3">
<span>银行名称：</span>
</div>
<div class="mui-col-xs-9">
<span id="bankname"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-3">
<span>卡片类型：</span>
</div>
<div class="mui-col-xs-9">
<span id="banktype"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-3">
<span>银行网址：</span>
</div>
<div class="mui-col-xs-9">
<span id="bankurl"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-3">
<span>客服电话：</span>
</div>
<div class="mui-col-xs-9">
<span id="bankcall"></span>
</div>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/immersed.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
plus.nativeUI.showWaiting("加载中...");
var topoffset = '45px';
if(plus.navigator.isImmersedStatusbar()) {
topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
}
document.getElementById('header').style.height = (immersed + 44) + 'px';
document.querySelector('.mui-content').style.marginTop = (immersed) + 'px';
plus.nativeUI.closeWaiting();
document.getElementById("body").className = "";
/*
*发送请求获取值
*
**/
document.getElementById('btn').addEventListener('tap', function(event) {
//获取用户名
var val = document.getElementById('val').value;
var url = "http://www.zhaotool.com/v1/api/lt/e10adc3949ba59abbe56e057f20f883e/" + val;
//判断是否为空
if(val != '') {
plus.nativeUI.showWaiting("加载中...");
mui.ajax(url, {
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
plus.nativeUI.closeWaiting();
if(data.code == "0") {
var dat = data.data;
//赋值
document.getElementById('cardnum').innerText = dat.bankCard;
document.getElementById('bankname').innerText = dat.bankName;
document.getElementById('banktype').innerText = dat.cardType;
document.getElementById('bankurl').innerText = dat.site;
document.getElementById('bankcall').innerText = dat.bankMobile;
document.getElementById("results").className = "content bs-bb";
} else {
plus.nativeUI.toast("请输入正确的银行卡号！");
}
},
error: function(xhr, type, errorThrown) {
plus.nativeUI.closeWaiting();
}
});
} else {
plus.nativeUI.toast("请输入银行卡号！");
}
})
})
//重写back
var oldBack = mui.back;
mui.back = function() {
document.getElementById("results").className = "content bs-bb dp-n";
document.getElementById('val').value = "";
oldBack();
};
</script>
</body>
</html>
API接口都是一样的。
home-belongingTo.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>手机号码归属地</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<!--引入公用样式-->
<link rel="stylesheet" type="text/css" href="../css/public.css" />
</head>
<body class="dp-n" id="body">
<header class="mui-bar mui-bar-nav titleBar-bgcolor" id="header">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left c-ff"></a>
<h1 class="mui-title titleBar-color">手机号码归属地</h1>
</header>
<!--这里面是content页面-->
<div class="mui-content">
<!--头部搜索框-->
<div class="header-search bs-bb">
<div class="header-title">
<span class="c-a3 bdFontSize">请输入您要查询的手机号</span>
</div>
<!--搜索框-->
<div class="header-inp">
<input type="text" class="bdFontSize" placeholder="11位手机号" id="val" />
<span></span>
</div>
<!--确认按键-->
<div class="header-btn">
<button class="bdFontSize c-ff" id="btn">确 认</button>
</div>
</div>
<!--显示内容区域-->
<div class="content bs-bb dp-n" id="results">
<div class="content-tt bs-bb">
<span class="ttFontSize c-a3">详细信息</span>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-3">
<span>手机号码：</span>
</div>
<div class="mui-col-xs-9">
<span id="mobile"></span>
</div>
</div>
<!---->
<div class="content-list c-a3 listFontSize mui-row">
<div class="mui-col-xs-3">
<span>归属地：</span>
</div>
<div class="mui-col-xs-9">
<span id="phoneArea"></span>
</div>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/immersed.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
plus.nativeUI.showWaiting("加载中...");
var topoffset = '45px';
if(plus.navigator.isImmersedStatusbar()) {
topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
}
document.getElementById('header').style.height = (immersed + 44) + 'px';
document.querySelector('.mui-content').style.marginTop = (immersed) + 'px';
plus.nativeUI.closeWaiting();
document.getElementById("body").className = "";
/*
*发送请求获取值
*
**/
document.getElementById('btn').addEventListener('tap', function(event) {
//获取用户名
var val = document.getElementById('val').value;
var url = "http://www.zhaotool.com/v1/api/lt/e10adc3949ba59abbe56e057f20f883e/" + val;
//判断是否为空
if(val != '') {
plus.nativeUI.showWaiting("加载中...");
mui.ajax(url, {
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
plus.nativeUI.closeWaiting();
if(data.code == "0") {
var dat = data.data;
//赋值
document.getElementById('mobile').innerText = dat.mobile;
document.getElementById('phoneArea').innerText = dat.phoneArea;
document.getElementById("results").className = "content bs-bb";
} else {
plus.nativeUI.toast("请输入正确的手机号！");
}
},
error: function(xhr, type, errorThrown) {
plus.nativeUI.closeWaiting();
}
});
} else {
plus.nativeUI.toast("请输入手机号！");
}
})
})
//重写back
var oldBack = mui.back;
mui.back = function() {
document.getElementById("results").className = "content bs-bb dp-n";
document.getElementById('val').value = "";
oldBack();
};
</script>
</body>
</html>
home-equipment.html
调用封装好的HTML+就可以。
网友评论