* [一參考資料](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>
~~~
