* [一参考资料](https://blog.csdn.net/u012453773/article/details/52300911#%E4%B8%80%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99)
* [二登录页](https://blog.csdn.net/u012453773/article/details/52300911#%E4%BA%8C%E7%99%BB%E5%BD%95%E9%A1%B5)
* [效果图](https://blog.csdn.net/u012453773/article/details/52300911#1-%E6%95%88%E6%9E%9C%E5%9B%BE)
* [代码](https://blog.csdn.net/u012453773/article/details/52300911#2-%E4%BB%A3%E7%A0%81)
* [三注册页](https://blog.csdn.net/u012453773/article/details/52300911#%E4%B8%89%E6%B3%A8%E5%86%8C%E9%A1%B5)
* [页面效果](https://blog.csdn.net/u012453773/article/details/52300911#1-%E9%A1%B5%E9%9D%A2%E6%95%88%E6%9E%9C)
* [代码](https://blog.csdn.net/u012453773/article/details/52300911#2-%E4%BB%A3%E7%A0%81-1)
* [四列表页](https://blog.csdn.net/u012453773/article/details/52300911#%E5%9B%9B%E5%88%97%E8%A1%A8%E9%A1%B5)
* [代码](https://blog.csdn.net/u012453773/article/details/52300911#1-%E4%BB%A3%E7%A0%81)
* [五详情页](https://blog.csdn.net/u012453773/article/details/52300911#%E4%BA%94%E8%AF%A6%E6%83%85%E9%A1%B5)
* [代码](https://blog.csdn.net/u012453773/article/details/52300911#1-%E4%BB%A3%E7%A0%81-1)
# 一、参考资料
* **[http://edu.yuantuan.com/course/98/learn#lesson/828](http://edu.yuantuan.com/course/98/learn#lesson/828)**
# 二、登录页
## 1\. 效果图
## 2\. 代码
~~~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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<style type="text/css">
.mui-content{margin-top: 12px;}
.mui-btn{width: 80px;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登录</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>帐号</label>
<input type="text" class="mui-input-clear" placeholder="请输入帐号名" id="username">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="text" class="mui-input-clear" placeholder="请输入密码" id="password">
</div>
</form>
//注意：登录按钮不能和账号密码输入框放在一个form里面
<div class="mui-content-padded" align="center">
<button type="button" class="mui-btn mui-btn-blue" id="login">登陆</button>
<button type="button" class="mui-btn mui-btn-green" id="reg">注册</button>
</div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
var reg=document.getElementById("reg");
var login=document.getElementById("login");
reg.addEventListener('tap',function(){
mui.openWindow({
url:'reg.html',
id:'reg'
})
});
login.addEventListener('tap',function(){
var username=document.getElementById("username");
var password=document.getElementById("password");
if(username.value.length==0){
plus.ui.toast("用户名不能为空");
return;
}
if(password.value.length==0){
plus.ui.toast("密码不能为空");
return;
}
mui.ajax('http://192.168.0.7/newssystem/index.php/Home/User/login',{
data:{
username:username.value,
password:password.value
},
dataType:'json',
type:'POST',
timeout:10000,
success:function(data){
//{"reslut":1}
if(data.result==1){
//登录成功
plus.ui.toast("登录成功");
mui.openWindow({
url:'list.html',
id:'list'
})
}else{
//登录失败
plus.ui.toast(data.data);
}
},
error:function(){
}
})
})
})
</script>
</body>
</html>
~~~
# 三、注册页
## 1\. 页面效果
## 2\. 代码
~~~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>
<link href="css/mui.min.css" rel="stylesheet"/>
<style type="text/css">
.mui-content{margin-top: 12px;}
.mui-btn{width: 95%;}
</style>
</head>
<body>
<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>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input type="text" class="mui-input-clear" placeholder="请输入账号" id="username">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-clear" placeholder="请输入密码" id="password">
</div>
<div class="mui-input-row">
<label>昵称</label>
<input type="text" class="mui-input-clear" placeholder="请输入昵称" id="nickname">
</div>
</form>
/*注意：注册按钮不能和账号密码输入框放在一个form里面*/
<div class="mui-content-padded" align="center">
<button type="button" class="mui-btn mui-btn-blue" id="reg">注册</button>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
var username=document.getElementById("username");
var password=document.getElementById("password");
var nickname=document.getElementById("nickname");
var reg=document.getElementById("reg");
reg.addEventListener('tap',function(){
if(username.value.length==0){
plus.ui.toast("用户名不能为空");
return;
}
if(password.value.length==0){
plus.ui.toast("密码不能为空");
return;
}
if(nickname.value.length==0){
plus.ui.toast("昵称不能为空");
return;
}
mui.ajax('http://192.168.0.7/newssystem/index.php/Home/User/reg',{
data:{
username:username.value,
password:password.value,
nickname:nickname.value
},
dataType:'json',//数据格式类型
type:'POST',//http请求类型
timeout:10000,//超时设置
success:function(data){
//处理成功返回的数据
//{'result':1,'data':"注册成功"}
if(data.result==1){
plus.ui.toast(data.data);
mui.back();
}else{
plus.ui.toast(data.data);
}
},
error:function(){
}
})
})
})
</script>
</body>
</html>
~~~
# 四、列表页
## 1\. 代码
~~~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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
mui.ajax('http://192.168.0.7/newssystem/index.php/Home/News/getlist',{
dataType:'json',
type:'get',
timeout:10000,
success:function(data){
var list=document.getElementById("list");
var finallist='';
for(i=data.length-1;i>=0;i--){
finallist=finallist+'<li data-id="'+i+'" class="mui-table-view-cell" ><a class="mui-navigate-right"><div class="mui-media-body">'+data[i].title+'<p class="mui-ellipsis">'+data[i].content+'</p></div></a></li>';
}
list.innerHTML=finallist;
mui('#list').on('tap','li',function(){
mui.openWindow({
url:'detail.html',
id:'detail',
extras:{
title:data[this.getAttribute('data-id')].title,
author:data[this.getAttribute('data-id')].author,
pubtime:data[this.getAttribute('data-id')].pubtime,
content:data[this.getAttribute('data-id')].content
}
})
})
},
error:function(){
}
})
})
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">XXXX</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view" id="list">
</ul>
</div>
</body>
</html>
~~~
# 五、详情页
## 1\. 代码
~~~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>
<link href="css/mui.min.css" rel="stylesheet"/>
<style>
.mui-content{margin-top: 12px;margin-left: 10px;margin-right: 10px;}
</style>
</head>
<body>
<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>
<div class="mui-content">
<p><h3 id="title"></h3></p>
<p><h5 id="author"></h5></p>
<p><h5 id="content"></h5></p>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
var self=plus.webview.currentWebview();
var title=document.getElementById("title");
var content=document.getElementById("content");
var author=document.getElementById("author");
title.innerHTML=self.title;
content.innerHTML=self.content;
author.innerHTML=self.author+" "+ self.pubtime;
})
</script>
</body>
</html>
~~~
