https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關(guān)注！
歡迎關(guān)注微信公眾號：寶藏女孩的成長日記
如有轉(zhuǎn)載，請注明出處（如不注明，盜者必究）
開頭先分享個有趣的哈哈哈 承包了我一天的快樂秧 點擊此處給你帶來快樂
獨樂樂不如眾樂樂哈哈哈哈
我真的很不錯耶耶耶，你也真的很不錯耶耶耶。要做就要做最好的，不要等到明天再說真的可惜，我知道我能做到的就是不停不停不停不停不停不停的努力。哈哈哈哈哈哈哈哈哈哈哈哈
對了，前兩天有粉絲私聊我，問我為什么運行出來前端沒有圖，這是由于我們是通過JS到后端去拿的，都沒有連接后端的話就肯定看不到鴨！
這是前面幾部分的內(nèi)容嘿嘿嘿
第一部分
第二部分
第三部分
第四部分
第五部分
目錄
- 一、反饋意見
- 1.1如何實現(xiàn)點擊反饋意見，跳轉(zhuǎn)到feedback.html頁面？
- 1.2著手feedback頁面
- 二、首頁輪播的點擊事件
- 三、完善關(guān)于我們
- 四、增加聯(lián)系我們版塊
- 五、換我的底部選項卡圖標(biāo)
- 六、忘記密碼
- 七、完善登錄頁面
- 八、導(dǎo)航
一、反饋意見
1.1如何實現(xiàn)點擊反饋意見，跳轉(zhuǎn)到feedback.html頁面？
首先去到my.html，首先設(shè)置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">關(guān)于我們
</a></li><li class="mui-table-view-cell" id="btnlogout"><a class="mui-navigate-right">退出系統(tǒng)
</a></li><li class="mui-table-view-cell" id="btncontactus"><a class="mui-navigate-right">聯(lián)系我們
</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'}});
})document.getElementById("btncontactus").addEventListener("tap",function(){var webview = mui.openWindow({url:'contactus.html',extras:{name:'wangtiantian' , time:'2020-12-5'}});
})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>
這樣這個點擊事件就實現(xiàn)了。
1.2著手feedback頁面
新建一個HelloMUI項目,在example里面找到feedback的頁面，復(fù)制進(jìn)來
從代碼中我們可以看到feedback的樣式?jīng)]有拿過來，在新建的HelloMUI項目里面找到feedback.html，直接復(fù)制粘貼到自己的項目中
記得改下 下面的路徑哈哈哈
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="#">桌面快捷方式創(chuàng)建失敗
</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="請詳細(xì)描述你的問題和意見..."></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="(選填,方便我們聯(lián)系你 )" /></div><form class="mui-input-group"><button type="button" class="dm-btn" id="send">發(fā)送
</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=localStorage.getItem("requrl");console.log(vquestion);console.log(vtbqqoremail);mui.ajax(requrl,{data:{rnum:"12",question:vquestion,qqoremail:vtbqqoremail,},dataType:'json',type:'post',timeout:10000,headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){mui.toast("反饋成功!");
}});});</script></body></html>
連接后端
數(shù)據(jù)庫：
java函數(shù)
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>
三、完善關(guān)于我們
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">關(guān)于我們
</h1
></header
><div
class="mui-content"><div
class="mui-content"><h3 style
="text-align: center;">甜甜屋app簡介
</h3
> 
; 
; 
; 
; 
; 
;甜甜屋商城是一款購蛋糕的app隨著互聯(lián)網(wǎng)時代的到來，蛋糕的線上營銷出現(xiàn)了——甜甜屋商城是一項基于實體店的服務(wù)型商城。它可以實時更新每日的特色蛋糕，它的主要工作是推出當(dāng)天的時鮮蛋糕，用戶可以實時預(yù)定，并且蛋糕可以準(zhǔn)時送貨上門，最大限度地提高用戶的體驗感。
<h3 style
="text-align: center;">版權(quán)聲明
</h3
><h5
>總則
</h5
> 
; 
; 
; 
; 
; 
;用戶在接受甜甜屋服務(wù)之前，請務(wù)必仔細(xì)閱讀本條款并同意本聲明。用戶直接或通過各類方式（如站外API引用等）間接使用甜甜網(wǎng)服務(wù)和數(shù)據(jù)的行為，都將被視作已無條件接受本聲明所涉全部內(nèi)容；若用戶對本聲明的任何條款有異議，請停止使用甜甜網(wǎng)所提供的全部服務(wù)。
<br
>聲明內(nèi)容
<br
> 
; 
; 
; 
; 
; 
;1、用戶發(fā)表在的原創(chuàng)文章、評論、圖片等內(nèi)容的版權(quán)均歸用戶本人所有。
<br
> 
; 
; 
; 
; 
; 
;2、用戶從或其他網(wǎng)站通過轉(zhuǎn)載、復(fù)制、截圖等方式獲取他人內(nèi)容，并發(fā)布在的，相關(guān)內(nèi)容的版權(quán)屬于原作者。用戶不得侵犯他人包括版權(quán)在內(nèi)的知識產(chǎn)權(quán)及其他權(quán)利。因用戶發(fā)布他人作品引發(fā)知識產(chǎn)權(quán)或其他法律糾紛的，用戶須自行承擔(dān)一切后果，與無關(guān)。
<br
> 
; 
; 
; 
; 
; 
;3、提供的網(wǎng)絡(luò)服務(wù)中包含的標(biāo)識、版面設(shè)計、排版方式、文本、圖片、圖形等均受版權(quán)、商標(biāo)及其它法律保護，未經(jīng)相關(guān)權(quán)利人（含甜甜網(wǎng)及其他原始權(quán)利人）同意，上述內(nèi)容均不得在任何平臺被直接或間接發(fā)布、使用、出于發(fā)布或使用目的的改寫或再發(fā)行，或被用于其他任何商業(yè)目的。
<br
> 
; 
; 
; 
; 
; 
;4、有權(quán)但無義務(wù)對用戶發(fā)布的內(nèi)容進(jìn)行審核，并有權(quán)根據(jù)相關(guān)證據(jù)結(jié)合《侵權(quán)責(zé)任法》、《信息網(wǎng)絡(luò)傳播權(quán)保護條例》等法律法規(guī)及豆瓣社區(qū)指導(dǎo)原則對侵權(quán)信息進(jìn)行處理。
<br
> 
; 
; 
; 
; 
; 
;5、尊重權(quán)利人的知識產(chǎn)權(quán)和合法權(quán)益。若權(quán)利人認(rèn)為甜甜網(wǎng)用戶上傳的內(nèi)容侵犯自身版權(quán)或其他合法權(quán)益，可依法向甜甜網(wǎng)幫助郵箱（ ）發(fā)出書面申請。甜甜網(wǎng)在書面審核相關(guān)齊備材料后，有權(quán)在不事先通知相應(yīng)發(fā)布用戶的情況下自行刪除相關(guān)內(nèi)容，并依法保留相關(guān)數(shù)據(jù)。在甜甜網(wǎng)發(fā)布內(nèi)容，即視為用戶同意甜甜網(wǎng)就前述情況所采取的相應(yīng)措施，甜甜網(wǎng)不因此而承擔(dān)任何違約、侵權(quán)或其他法律責(zé)任。
<br
> 
; 
; 
; 
; 
; 
;6、甜甜網(wǎng)根據(jù)上述第
5條原因刪除相關(guān)內(nèi)容的，相應(yīng)發(fā)布用戶如認(rèn)為投訴不屬實，可依法向甜甜網(wǎng)幫助郵箱（ ）發(fā)出關(guān)于被刪除內(nèi)容不侵犯著作權(quán)的書面反申請。反申請發(fā)出后，甜甜網(wǎng)在書面審核相關(guān)齊備材料后，根據(jù)實際情況依法進(jìn)行處理。
</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
>
四、增加聯(lián)系我們版塊
在my.html增加聯(lián)系我們，并且設(shè)置id
添加綁定事件
新建contactus.html頁面
然后直接在body里面快捷鍵mh 聯(lián)系我們…
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">聯(lián)系我們
</h1></header><div class="mui-content"><div class="mui-content"><p></p><p> 如果我們有什么照顧不周，請您加我們的敲擊無敵大可愛王甜甜的聯(lián)系方式~ 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>
五、換我的底部選項卡圖標(biāo)
注意到我下面那四個圖標(biāo)和名稱對不上了嗎哈哈哈，所以要改嗷嗷嗷嗷
在hello mui（就是直接新建一個移動app項目 直接勾選hello mui就可以了）中有各種各樣的圖標(biāo)可以選擇哦，找到圖標(biāo)的那個模板找就是的了，有句話說得特別好，占在巨人的肩膀上看得更遠(yuǎn)，別人已經(jīng)寫好的東西，我們直接拿來用就可以了，當(dāng)然如果你賊6想自己寫的話那也非常nice哈哈哈哈。
我的原頁面是這樣的
去hello mui模板下去找，哈哈哈，覺得哪個合適用哪個
記得把hello mui的css 、js、還有字體拿到自己項目中去，
還有就是改路徑，比如放進(jìn)我的項目就應(yīng)該改為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.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;if(mui.os.ios||aniShow[targetTab]){plus.webview.show(targetTab);}else{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>確認(rèn)新密碼
</label><input type="password" class="mui-input-clear" id="tbpassword2" placeholder="確認(rèn)新密碼"/></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',type:'post',timeout:10000,headers:{'Content-Type':'application/x-www-form-urlencoded'},success:function(data){mui.toast(data.msg);}});}else{mui.toast("兩次密碼不一致");}});</script></body></html>
**后端 **
數(shù)據(jù)庫
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();List
<Map
<String, Object>> userlist
= null
;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', type: 'post', timeout: 10000, 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);mui.openWindow({url: "main.html",id: "main.html"});}}});});</script></body></html>
八、導(dǎo)航
去hello mui中去找到guide.html，復(fù)制粘貼到自己的項目中
記得更改css和js路徑（改成適應(yīng)你的項目的路徑）
最好把它的圖片也放進(jìn)自己的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) {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 我是一個超級無敵可愛的人鴨，歡迎關(guān)注，有什么問題留言私信皆可，看見必回！
創(chuàng)作不易，如有轉(zhuǎn)載，請注明出處
總結(jié)
以上是生活随笔為你收集整理的连接真机开发安卓(Android)移动app MUI框架 反馈意见、忘记密码、登录、底部选项卡、联系我们、导航等页面代码可拿——混合式开发（六）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
