本文详细介绍了使用MUI框架开发一款移动端汽车租赁应用的过程，包括首页、数据统计和个人页面的界面设计和功能实现。应用通过与后台交互获取和展示车辆信息，提供数据统计功能，并实现了用户登录、注册和个人信息展示。数据收发使用JSON格式，前端与后端通过Ajax进行通信。
目录
主要功能描述
由于是移动端的应用，面向的是需要租赁汽车的用户，因此移动端应用本身不需要涉及到后台的数据操作等管理员需要的功能。对于实际的用户需求可以设计出三部分主要的功能，包括登录注册功能、车辆信息展示功能和数据统计功能。
用户可以通过登录账号查看个人信息，包括当前正在租用的汽车信息和计时计费信息。考虑到租赁汽车手续比较繁杂，因此没有设计直接在移动应用上租赁汽车的功能。车辆展示功能主要展示当前可租用车辆的车辆信息，方便用户考虑租用哪种车辆。数据统计功能可以展示当前总的汽车租赁情况，可直观地看到哪种车辆最受用户喜爱，也能给用户选择车辆时作参考。
界面设计
1.应用首页
应用的首页主要展示的是当前可以租赁的汽车的信息，包括价格、车辆编号、车辆类型信息。
页面顶端显示该页标题，在标题下方使用的是区域滚动组件中的横向滚动，将汽车根据汽车的类型进行分类显示。中间部分为内容显示部分，这一部分展示车辆的价格及编号等信息，用户可以通过点击上方按钮选择不同的车辆类型，内容部分就会显示对应类型的车辆信息。最后，页面底部为导航栏，通过点击可跳转至其他两个页面。
汽车的信息是从后台获取的，所以需要首先需要实现与后台之间的发送和接受数据，然后将接收到的数据用卡片视图的形式展现出来。
应用首页是由三个页面拼接成的，分别是顶部、中间车辆信息页面、底部导航栏。
1. 顶部页面(main.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" />
<script src="js/mui.min.js"></script>
<link href="css/all.css" rel="stylesheet"/>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
var self = plus.webview.currentWebview();
var current = '';
var current = '';
var styles1 = {
top: '90px',
bottom: '0'
};
var styles2 = {
top: '90px',
bottom: '50px'
};
var tabsConfig = {
Acar: {
url: 'index-Acar.html',
styles: styles1,
default: true
},
Bcar: {
url: 'index-Bcar.html',
styles: styles2
},
Ccar: {
url: 'index-Ccar.html',
styles: styles2
},
Dcar: {
url: 'index-Dcar.html',
styles: styles2
},
Ecar: {
url: 'index-Ecar.html',
styles: styles2
}
};
var tabs = {};
for (id in tabsConfig) {
tabs[id] = plus.webview.create(tabsConfig[id].url, id, tabsConfig[id].styles);
if (tabsConfig[id]['default']) {
self.append(tabs[id]);
current = id;
}
}
mui('.mui-scroll').on('tap', 'a', function(e) {
if (current == this.dataset.id) {
mui.fire(tabs[current], 'scroll2top');
return;
}
tabs[this.dataset.id].show();
tabs[current].hide();
current = this.dataset.id;
});
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="head">
<h1 class="mui-title">首页</h1>
</header>
<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" id="scroll-wrapper">
<div class="mui-scroll">
<a class="mui-control-item mui-active" data-id="Acar" href="index-Acar.html">
A类车
</a>
<a class="mui-control-item" data-id="Bcar" href="index-Bcar.html">
B类车
</a>
<a class="mui-control-item" data-id="Ccar" href="index-Ccar.html">
C类车
</a>
<a class="mui-control-item" data-id="Dcar" href="index-Dcar.html">
D类车
</a>
<a class="mui-control-item" data-id="Ecar" href="index-Ecar.html">
E类车
</a>
</div>
</div>
</body>
</html>
2. 中间车辆信息页面(index-Acar.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" />
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</head>
<body>
<div id="carsDiv"></div>
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript">
if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript" src="js/jiekou.js" ></script>
<script type="text/javascript">
var cars=new Array;
function findAllCars(){
var strTemp = {
reqKey: "v3_findAllCars" //查找所属有车辆信息的函数，对应数据库中的find_AllCars这个存储过程
};
var str = "jsons=" + JSON.stringify(strTemp); //将strTemp转化为json字符串
console.log(str);
sendToServer(str,function(data){ //将str发送给服务器，data为从后台接收到的数据
//成功之后的操作
for(var i=0;i<data['ansData'].length;i++)
{
cars[i]=new Object();
cars[i].carID=data['ansData'][i].carID; //data是一个对象，data={result:1,ansData:[{carID:1,carType:A},{carID:1,carType:A}]}
cars[i].carType=data['ansData'][i].carType;
cars[i].isRent=data['ansData'][i].isRent;
cars[i].carCharge=data['ansData'][i].carCharge;
cars[i].carImgSrc=data['ansData'][i].carImgSrc;
}
//绘制DIV
var carsDiv=document.getElementById("carsDiv");
for(var i=0;i<cars.length;i++)
{
if(cars[i].carType=="A ")
{
var num=cars[i].carImgSrc.substr(0,1);
var drawDiv='<div class="mui-card">'+
'<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(img/'+num+'.jpg)"></div>'+
'<div class="mui-card-content">'+
'<h3 style="margin-left: 10px;">'+cars[i].carID+'</h3>'+
'</div>'+
'<div class="mui-card-footer">'+
'<h4>价格：'+cars[i].carCharge+'每小时</h4>'+
'</div>'+
'</div>';
carsDiv.innerHTML+=drawDiv;
}
}
});
}
function pulldownRefresh(){
findAllCars();
setTimeout(function() {
location.reload();
mui('#carsDiv').pullRefresh().endPulldownToRefresh(); //refresh completed,停止刷新
}, 1000); //1000毫秒
}
mui.init({
pullRefresh : {
container:"#carsDiv",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
down : {
style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
color:'blue', //可选，默认“#2BD009” 下拉刷新控件颜色
height:'50px',//可选,默认50px.下拉刷新控件的高度,
range:'100px', //可选 默认100px,控件可下拉拖拽的范围
offset:'50px', //可选 默认0px,下拉刷新控件的起始位置
auto: false,//可选,默认false.首次加载自动上拉刷新一次
callback : pulldownRefresh//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
$().ready(function(){
findAllCars();
});
</script>
</body>
</html>
3. 底部导航栏(index.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 href="css/all.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() { //mui.init初始化mui的一些参数配置，如果要使用h5+的一些对象、方法，就要使用mui.plusReady
var self = plus.webview.currentWebview(); //获取当前页面所属的Webview窗口对象
var current = '';
var current = '';
var styles = { //嵌套页面的位置
top: '0',
bottom: '51px'
};
var tabsConfig = {
main: {
url: 'main.html',
styles: styles,
default: true //默认首页
},
statistic: {
url: 'statistic.html',
styles: styles
},
me: {
url: 'me.html',
styles: styles
}
};
var tabs = {};
for (id in tabsConfig) {
tabs[id] = plus.webview.create(tabsConfig[id].url, id, tabsConfig[id].styles); //新建webview窗口
if (tabsConfig[id]['default']) {
self.append(tabs[id]);
current = id;
}
}
mui('#bar').on('tap', 'a', function(e) { //点击下面的首页，统计，我的跳转至对应页面
if (current == this.dataset.id) { //mui选择id名为bars的对象的方法on是作用于的每一个a标签function{e}这个函数
mui.fire(tabs[current], 'scroll2top');
return;
}
tabs[this.dataset.id].show();
tabs[current].hide();
current = this.dataset.id;
});
});
</script>
</head>
<body>
<div class="mui-content">
<nav id="bar" class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="main.html" data-id="main">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="statistic.html" data-id="statistic">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">统计</span>
</a>
<a class="mui-tab-item" href="me.html" data-id="me">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
</div>
</body>
</html>
2.数据统计页面
数据统计页面主要展示近期车辆的租赁情况以及车辆性能比较，为用户在选择车辆时作参考。通过引入Echarts图表可以将数据可视化，让数据直观地展示给用户。Echarts提供了丰富的API接口以及文档, 通过合理设置并结合后台传送的json数据, 即可展示所需的数据主题。
数据统计页面(statistic.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 href="css/all.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="head">
<h1 class="mui-title">统计</h1>
</header>
<div id="echartsdiv">
<center><div id="type1-statistic"></div></center>
<center><div id="type2-statistic"></div></center>
</div>
<script src="js/echarts.min.js"></script>
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript">
if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript" src="js/jiekou.js" ></script>
<script type="text/javascript">
var type=[
{
"sum":0,
"name":"A "
},
{
"sum":0,
"name":"B "
},
{
"sum":0,
"name":"C "
},
{
"sum":0,
"name":"D "
},
{
"sum":0,
"name":"E "
}
];
function findAllRecord(){
var strTemp = {
reqKey: "v3_findAllRecord"
};
var str = "jsons=" + JSON.stringify(strTemp);
console.log(str);
sendToServer(str,function(data){
//成功之后的操作
for(var m=0;m<data['ansData'].length;m++)
for(var n=0;n<type.length;n++)
if(data['ansData'][m].carType==type[n].name)
type[n].sum+=1;
localStorage.setItem("typeA",type[0].sum);
localStorage.setItem("typeB",type[1].sum);
localStorage.setItem("typeC",type[2].sum);
localStorage.setItem("typeD",type[3].sum);
localStorage.setItem("typeE",type[4].sum);
});
}
function echartsInit(){
var dataArr=new Array;
dataArr=[localStorage.getItem("typeA"),localStorage.getItem("typeB"),localStorage.getItem("typeC"),
localStorage.getItem("typeD"),localStorage.getItem("typeE")];
var type1Chart = echarts.init(document.getElementById('type1-statistic'));
var type1Option = {
title: {
text: '租赁情况'
},
tooltip: {},
legend: {
data:['租赁情况']
},
xAxis: {
data: ["A类车","B类车","C类车","D类车","E类车"]
},
yAxis: {},
series: [{
name: '租赁情况',
type: 'bar',
data: [dataArr[0],dataArr[1],dataArr[2],dataArr[3],dataArr[4]]
}],
grid:{
top:'25%',//距上边距
left:'10%',//距离左边距
right:'10%',//距离右边距
bottom:'25%',//距离下边距
},
};
type1Chart.setOption(type1Option);
var type2Chart = echarts.init(document.getElementById('type2-statistic'));
var type2Option = {
title: {
text: '车辆性能比较'
},
tooltip: {},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: 'black',
backgroundColor:'lightgrey',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: '加速度', max: 200 },
{ name: '最高速', max: 200 },
{ name: '稳定性', max: 200 },
{ name: '安全性', max: 200 },
{ name: '性价比', max: 200 }
]
},
series: [{
name: '性能',
type: 'radar',
// areaStyle: {normal: {}},
data: [{
value: [100, 120, 140, 110, 180],
name: 'A型车'
},
{
value: [110, 100, 110, 120, 150],
name: 'B型车'
},
{
value: [130, 130, 130, 130, 110],
name: 'C型车'
},
{
value: [160, 160, 160, 150, 100],
name: 'D型车'
},
{
value: [180, 180, 190, 160, 50],
name: 'E型车'
}]
}]
};
type2Chart.setOption(type2Option);
}
function pulldownRefresh(){
localStorage.clear();
findAllRecord();
echartsInit();
setTimeout(function() {
location.reload();
mui('#echartsdiv').pullRefresh().endPulldownToRefresh();
}, 1000);
}
$().ready(function(){
echartsInit();
});
mui.init({
pullRefresh : {
container:"#echartsdiv",
down : {
style:'circle',
color:'blue',
height:'50px',
range:'100px',
offset:'50px',
auto: false,
callback : pulldownRefresh
}
}
});
</script>
</body>
</html>
3.个人页面
个人页面可以展示当前用户的用户名、正在租用的车辆信息以及该车辆的计时和累计费用等信息。此外为了能方便用户切换账号和新用户注册，设计了登录、注册和注销功能。
第一部分显示用户的基本信息，包括用户名和用户ID，第二部分展示租车信息和计时信息，右上角的菜单包含了登录和注册两个子页面以及注销功能。
在用户未登录时，将不显示个人信息。登录成功后从登录页面跳转至个人页面，此时将显示正在租用车辆的信息，包括车辆类型和开始租用该车的时间，以及显示该车的租用时长和累计的费用。
1. 个人页面(me.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 href="css/all.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="head">
<h1 class="mui-title">我</h1>
<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
</header>
<div id="topPopover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<ul class="mui-table-view">
<li class="mui-table-view-cell" id="login"><a href="login.html">登陆</a></li>
<li class="mui-table-view-cell"><a href="register.html">注册</a></li>
<li class="mui-table-view-cell" onclick="logOut()"><a href="#">注销</a></li>
</ul>
</div>
<div id="me_content">
<ul class="mui-table-view" id="me-mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-left" src="img/user-photo.png" id="userPic">
<div class="mui-media-body">
<h4 id="me_userName">未登陆 </h4>
<p class="mui-ellipsis" id="me_userIDCard"></p>
</div>
</a>
</li>
</ul>
<ul class="mui-table-view" style="margin-top: 5px;">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">租车信息</a>
<div class="mui-collapse-content" style="background-color: lightgrey;">
<div class="mui-card">
<div class="mui-card-header mui-card-media" style="height:40vw;background-image: url(img/3101644_144656841038_2.jpg);" id="carPic"></div>
<div class="mui-card-content">
<h4 style="margin-left: 10px;" id="carType">暂无需要归的还车辆</h4><!--车辆类型-->
</div>
<div class="mui-card-footer">
<h5 id="rentTime"></h5><!--租车日期-->
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">计时信息</a>
<div class="mui-collapse-content" style="background-color: lightgrey;">
<div class="mui-card">
<div class="mui-card-header mui-card-media" style="height:40vw;background-image: url(img/timg.jpg);" id="carPic"></div>
<div class="mui-card-content">
<h4 style="margin-left: 10px;" id="time">暂无计时信息</h4>
</div>
<div class="mui-card-footer">
<h5 id="timeShow"></h5>
</div>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript">
if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript" src="js/jiekou.js" ></script>
<script type="text/javascript">
function judge_log(){
if(sessionStorage.getItem("userName"))
{
var login_div=document.getElementById("login");
login_div.style.display="none";
}
}
function logOut(){
sessionStorage.clear();
alert("已退出登陆！");
window.location.href = "me.html";
}
function findRecord(){
var strTemp = {
reqKey: "v3_findRecord",
input: {
rentUserID:sessionStorage.getItem("userIDCard")
}
};
var str = "jsons=" + JSON.stringify(strTemp);
var strTemp1 = {
reqKey: "v3_findCar",
input: {
carID: sessionStorage.getItem("carID")
}
};
var str1 = "jsons=" + JSON.stringify(strTemp1);
sendToServer(str1, function(data1) {
//成功之后的操作
sessionStorage.setItem("charge", data1['ansData'][0].carCharge);
});
sendToServer(str,function(data){
//成功之后的操作
for(var i=0;i<data['ansData'].length;i++)
{
if(data['ansData'][i].isReturn==0)
{
sessionStorage.setItem("carID",data['ansData'][i].carID);
sessionStorage.setItem("carType",data['ansData'][i].carType);
sessionStorage.setItem("rentUserID",data['ansData'][i].rentUserID);
sessionStorage.setItem("approveAdminID",data['ansData'][i].approveAdminID);
sessionStorage.setItem("rentTime",data['ansData'][i].rentTime);
sessionStorage.setItem("carSituationRecord",data['ansData'][i].carSituationRecord);
sessionStorage.setItem("isReturn",data['ansData'][i].isReturn);
sessionStorage.setItem("returnTime",data['ansData'][i].returnTime);
sessionStorage.setItem("chargeRecord",data['ansData'][i].chargeRecord);
}
}
if(sessionStorage.getItem("rentUserID") != null) {
document.getElementById('carType').innerHTML = '车辆类型：'+sessionStorage.getItem("carType");
document.getElementById('rentTime').innerHTML = '租车日期：'+ sessionStorage.getItem("rentTime");
var carPic=document.getElementById("carPic");
carPic.style.backgroundImage = "url('img/2.jpg')";
//时间处理
var rtime= sessionStorage.getItem("rentTime");
//对字符串格式特殊字符时间处理
rtime = rtime.replace(new RegExp("-","gm"),"/"); //replace用第二个参数替换第一个参数
rtime = rtime.replace(new RegExp("T","gm")," "); //RegExp是正则表达式，第一个参数是要找的那个字符，第二个参数
rtime = rtime.replace(new RegExp("Z","gm"),""); //g：global 全局匹配（找整个字符串），i：忽略大小写，m：多行匹配
console.log("租借时间："+rtime);
var now_timestamp =Date.parse(new Date());//获取当前时间戳 毫秒格式
var rtime_h = (new Date(rtime)).getTime();//将租借时间转换为毫秒格式
var Alltime=(now_timestamp-rtime_h)/3600000;
Alltime=Math.ceil(Alltime);//租借时长取整
document.getElementById('time').innerHTML='已租用：'+Alltime+ '小时';
document.getElementById('timeShow').innerHTML = "累计费用："
+Alltime * sessionStorage.getItem("charge")+"元";
}
});
}
$().ready(function(){
initUserName();
judge_log();
findRecord();
});
function pulldownRefresh(){
findRecord();
setTimeout(function() {
location.reload();
mui('#me_content').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1000);
}
mui.init({
pullRefresh : {
container:"#me_content",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
down : {
style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
color:'blue', //可选，默认“#2BD009” 下拉刷新控件颜色
height:'50px',//可选,默认50px.下拉刷新控件的高度,
range:'100px', //可选 默认100px,控件可下拉拖拽的范围
offset:'50px', //可选 默认0px,下拉刷新控件的起始位置
auto: false,//可选,默认false.首次加载自动上拉刷新一次
callback : pulldownRefresh//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
</script>
</body>
</html>
2. 登陆页面(login.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 href="css/all.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
function logingetvalue(){
var username=document.loginform.username.value;
var password=document.loginform.password.value;
console.log(username+" "+password);
}
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="head">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
<h1 class="mui-title">登陆</h1>
</header>
<form class="mui-input-group" style="margin-top: 50px;" name="loginform">
<div class="mui-input-row">
<label>账号</label>
<input type="text" class="mui-input-clear" placeholder="请输入账号" name="username" id="login_username">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-password" placeholder="请输入密码" name="password" id="login_password">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-success" onclick="login()">登陆</button>
</div>
</form>
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript">
if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript" src="js/jiekou.js" ></script>
<script type="text/javascript">
function show_box(id) {
jQuery('.widget-box.visible').removeClass('visible');
jQuery('#'+id).addClass('visible');
}
function login(){
var strTemp = {
reqKey: "v3_findUser",
input: {
userName:document.getElementById("login_username").value,
userPassWord:document.getElementById("login_password").value
}
};
var str = "jsons=" + JSON.stringify(strTemp);
console.log(str);
login_sendToServer(str,function(data){
//成功之后的操作
sessionStorage.setItem("userName",data['ansData'][0].userName);
sessionStorage.setItem("userPassWord",data['ansData'][0].userPassWord);
sessionStorage.setItem("userType",data['ansData'][0].userType);
sessionStorage.setItem("userIDCard",data['ansData'][0].userIDCard);
alert("登陆成功！");
window.location.href = "me.html";
});
}
</script>
</body>
</html>
3. 注册页面(register.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 href="css/all.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
function registergetvalue(){
var username=document.registerform.username.value;
var password1=document.registerform.password1.value;
var password2=document.registerform.password2.value;
var id=document.registerform.id.value;
console.log("username:"+username+" "+"password1:"+password1+" "+"password2:"+password2+" "+"id:"+id);
};
mui('.mui-input-group').on('tap', function(e) {
var check = true;
mui(".mui-input-group input").each(function () {
//若当前input为空，则alert提醒
if(!this.value||trim(this.value)==""){
var label = this.previousElementSibling;
mui.alert(label.innerText+"不允许为空");
check = false;
return false;
}
});
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="head">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
<h1 class="mui-title">注册</h1>
</header>
<form class="mui-input-group" style="margin-top: 50px;" name="registerform">
<div class="mui-input-row">
<label>账号</label>
<input type="text" class="mui-input-clear" placeholder="请输入账号" name="username" id="reg_userName">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-password" placeholder="请输入密码" name="password1" id="reg_userPassWord1">
</div>
<div class="mui-input-row">
<label>确认</label>
<input type="password" class="mui-input-password" placeholder="请确认密码" name="password2" id="reg_userPassWord2">
</div>
<div class="mui-input-row">
<label>身份证</label>
<input type="text" class="mui-input-clear" placeholder="请输入身份证号" name="id" id="reg_userIDCard">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-warning" onclick="register()">注册</button>
</div>
</form>
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript">
if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript" src="js/jiekou.js" ></script>
<script type="text/javascript">
function register() {
var userName=document.getElementById("reg_userName").value;
var userPassWord1= document.getElementById("reg_userPassWord1").value;
var userPassWord2= document.getElementById("reg_userPassWord2").value;
if(userPassWord1==userPassWord2)
{
var strTemp = {
reqKey: "v3_InsertUsers",
input: {
userName: document.getElementById("reg_userName").value,
userPassWord: document.getElementById("reg_userPassWord1").value,
userType:1,
userIDCard:document.getElementById("reg_userIDCard").value
}
};
var str = "jsons=" + JSON.stringify(strTemp);
reg_sendToServer(str,function(data){
//成功之后的操作
sessionStorage.setItem("userName",document.getElementById("reg_userName").value);
sessionStorage.setItem("userPassWord",document.getElementById("reg_userPassWord1").value);
sessionStorage.setItem("userType",1);
sessionStorage.setItem("userIDCard",document.getElementById("reg_userIDCard").value);
alert("注册成功！");
window.location.href = "me.html";
});
}
else
alert("请确保两次输入的密码相同");
}
</script>
</body>
</html>
数据收发
与服务器进行数据交互使用的json数据格式，这里示范一下前端与后台的进行数据交互的函数。后台使用的是C++服务器和mysql数据库，这里就不展示了。
function sendToServer(tStr,funcName){
var url = "http://192.168.xxx.xxx:8088/server/doserver.php";
var xmlhttp;
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var str = tStr;
console.log('sendMes:'+str);
var res = "";
xmlhttp.onreadystatechange = function() {
console.log('readyState:'+xmlhttp.readyState);
console.log('status:'+xmlhttp.status);
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
res = xmlhttp.responseText;
console.log('receiveMes:'+res);
var jsonVar = JSON.parse(this.responseText);
var result = jsonVar.result;
switch(result) {
case 0:
funcName(jsonVar);
break;
case -1:
alert("出现错误！");
break;
default:
alert(result);
break;
}
}
}
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(str);
}
结束语
本文介绍了如何使用MUI框架开发移动应用，使用MUI框架开发移动应用具有跨平台、开发成本低等特点，且代码简单易懂，应用界面简洁统一。相较于原生APP开发，虽然使用MUI框架开发APP还有很多不足的地方，但是其学习成本较低，适合于移动应用开发的初学者。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
