https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

开头先分享个有趣的哈哈哈承包了我一天的快乐秧点击此处给你带来快乐
独乐乐不如众乐乐哈哈哈哈
在这里插入图片描述
我真的很不错耶耶耶，你也真的很不错耶耶耶。要做就要做最好的，不要等到明天再说真的可惜，我知道我能做到的就是不停不停不停不停不停不停的努力。哈哈哈哈哈哈哈哈哈哈哈哈

对了，前两天有粉丝私聊我，问我为什么运行出来前端没有图，这是由于我们是通过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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;甜甜屋商城是一款购蛋糕的app随着互联网时代的到来，蛋糕的线上营销出现了——甜甜屋商城是一项基于实体店的服务型商城。它可以实时更新每日的特色蛋糕，它的主要工作是推出当天的时鲜蛋糕，用户可以实时预定，并且蛋糕可以准时送货上门，最大限度地提高用户的体验感。<h3 style="text-align: center;">版权声明</h3><h5>总则</h5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户在接受甜甜屋服务之前，请务必仔细阅读本条款并同意本声明。用户直接或通过各类方式（如站外API引用等）间接使用甜甜网服务和数据的行为，都将被视作已无条件接受本声明所涉全部内容；若用户对本声明的任何条款有异议，请停止使用甜甜网所提供的全部服务。<br>声明内容<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、用户发表在的原创文章、评论、图片等内容的版权均归用户本人所有。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、用户从或其他网站通过转载、复制、截图等方式获取他人内容，并发布在的，相关内容的版权属于原作者。用户不得侵犯他人包括版权在内的知识产权及其他权利。因用户发布他人作品引发知识产权或其他法律纠纷的，用户须自行承担一切后果，与无关。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、提供的网络服务中包含的标识、版面设计、排版方式、文本、图片、图形等均受版权、商标及其它法律保护，未经相关权利人（含甜甜网及其他原始权利人）同意，上述内容均不得在任何平台被直接或间接发布、使用、出于发布或使用目的的改写或再发行，或被用于其他任何商业目的。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4、有权但无义务对用户发布的内容进行审核，并有权根据相关证据结合《侵权责任法》、《信息网络传播权保护条例》等法律法规及豆瓣社区指导原则对侵权信息进行处理。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5、尊重权利人的知识产权和合法权益。若权利人认为甜甜网用户上传的内容侵犯自身版权或其他合法权益，可依法向甜甜网帮助邮箱（ ）发出书面申请。甜甜网在书面审核相关齐备材料后，有权在不事先通知相应发布用户的情况下自行删除相关内容，并依法保留相关数据。在甜甜网发布内容，即视为用户同意甜甜网就前述情况所采取的相应措施，甜甜网不因此而承担任何违约、侵权或其他法律责任。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果我们有什么照顾不周，请您加我们的敲击无敌大可爱王甜甜的联系方式~ 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为nullList<Map<String, Object>> userlist = null;//执行sql语句，把数据库的数据传给userlisttry {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>