开头先分享个有趣的哈哈哈 承包了我一天的快乐秧 点击此处给你带来快乐
独乐乐不如众乐乐哈哈哈哈
我真的很不错耶耶耶，你也真的很不错耶耶耶。要做就要做最好的，不要等到明天再说真的可惜，我知道我能做到的就是不停不停不停不停不停不停的努力。哈哈哈哈哈哈哈哈哈哈哈哈
对了，前两天有粉丝私聊我，问我为什么运行出来前端没有图，这是由于我们是通过JS到后端去拿的，都没有连接后端的话就肯定看不到鸭！
这是前面几部分的内容嘿嘿嘿
目录
一、反馈意见
1.1如何实现点击反馈意见，跳转到feedback.html页面？
首先去到my.html，首先设置id=“btnfeedback”
my.html
并且为其在my.html中添加点击事件
my.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" />
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view">
<li id="btngotoorderlist" class="mui-table-view-cell">
<a class="mui-navigate-right">
我的订单
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
修改密码
</a>
</li>
<li class="mui-table-view-cell" id="btnfeedback">
<a class="mui-navigate-right">
反馈意见
</a>
</li>
<li class="mui-table-view-cell" id='btnaboutUs'>
<a class="mui-navigate-right">
关于我们
</a>
</li>
<li class="mui-table-view-cell" id="btnlogout">
<a class="mui-navigate-right">
退出系统
</a>
</li>
<li class="mui-table-view-cell" id="btncontactus">
<a class="mui-navigate-right">
联系我们
</a>
</li>
</ul>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
document.getElementById("btnaboutUs").addEventListener("tap",function(){
var webview = mui.openWindow({
url:'aboutUs.html',
extras:{
name:'wangtiantian' , //扩展参数
time:'2020-12-5'
}
});
// console.log("123") 用来调试代码
})
document.getElementById("btncontactus").addEventListener("tap",function(){
var webview = mui.openWindow({
url:'contactus.html',
extras:{
name:'wangtiantian' , //扩展参数
time:'2020-12-5'
}
});
// console.log("123") 用来调试代码
})
document.getElementById("btngotoorderlist").addEventListener("tap",function(){
mui.openWindow({
url:"myorderlist.html",
id:"myorderlist.html"
});
});
document.getElementById("btnfeedback").addEventListener("tap",function(){
mui.openWindow({
url:"feedback.html",
id:"feedback.html"
});
});
document.getElementById("btnlogout").addEventListener("tap",function(){
localStorage.removeItem("id");
localStorage.removeItem("truename");
localStorage.removeItem("address");
localStorage.removeItem("tel");
mui.openWindow({
url:"login.html",
id:"login.html"
});
});
</script>
</body>
</html>
这样这个点击事件就实现了。
1.2着手feedback页面
新建一个HelloMUI项目,在example里面找到feedback的页面，复制进来
从代码中我们可以看到feedback的样式没有拿过来，在新建的HelloMUI项目里面找到feedback.html，直接复制粘贴到自己的项目中
记得改下 下面的路径哈哈哈
feedback.html
<!doctype html>
<html lang="en" class="feedback">
<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 rel="stylesheet" type="text/css" href="css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/feedback.css" />
<style type="text/css">
#tbquestion{
height: 300px;
}
.dm-btn{
display: block;
width: 100%;
height: 50px;
background-color: pink;
}
</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>
<button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right"></button>
<h1 class="mui-title">问题反馈</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<div class="mui-inline">问题和意见</div>
<a class="mui-pull-right mui-inline" href="#popover">
快捷输入
<span class="mui-icon mui-icon-arrowdown"></span>
</a>
<!--快捷输入具体内容，开发者可自己替换常用语-->
<div id="popover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<!--仅流应用环境下显示-->
<li class="mui-table-view-cell stream">
<a href="#">桌面快捷方式创建失败</a>
</li>
<li class="mui-table-view-cell"><a href="#">你家的蛋糕太甜了</a></li>
<li class="mui-table-view-cell"><a href="#">送得太慢了，简直龟速</a></li>
<li class="mui-table-view-cell"><a href="#">有点小贵，配不上价格</a></li>
<li class="mui-table-view-cell"><a href="#">送蛋糕的小姐姐好漂亮</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row mui-input-row">
<textarea id="tbquestion" class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
</div>
<div id='image-list' class="row image-list" id="tbimg"></div>
<p>QQ/邮箱</p>
<div class="mui-input-row">
<input type="text" id="tbqqoremail" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
</div>
<form class="mui-input-group">
<button type="button" class="dm-btn" id="send">发送</button>
<div ></div>
</form>
</div>
<script src="js/mui.min.js"></script>
<script src="js/feedback.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
mui('.mui-scroll-wrapper').scroll();
document.getElementById("send").addEventListener("tap",function(){
var vquestion=document.getElementById("tbquestion").value;
var vtbqqoremail=document.getElementById("tbqqoremail").value;
//var requrl="http://192.168.43.242:8080/SweetyManage/JavaApi"
var requrl=localStorage.getItem("requrl");
console.log(vquestion);
console.log(vtbqqoremail);
mui.ajax(requrl,{
data:{
rnum:"12",
question:vquestion,
qqoremail:vtbqqoremail,
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
'Content-Type':'application/x-www-form-urlencoded'},
success:function(data){
mui.toast("反馈成功!");
//console.log(JSON.stringify(data));
// setTimeout(function(){
// mui.back();
// },2000);
}
});
});
</script>
</body>
</html>
连接后端
数据库：
java函数
//获取反馈信息
protected void getFeedback(HttpServletRequest request, HttpServletResponse response) throws IOException
{
String question=request.getParameter("question");
String img="";
String qqoremail=request.getParameter("qqoremail");
String StrSql1="insert into tbfeedback (question,img,qqoremail) values (?,?,?)";
List<Object> params1 = new ArrayList<Object>();
params1.add(question);
params1.add(img);
params1.add(qqoremail);
DBHelper Dal=new DBHelper();
Dal.excuteSql(StrSql1, params1);
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
response.getWriter().write("{\"msg\":\"ok\"}");
}
二、首页轮播的点击事件
目前的水平只能写死的，等哪天有空了去找老师研究活的
去后端看商品的id
再修改到前端
在index.html中写点击事件
index.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-slider-item img{
width: 100%;
height: 400px;
}
</style>
</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" dir="29">
<a href="#">
<img src="imgs/cake_one.jpg" >
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item" dir="26">
<a href="#">
<img src="imgs/cake_two.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item" dir="27">
<a href="#">
<img src="imgs/cake_four.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item" dir="28">
<a href="#">
<img src="imgs/cake_six.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item" dir="29">
<a href="#">
<img src="imgs/cake_seven.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init();
mui("#slider").on("tap","div.mui-slider-item",function(){
var currentid=this.getAttribute("dir");
mui.openWindow({
url:"proview.html",
id:"proview.html",
extras:{
proid:currentid
}
});
});
//定时轮播，一秒钟轮播一次
mui("#slider").slider({
interval: 1000
});
</script>
</body>
</html>
三、完善关于我们
aboutUs.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" />
<style type="text/css">
#anthorBox{
height: 8px;
white-space:pre;
}
</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">
<div class="mui-content">
<h3 style="text-align: center;">
甜甜屋app简介
</h3>
甜甜屋商城是一款购蛋糕的app
随着互联网时代的到来，蛋糕的线上营销出现了——甜甜屋商城是一项基于实体店的服务型商城。
它可以实时更新每日的特色蛋糕，它的主要工作是推出当天的时鲜蛋糕，用户可以实时预定，
并且蛋糕可以准时送货上门，最大限度地提高用户的体验感。
<h3 style="text-align: center;">
版权声明
</h3>
<h5>总则</h5>
用户在接受甜甜屋服务之前，请务必仔细阅读本条款并同意本声明。
用户直接或通过各类方式（如站外API引用等）间接使用甜甜网服务和数据的行为，都将被视作已无条件接受本声明所涉全部内容；若用户对本声明的任何条款有异议，请停止使用甜甜网所提供的全部服务。
<br>声明内容
<br> 1、用户发表在的原创文章、评论、图片等内容的版权均归用户本人所有。
<br> 2、用户从或其他网站通过转载、复制、截图等方式获取他人内容，并发布在的，相关内容的版权属于原作者。用户不得侵犯他人包括版权在内的知识产权及其他权利。因用户发布他人作品引发知识产权或其他法律纠纷的，用户须自行承担一切后果，与无关。
<br> 3、提供的网络服务中包含的标识、版面设计、排版方式、文本、图片、图形等均受版权、商标及其它法律保护，未经相关权利人（含甜甜网及其他原始权利人）同意，上述内容均不得在任何平台被直接或间接发布、使用、出于发布或使用目的的改写或再发行，或被用于其他任何商业目的。
<br> 4、有权但无义务对用户发布的内容进行审核，并有权根据相关证据结合《侵权责任法》、《信息网络传播权保护条例》等法律法规及豆瓣社区指导原则对侵权信息进行处理。
<br> 5、尊重权利人的知识产权和合法权益。若权利人认为甜甜网用户上传的内容侵犯自身版权或其他合法权益，可依法向甜甜网帮助邮箱（ ）发出书面申请。甜甜网在书面审核相关齐备材料后，有权在不事先通知相应发布用户的情况下自行删除相关内容，并依法保留相关数据。在甜甜网发布内容，即视为用户同意甜甜网就前述情况所采取的相应措施，甜甜网不因此而承担任何违约、侵权或其他法律责任。
<br> 6、甜甜网根据上述第5条原因删除相关内容的，相应发布用户如认为投诉不属实，可依法向甜甜网帮助邮箱（ ）发出关于被删除内容不侵犯著作权的书面反申请。反申请发出后，甜甜网在书面审核相关齐备材料后，根据实际情况依法进行处理。
</div>
<span id="anthorBox">
</span>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function() {
var webview = plus.webview.currentWebview();
console.log(webview.name);
document.getElementById("anthorBox").innerHTML="<br/><p>作者："+webview.name+"时间："+webview.time;
})
</script>
</body>
</html>
四、增加联系我们版块
在my.html增加联系我们，并且设置id
添加绑定事件
新建contactus.html页面
然后直接在body里面快捷键mh 联系我们…
contactus.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" />
</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">
<div class="mui-content">
<p></p>
<p> 如果我们有什么照顾不周，请您加我们的敲击无敌大可爱王甜甜的联系方式~ QQ:990259850 </p>
<img src="imgs/qq.png" style="width: 100%;"/>
</div>
<span id="anthorBox">
</span>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function() {
var webview = plus.webview.currentWebview();
console.log(webview.name);
document.getElementById("anthorBox").innerHTML="<p><br/>修改人："+webview.name+"<br/>"+" 上一次修改："+webview.time;
})
</script>
</body>
</html>
五、换我的底部选项卡图标
注意到我下面那四个图标和名称对不上了吗哈哈哈，所以要改嗷嗷嗷嗷
在hello mui（就是直接新建一个移动app项目 直接勾选hello mui就可以了）中有各种各样的图标可以选择哦，找到图标的那个模板找就是的了，有句话说得特别好，占在巨人的肩膀上看得更远，别人已经写好的东西，我们直接拿来用就可以了，当然如果你贼6想自己写的话那也非常nice哈哈哈哈。
我的原页面是这样的
去hello mui模板下去找，哈哈哈，觉得哪个合适用哪个
记得把hello mui的css 、js、还有字体拿到自己项目中去，
还有就是改路径，比如放进我的项目就应该改为js/mui.min.js
这是我更改好了的
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
<style>
html,
body {
background-color: #efeff4;
}
</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 id="title" class="mui-title">欢迎来到甜甜屋</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="index.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a id="prolist" class="mui-tab-item" href="prolist.html">
<span class="mui-icon mui-icon-extra mui-icon-extra-order"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">商品列表</span>
</a>
<a id="car" class="mui-tab-item" href="car.html">
<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">9</span></span></span>
<span class="mui-tab-label">购物车</span>
</a>
<a class="mui-tab-item" href="my.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init();
var subpages = ['index.html', 'prolist.html', 'car.html', 'my.html'];
var subpage_style = {
top: '45px',
bottom: '51px'
};
var aniShow = {
};
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for (var i = 0; i < 4; i++) {
var temp = {
};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
}
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[0];
var title = document.getElementById("title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
//若为iOS平台或非首次显示，则直接显示
if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab);
}else{
//否则，使用fade-in动画，且保存变量
var temp = {
};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",300);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
//自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(defaultTab, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
document.addEventListener('goprolist', function() {
var prolist = document.getElementById("prolist");
//模拟首页点击
mui.trigger(prolist, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (prolist !== current) {
current.classList.remove('mui-active');
prolist.classList.add('mui-active');
}
});
document.addEventListener('gocar', function() {
var car = document.getElementById("car");
mui.trigger(car, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (car !== current) {
current.classList.remove('mui-active');
car.classList.add('mui-active');
}
});
</script>
</body>
</html>
六、忘记密码
添加登录页面的点击事件
forgotpassword.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" />
<style type="text/css">
#mui-title{
position: absolute;
}
.dm-btn2{
display: block;
width:calc(100% - 20px);
height:40px;
margin-left: 10px;
margin-top: 10px;
color: white;
background-color: darkblue
}
</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" id="tbtruename" placeholder="真实姓名"/>
</div>
<div class="mui-input-row">
<label>电话:</label>
<input type="text" class="mui-input-clear" id="tbtel" placeholder="电话"/>
</div>
<div class="mui-content">
<div class="mui-input-row">
<label>新密码</label>
<input type="password" class="mui-input-clear" id="tbpassword" placeholder="新密码"/>
</div>
<div class="mui-content">
<div class="mui-input-row">
<label>确认新密码</label>
<input type="password" class="mui-input-clear" id="tbpassword2" placeholder="确认新密码"/>
</div>
</form>
<button type="button" class="dm-btn2" id="btnforget">确定</button>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
document.getElementById("btnforget").addEventListener("tap",function(){
var truename=document.getElementById("tbtruename").value;
var tel=document.getElementById("tbtel").value;
var pass1=document.getElementById("tbpassword").value;
var pass2=document.getElementById("tbpassword2").value;
if(pass1==pass2)
{
var requrl=localStorage.getItem("requrl");
mui.ajax(requrl,{
data:{
rnum:"13",
tel:tel,
truename:truename,
password:pass1
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
'Content-Type':'application/x-www-form-urlencoded'},
success:function(data){
mui.toast(data.msg);
}
});
}
else
{
mui.toast("两次密码不一致");
}
});
</script>
</body>
</html>
**后端 **
数据库
java后端
protected void getForgetPassword(HttpServletRequest request, HttpServletResponse response) throws IOException
{
String truename=request.getParameter("truename");
String tel=request.getParameter("tel");
String password=request.getParameter("password");
String strSql="select * from tbmember where truename=? and tel=? ";
List<Object> params = new ArrayList<Object>();
params.add(truename);
params.add(tel);
DBHelper Dal=new DBHelper();
//定义userlist为null
List<Map<String, Object>> userlist = null;
//执行sql语句，把数据库的数据传给userlist
try {
userlist=Dal.executeQuery(strSql, params);
} catch (SQLException e) {
//打印数据
e.printStackTrace();
}
String res="";
if (userlist.size()>0){
//改密码
String strSql2 = " update tbmember set password=? where truename=? and tel=?";
List<Object> params2 = new ArrayList<Object>();
params2.add(password);
params2.add(truename);
params2.add(tel);
Dal.excuteSql(strSql2, params2);
res = "{\"msg\":\"密码修改成功!\"}";
}
else{
res = "{\"msg\":\"用户名和电话号码不匹配，不允许修改密码!\"}";
}
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(res);
}
七、完善登录页面
<!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" />
<style type="text/css">
.mui-content-padded {
margin-top: 25px;
}
.mui-input-group {
margin-top: 15px;
}
.mui-input-row{
height: 30px;
}
.link-area {
display: block;
margin-top: 25px;
text-align: center;
}
.spliter {
color: #bbb;
padding: 0px 8px;
}
</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" id="tbnusername" class="mui-input-clear" value="杰子" placeholder="用户名">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="text" id="tbnpassword" class="mui-input-clear" value="123" placeholder="密码">
</div>
</form>
<div class="mui-content-padded">
<button id='btnlogin' class="mui-btn-block" style="background-color: pink; opacity: 0.8;">登录</button>
<div class="link-area">
<a id='btnreg'>注册账号</a> <span class="spliter">|</span>
<a id='btnforget'>忘记密码</a>
</div>
<div class="mui-content-padded oauth-area">
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
document.getElementById("btnreg").addEventListener("tap", function() {
console.log(11);
mui.openWindow({
url: "reg.html",
id: "reg.html"
});
});
document.getElementById("btnforget").addEventListener("tap", function() {
console.log(123);
mui.openWindow({
url: "forgetpassword.html",
id: "forgetpassword.html"
});
});
document.getElementById("btnlogin").addEventListener("tap", function() {
var vusername = document.getElementById("tbnusername").value;
var vpassword = document.getElementById("tbnpassword").value;
var requrl = "http://192.168.43.242:8080/SweetyManage/JavaApi";
localStorage.setItem("requrl", requrl);
mui.ajax(requrl, {
data: {
rnum: "2",
username: vusername,
password: vpassword
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
'Content-Type': 'application/x-www-form-urlencoded' },
success: function(data) {
console.log(JSON.stringify(data));
if(data == null || data == "") {
mui.toast("用户名或者密码错误!");
} else {
console.log(data[0]);
mui.toast("登录成功!");
localStorage.setItem("id", data[0].id);
localStorage.setItem("truename", data[0].truename);
localStorage.setItem("tel", data[0].tel);
localStorage.setItem("address", data[0].address);
//登录成功之后就把当前人的信息保存在localStorage中
mui.openWindow({
url: "main.html",
id: "main.html"
});
}
}
});
});
</script>
</body>
</html>
八、导航
去hello mui中去找到guide.html，复制粘贴到自己的项目中
记得更改css和js路径（改成适应你的项目的路径）
最好把它的图片也放进自己的Img中
我更改后的guide.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<style>
#close {
position: absolute;
width: 160px;
left: 50%;
margin-left: -80px;
bottom: 15%;
padding: 10px;
color: #fff;
border-color: #fff;
}
.item-logo {
width: 100%;
height: 100%;
position: relative;
}
.item-logo a {
width: 200px;
height: 200px;
display: block;
border: 1px solid #FFFFFF;
border-color: rgba(255, 255, 255, 0.5);
text-align: center;
line-height: 200px;
border-radius: 50%;
font-size: 40px;
color: #fff;
position: absolute;
top: 15%;
left: 50%;
margin-left: -100px;
}
.animate {
position: absolute;
left: 0;
bottom: 15%;
width: 100%;
color: #fff;
display: -moz-box;
}
.animate h2 {
text-align: center;
margin-bottom: 20px;
}
.animate li {
width: 50%;
height: 30px;
line-height: 30px;
list-style: none;
font-size: 16px;
text-align: right;
}
.animate li:nth-child(3) {
text-align: left;
float: right;
}
.animated {
-webkit-animation-duration: 1s;
-webkit-animation-play-state: paused;
-webkit-animation-fill-mode: both;
}
.guide-show .bounceInDown {
-webkit-animation-name: bounceInDown;
-webkit-animation-play-state: running;
-webkit-animation-delay: 1s;
display: block;
}
.guide-show .bounceInLeft {
-webkit-animation-name: bounceInLeft;
display: block;
-webkit-animation-play-state: running;
}
.guide-show .bounceInRight {
-webkit-animation-name: bounceInRight;
display: block;
-webkit-animation-play-state: running;
-webkit-animation-delay: 0.5s;
}
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
90% {
-webkit-transform: translate3d(0, 3px, 0);
transform: translate3d(0, 3px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
</style>
</head>
<body>
<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
<div class="mui-slider-group">
<!-- 第一张 -->
<div class="mui-slider-item">
<div class="item-logo" style="background-color: pink">
<a href="#">
Sweety
</a>
<div class="animate guide-show">
<h2 class="animated bounceInDown">色香味俱全</h2>
<li class="animated bounceInLeft">哒哒哒</li>
<li class="animated bounceInRight">超级无敌可爱鸭</li>
</div>
</div>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<div class="item-logo" style="background-color: plum;">
<a href="https://blog.csdn.net/hanhanwanghaha">
点击此处
</a>
<div id="tips-2" class="animate mui-hidden">
<h2 class="animated bounceInDown">甜甜在线</h2>
<li class="animated bounceInLeft">点击圆框框</li>
<li class="animated bounceInRight">主人在线解答</li>
</div>
</div>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<div class="item-logo" style="background-color: lightpink;">
<a href="#">
甜甜商城
</a>
<div class="animate">
<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
</div>
</div>
</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>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.back = function() {
};
mui.plusReady(function() {
if(mui.os.ios){
plus.navigator.setFullscreen(true);
}
plus.navigator.closeSplashscreen();
});
//立即体验按钮点击事件
document.getElementById("close").addEventListener('tap', function(event) {
plus.storage.setItem("lauchFlag", "true");
plus.navigator.setFullscreen(false);
plus.webview.currentWebview().close();
}, false);
//图片切换时，触发动画
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的；
var index = event.detail.slideNumber+1;
if(index==2||index==3){
var item = document.getElementById("tips-"+index);
if(item.classList.contains("mui-hidden")){
item.classList.remove("mui-hidden");
item.classList.add("guide-show");
}
}
});
</script>
</body>
</html>
https://blog.csdn.net/hanhanwanghaha 我是一个超级无敌可爱的人鸭，欢迎关注，有什么问题留言私信皆可，看见必回！
创作不易，如有转载，请注明出处