https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
如有轉載，請注明出處（如不注明，盜者必究）
開頭先分享個有趣的哈哈哈 承包了我一天的快樂秧 點擊此處給你帶來快樂
獨樂樂不如眾樂樂哈哈哈哈
我真的很不錯耶耶耶，你也真的很不錯耶耶耶。要做就要做最好的，不要等到明天再說真的可惜，我知道我能做到的就是不停不停不停不停不停不停的努力。哈哈哈哈哈哈哈哈哈哈哈哈
對了，前兩天有粉絲私聊我，問我為什么運行出來前端沒有圖，這是由于我們是通過JS到后端去拿的，都沒有連接后端的話就肯定看不到鴨！
這是前面幾部分的內容嘿嘿嘿
第一部分
第二部分
第三部分
第四部分
第五部分
目錄
- 一、反饋意見
- 1.1如何實現點擊反饋意見，跳轉到feedback.html頁面？
- 1.2著手feedback頁面
- 二、首頁輪播的點擊事件
- 三、完善關于我們
- 四、增加聯系我們版塊
- 五、換我的底部選項卡圖標
- 六、忘記密碼
- 七、完善登錄頁面
- 八、導航
一、反饋意見
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'}});
})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>
這樣這個點擊事件就實現了。
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=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>
連接后端
數據庫：
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.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>確認新密碼
</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',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>
**后端 **
數據庫
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>
八、導航
去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) {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 我是一個超級無敵可愛的人鴨，歡迎關注，有什么問題留言私信皆可，看見必回！
創作不易，如有轉載，請注明出處
總結
以上是生活随笔為你收集整理的连接真机开发安卓(Android)移动app MUI框架 反馈意见、忘记密码、登录、底部选项卡、联系我们、导航等页面代码可拿——混合式开发（六）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
