移動應(yīng)用項目開發(fā)實戰(zhàn) 課件 任務(wù)二（設(shè)計登錄界面）_第1頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件 任務(wù)二（設(shè)計登錄界面）_第2頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件 任務(wù)二（設(shè)計登錄界面）_第3頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件 任務(wù)二（設(shè)計登錄界面）_第4頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件 任務(wù)二（設(shè)計登錄界面）_第5頁
已閱讀5頁，還剩34頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

《移動應(yīng)用與開發(fā)項目實戰(zhàn)》任務(wù)二

設(shè)計登錄界面【任務(wù)描述】1實現(xiàn)時代楷模登錄模塊功能：打開App首先進(jìn)入登錄頁面，頁面上方顯示用戶名和密碼輸入框，輸入框下方顯示登錄按鈕和隱私協(xié)議復(fù)選框。要求點擊登錄按鈕進(jìn)行登錄操作，如果登錄成功則跳轉(zhuǎn)至App主頁面，如果登錄不成功，用消息框顯示登錄失敗的原因。要求1創(chuàng)建項目【關(guān)鍵技術(shù)描述】2認(rèn)識&規(guī)劃項目結(jié)構(gòu)3認(rèn)識并使用MUI組件4事件的綁定5mui.ajax()方式的接口調(diào)用【關(guān)鍵技術(shù)描述】6mui.openWindow()方式的頁面跳轉(zhuǎn)7js計時器setInterval()的使用進(jìn)階8頁面間自定義事件的定義及監(jiān)聽進(jìn)階【制作步驟】項目準(zhǔn)備使用HBuilderX導(dǎo)入初始框架DigitalLife項目。注：為了和比賽環(huán)境保持一致，故使用HbuilderX工具導(dǎo)入初始框架DigitalLife項目1項目的導(dǎo)入在項目根目錄下新建HTML文件。2新建HTML文件【制作步驟】項目準(zhǔn)備輸入文件名稱、選擇新建html文件模板。3選擇html文件模板【制作步驟】認(rèn)識&規(guī)劃項目結(jié)構(gòu)創(chuàng)建完成項目后，我們會得到項目的目錄結(jié)構(gòu)。為了讓項目層次更加清晰明了及增加代碼的可維護(hù)性，我們需要合理規(guī)劃各類文件的存放位置，并在必要時，創(chuàng)建新的目錄結(jié)構(gòu)。首先，讓我們認(rèn)識一下項目導(dǎo)入之初，目錄結(jié)構(gòu)：1)css文件夾：專門用于存放樣式類文件，我們可在該文件夾下創(chuàng)建common.css，用于本項目中通用樣式的編寫。2)js文件夾：專門用于存放需要引用的外部js文件，為我們可在該文件夾下創(chuàng)建common.js，用于本項目中通用js的編寫。3)fonts文件夾：存放MUI圖標(biāo)庫字體文件。4)images文件夾：存放靜態(tài)圖片文件。5)index.html文件：該文件為項目工程初始化后創(chuàng)建的空頁面，也是整個項目的啟動文件，后續(xù)我們會對其進(jìn)行移動和修改。6)manifest.json文件：該文件為項目信息的配置文件，后續(xù)我們會對其內(nèi)部屬性進(jìn)行修改。在認(rèn)識了目錄結(jié)構(gòu)后，我們可以根據(jù)自己的項目需要，重新規(guī)劃并創(chuàng)建文件夾，例如：1)創(chuàng)建pages文件夾：用于存放各個模塊的業(yè)務(wù)代碼1【制作步驟】認(rèn)識并使用MUI組件通過讀題可以確定，在制作login頁面時，我們會涉及以下畫面元素：1)用戶名輸入框2)密碼輸入框3)隱私保護(hù)政策復(fù)選框4)登錄按鈕將以上畫面元素對照MUI提供的官方文檔進(jìn)行對照，不難發(fā)現(xiàn)：1)用戶名輸入框及密碼輸入框可以使用MUI提供的input(表單)實現(xiàn)。(/mui/ui/#input）2)隱私保護(hù)政策復(fù)選框可以使用MUI提供的checkbox（復(fù)選框）實現(xiàn)。

（/mui/ui/#checkbox）3)登錄按鈕可以使用MUI提供的button（按鈕）實現(xiàn)。

（/mui/ui/#buttons）1【制作步驟】認(rèn)識并使用MUI組件認(rèn)識了以上各控件后，我們需要將其整合，并應(yīng)用至login.html文件中。在正式編寫代碼之前，讓我們完成一些基礎(chǔ)工作：4)在<head></head>標(biāo)簽中定義畫面分辨率，引用通用css文件及圖標(biāo)文件。2head><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><linkhref="./css/mui.min.css"rel="stylesheet"/><linkhref="./css/common.css"rel="stylesheet"/><linkhref="./css/icons-extra.css"rel="stylesheet"/></head>5)在<body></body>標(biāo)簽中引用mui.js（MUI封裝的JavaScript文件）和jquery.min.js（JQuery封裝文件）文件。<body><!--引入JS文件--><scriptsrc="./js/mui.min.js"></script><scriptsrc="./js/jquery.min.js"></script></body>【制作步驟】認(rèn)識并使用MUI組件讓我們完成一些基礎(chǔ)工作：6)在<body></body>標(biāo)簽中加入<header></header>標(biāo)簽，用于顯示界面頂部狀態(tài)欄。2<body><!--加入頭信息--><headerclass="mui-barmui-bar-nav"style="background-color:white;"><h1class="mui-title">登錄</h1></header><!--引入JS文件--><scriptsrc="./js/mui.min.js"></script><scriptsrc="./js/jquery.min.js"></script></body>界面頂部導(dǎo)航欄7)在<body></body>標(biāo)簽中加入MUI內(nèi)容區(qū)域。<body><headerclass="mui-barmui-bar-nav"style="background-color:white;"><h1class="mui-title">登錄</h1></header><divclass="mui-content"></div><scriptsrc="./js/mui.min.js"></script><scriptsrc="./js/jquery.min.js"></script></body>>【制作步驟】認(rèn)識并使用MUI組件讓我們完成一些基礎(chǔ)工作：8)在<body></body>標(biāo)簽MUI內(nèi)容區(qū)域中加入MUI組件和<img/>圖片。加入用戶名輸入框。2<body><headerclass="mui-barmui-bar-nav"style="background-color:white;"> <h1class="mui-title">登錄</h1></header><!--MUI內(nèi)容區(qū)域--><divclass="mui-content"><!--加入用戶名輸入框--><divclass="mui-input-row"style="border-bottom:1pxsolid#ccc;"><label><imgsrc="./images/username.png"style="width:14px;height:14px;"></label><inputtype="text"id="username"class="mui-input-clear"placeholder="用戶名/手機(jī)號"/></div></div><!--引入JS文件--><scriptsrc="./js/mui.min.js"></script><scriptsrc="./js/jquery.min.js"></script></body>【制作步驟】認(rèn)識并使用MUI組件2界面用戶名輸入框mui-input-row”為一個輸入?yún)^(qū)域，根據(jù)樣例圖，每個輸入?yún)^(qū)域之間有一條橫線，在此，可以通過設(shè)置下邊框（border-bottom)像素實現(xiàn)有無輸入框下方橫線。<label></label>標(biāo)簽為輸入框左側(cè)區(qū)域，通過引用圖片顯示用戶名圖標(biāo)。<input/>標(biāo)簽為輸入框主體，添加“mui-input-clear”的class類（MUI框架封裝的樣式類），可以使輸入框具備添加刪除功能。<input/>標(biāo)簽的“placeholder”屬性顯示在輸入框默認(rèn)提示文本。給<input/>標(biāo)簽添加“id”屬性，為后續(xù)獲取該輸入框內(nèi)輸入的值做準(zhǔn)備。說明【制作步驟】認(rèn)識并使用MUI組件在<body></body>標(biāo)簽中引用<header></header>標(biāo)簽，用于顯示界面頂部狀態(tài)欄。3<!DOCTYPEhtml><html> ...<body><!--加入頭信息--><headerclass="mui-barmui-bar-nav"style="background-color:white;"><!--頂部標(biāo)題欄返回箭頭--><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><h1class="mui-title">首頁</h1></header><!--引入MUI封裝的JavaScript文件--><scriptsrc="../../js/mui.min.js"></script>...</body></html>

界面頂部導(dǎo)航欄【制作步驟】認(rèn)識并使用MUI組件加入密碼輸入框：4<body><headerclass="mui-barmui-bar-nav"style="background-color:white;"> <h1class="mui-title">登錄</h1></header></div><divclass="mui-content"><divclass="mui-input-row"style="border-bottom:1pxsolid#ccc;"><label><imgsrc="./images/username.png"style="width:14px;height:14px;"></label><inputtype="text"id="username"class="mui-input-clear"placeholder="用戶名/手機(jī)號"/></div><!--加入密碼輸入框--><divclass="mui-input-row"style="border-bottom:1pxsolid#ccc;"><label><imgsrc="./images/password.png"style="width:14px;height:14px;"></label><inputtype="password"id="password"class="mui-input-password"placeholder="請輸入密碼"/></div></div><scriptsrc="./js/mui.min.js"></script><scriptsrc="./js/jquery.min.js"></script></body>界面密碼輸入框<input/>標(biāo)簽的“type”屬性設(shè)置為“password”時，可使輸入框變?yōu)槊艽a輸入框，輸入內(nèi)容時，顯示***。說明【制作步驟】認(rèn)識并使用MUI組件加入用戶隱私政策復(fù)選框5<body><headerclass="mui-barmui-bar-nav"style="background-color:white;"> <h1class="mui-title">登錄</h1></header></div><divclass="mui-content"><divclass="mui-input-row"style="border-bottom:1pxsolid#ccc;"><label><imgsrc="./images/username.png"style="width:14px;height:14px;"></label><inputtype="text"id="username"class="mui-input-clear"placeholder="用戶名/手機(jī)號"/></div><divclass="mui-input-row"style="border-bottom:1pxsolid#ccc;"><label><imgsrc="./images/password.png"style="width:14px;height:14px;"></label><inputtype="password"id="password"class="mui-input-password"placeholder="請輸入密碼"/></div></div><divstyle="display:flex;"class="small-text"><inputtype="checkbox"id="isRead"><div>我已閱讀并同意</div><divstyle="color:#CF2D28;">《用戶隱私政策》</div></div><scriptsrc="./js/mui.min.js"></script><scriptsrc="./js/jquery.min.js"></script></body>用戶隱私政策復(fù)選框<input/>標(biāo)簽的“type”屬性設(shè)置為“checkbox”時，可使輸入框變?yōu)閺?fù)選框。根據(jù)樣例圖“用戶隱私政策”文字顯示紅色，可使用span標(biāo)簽給對應(yīng)內(nèi)容設(shè)置獨立樣式。說明【制作步驟】認(rèn)識并使用MUI組件加入登錄按鈕框6<body><divclass="mui-input-row"style="border-bottom:1pxsolid#ccc;"><label><imgsrc="./images/username.png"style="width:14px;height:14px;"></label><inputtype="text"id="username"class="mui-input-clear"placeholder="用戶名/手機(jī)號"/></div><divclass="mui-input-row"style="border-bottom:1pxsolid#ccc;"><label><imgsrc="./images/password.png"style="width:14px;height:14px;"></label><inputtype="password"id="password"class="mui-input-password"placeholder="請輸入密碼"/></div><divstyle="display:flex;"class="small-text"> <inputtype="checkbox"id="isRead"> <div>我已閱讀并同意</div> <divstyle="color:#CF2D28;">《用戶隱私政策》</div></div><divclass="mui-button-row"><buttontype="button"class="mui-btn-danger"style="width:100%;">登錄</button></div><!--引入JS文件--><scriptsrc="./js/mui.min.js"></script><scriptsrc="./js/jquery.min.js"></script></body>根據(jù)樣例圖，按鈕顯示整行，故設(shè)置style="width:100%;"的樣式屬性。說明至此，頁面控件繪制完成，通過瀏覽器打開login.html，可看到如下頁面登錄頁-控件繪制【制作步驟】事件的綁定繪制完成頁面后，我們需要為頁面對應(yīng)的控件綁定運(yùn)行事件，以實現(xiàn)對應(yīng)的功能。在題目要求中，點擊【登錄】按鈕后需要進(jìn)行登錄操作，故此，我們需要為【登錄】按鈕綁定點擊事件。Javascript的點擊事件綁定可以通過多種方式實現(xiàn)，如事件源.onclick，addEventListener等，在這個例子中，我們通過在html的dom中直接綁定onclick事件的形式來實現(xiàn)，以最大限度節(jié)約代碼量1<body>…<!--加入登錄按鈕--><divclass="mui-button-row"><buttontype="button"onclick="login()"class="mui-btnmui-btn-danger"style="width:100%;">登錄</button></div>…</body><body>…<!--加入點擊登錄事件--><scripttype="text/javascript">mui.init()functionlogin(){console.log("點擊登錄按鈕")}</script>…</body>給<button/>標(biāo)簽加入onclick事件；加入<scripttype="text/javascript"><script>標(biāo)簽在<scripttype="text/javascript"><script>標(biāo)簽中，加入定義的方法login()，觸發(fā)方法后控制臺輸出文字。說明【制作步驟】事件的綁定在頁面端點擊登錄按鈕，可在瀏覽器控制臺（F12→控制臺）中看到輸出的文字“點擊登錄按鈕”。1點擊登錄按鈕【制作步驟】接口的調(diào)用接口調(diào)用是程序開發(fā)中發(fā)送/獲取后臺數(shù)據(jù)的重要途徑，其步驟包括：閱讀接口文檔、調(diào)用接口、回調(diào)函數(shù)3個關(guān)鍵組成。閱讀接口文檔1)首先，我們需要找到本業(yè)務(wù)對應(yīng)的接口。2)其次，我們需要獲取接口的關(guān)鍵內(nèi)容，即：

請求地址：/app/login

請求方式：post

請求數(shù)據(jù)類型：application/json

請求參數(shù)：username、password

響應(yīng)參數(shù)：code、msg、token1登錄模塊接口【制作步驟】接口的調(diào)用1在接口調(diào)用時，應(yīng)當(dāng)在請求地址URL前加入服務(wù)器地址。響應(yīng)參數(shù)中的code（狀態(tài)碼）定義了服務(wù)器對于客戶端請求的響應(yīng)狀態(tài)，其中200表示請求成功；201表示請求已成功處理且服務(wù)器已在其響應(yīng)中創(chuàng)建了一個或多個新資源；401表示請求沒有訪問權(quán)限，訪問被拒絕；403通常由于權(quán)限不足或權(quán)限設(shè)置不當(dāng)導(dǎo)致服務(wù)器資源不可用；404通常由于請求地址有誤導(dǎo)致沒有請求到對應(yīng)的資源。token作為用戶登錄后獲取的響應(yīng)參數(shù)，可以理解為服務(wù)器給每個登錄的用戶所發(fā)放的身份令牌，在后續(xù)的服務(wù)器請求中，在需要的場合都應(yīng)當(dāng)攜帶該令牌以證明用戶的合法地位。說明2調(diào)用接口MUI封裝了接口調(diào)用的方法，結(jié)合接口文檔中提供的信息，我們可以通過該方法嘗試向服務(wù)器發(fā)送請求。（/mui/ajax）【制作步驟】接口的調(diào)用12具體方式如下：1)在HBuilderX中鍵入ajax，編輯器會自動關(guān)聯(lián)mui.ajax(),點擊后出現(xiàn)如下代碼：<body>…<scripttype="text/javascript">mui.init()functionlogin(){mui.ajax('',{data:{},dataType:'json',//服務(wù)器返回json格式數(shù)據(jù)type:'post',//HTTP請求類型timeout:10000,//超時時間設(shè)置為10秒；success:function(data){},error:function(xhr,type,errorThrown){}});}</script>…</body>mui.ajax方法中，第一個參數(shù)為請求地址。mui.ajax方法中，第二個參數(shù)用于配置ajax請求參數(shù)，為key/value格式的json對象。請求參數(shù)中，type:'post'對應(yīng)了接口文檔中該接口的請求方式：post，如請求方式為get或其他類型

，需手動修改。請求參數(shù)中，timeout表示如服務(wù)器在規(guī)定時間內(nèi)沒有予以響應(yīng)，則請求中止（單位：毫秒）。請求參數(shù)中，success所定義的方法即為請求成功后的回調(diào)函數(shù)，而error則表示請求失敗后的回調(diào)函數(shù)。說明【制作步驟】接口的調(diào)用122)修改自動關(guān)聯(lián)的代碼，完善請求的發(fā)送過程，其代碼如下：<body>…<scripttype="text/javascript">mui.init()functionlogin(){mui.ajax('5:10091/Neusoft/times-model/app/login',{headers:{'Content-Type':'application/json'},data:{username:document.getElementById("username").value,password:document.getElementById("password").value},dataType:'json',//服務(wù)器返回json格式數(shù)據(jù)type:'post',//HTTP請求類型timeout:10000,//超時時間設(shè)置為10秒；success:function(data){console.log("請求成功");},error:function(xhr,type,errorThrown){console.log("請求失敗");}});}</script>…</body>手動增加請求API地址：例如：5:10091/Neusoft/times-model/app/login’手動添加headers對象：由于接口文檔中定義了該接口請求數(shù)據(jù)類型為'application/json'，因此我們需要在headers中添加對應(yīng)屬性，即：'Content-Type':'application/json'。在data中，我們需要對照接口文檔中請求參數(shù)的定義，添加用戶名與密碼的輸入值，在此，我們通過js的document.getElementById方式找到對應(yīng)的控件，通過其value屬性獲取其輸入的值。在success與error的回調(diào)函數(shù)中，標(biāo)記輸出，便于在控制臺調(diào)試。說明【制作步驟】接口的調(diào)用133)調(diào)試代碼，其具體方式如下：打開瀏覽器控制臺（F12），切換至控制臺選項卡，在頁面的用戶名及密碼輸入框中輸入內(nèi)容，并點擊登錄按鈕，看到控制臺輸出了之前在“success”中定義的輸出內(nèi)容。接口調(diào)用調(diào)試1B.切換至網(wǎng)絡(luò)選項卡，點擊左側(cè)請求名稱，即可在右側(cè)“載荷”選項卡中查看請求參數(shù)，在“預(yù)覽”選項卡中查看響應(yīng)參數(shù)。接口調(diào)用調(diào)試2【制作步驟】接口的調(diào)用12回調(diào)函數(shù)在MUI的ajax請求中，“success”回調(diào)函數(shù)內(nèi)定義的內(nèi)容即為當(dāng)請求成功后，再執(zhí)行的內(nèi)容。由于Http請求是異步執(zhí)行的，因此，只有在回調(diào)函數(shù)中，我們才能獲取到響應(yīng)參數(shù)。注意，當(dāng)輸入錯誤的用戶名或密碼時，并不會進(jìn)入“error”的回調(diào)函數(shù)，由于請求本身執(zhí)行并沒有發(fā)生錯誤，所以不會進(jìn)入“error”回調(diào)函數(shù)內(nèi)，因此，我們需要在“success”的回調(diào)函數(shù)中，通過返回值中的code或是否返回了token參數(shù)來判斷是否登錄成功。其修改的回調(diào)函數(shù)如下：…success:function(data){if(data.code==200){mui.toast('登錄成功');localStorage.setItem('token',data.token);}else{mui.toast(data.msg);}},…通過閱讀接口文檔可以得知，我們可以通過響應(yīng)參數(shù)中的code值，判斷請求是否成功。請求成功時，通過mui.toast在頁面上輸出“登錄成功”，反之，我們將服務(wù)器返回的錯誤信息作為提示內(nèi)容反饋至頁面。由于響應(yīng)參數(shù)中的token作為系統(tǒng)全程都需要使用的用戶身份識別令牌，需要將其永久儲存（持久化）。在此，我們借助localstorage函數(shù)存儲，具體方式為：localStorage.setItem('存儲參數(shù)名',存儲內(nèi)容)。說明【制作步驟】頁面的跳轉(zhuǎn)11調(diào)用接口成功后，如輸入了正確的賬戶名和密碼，根據(jù)題目要求，我們需要將頁面跳轉(zhuǎn)至首頁，MUI框架為我們封裝了頁面跳轉(zhuǎn)的方式。（/mui/window/#openwindow）在pages目錄中，新增home目錄，并在home目錄中index.html頁面作為首頁。新建目錄新建文件【制作步驟】頁面的跳轉(zhuǎn)12在index.html中，引用CSS和JS文件。<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><title></title><linkhref="../css/mui.min.css"rel="stylesheet"/></head><body><scriptsrc="../js/mui.min.js"></script> <scripttype="text/javascript"charset="utf-8">mui.init();</script></body></html>【制作步驟】頁面的跳轉(zhuǎn)12修改login.html內(nèi)的functionlogin()回調(diào)函數(shù)，加入頁面跳轉(zhuǎn)內(nèi)容。<body><scripttype="text/javascript">mui.init()functionlogin(){mui.ajax('5:10091/Neusoft/times-model/app/login',{headers:{'Content-Type':'application/json'},data:{username:document.getElementById("username").value,password:document.getElementById("password").value},dataType:'json',//服務(wù)器返回json格式數(shù)據(jù)type:'post',//HTTP請求類型timeout:10000,//超時時間設(shè)置為10秒；success:function(data){if(data.code==200){mui.toast('登錄成功');localStorage.setItem('token',data.token);setTimeout(()=>{mui.openWindow('./pages/home/index.html');},1000)}else{mui.toast(data.msg)}},error:function(xhr,type,errorThrown){console.log("請求失敗");}});}</script></body>由于需要讓用戶看到“登錄成功”的提示語，通過setTimeout函數(shù)設(shè)置1秒的延遲，在1秒后，跳轉(zhuǎn)至首頁。利用localStorage方法，將接口返回的token至存入客戶端。說明【擴(kuò)展優(yōu)化】增加數(shù)據(jù)校驗12登錄時，隱私保護(hù)政策必須勾選，用戶名及密碼必須填寫，在這2項的前提下，我們才能進(jìn)一步進(jìn)行接口調(diào)用。這樣的邏輯應(yīng)當(dāng)如何實現(xiàn)？修改login.html內(nèi)的functionlogin()回調(diào)functionlogin(){varparams={username:document.getElementById("username").value,password:document.getElementById("password").value}if(!params.username||!params.password){mui.toast("請輸入用戶名和密碼")return;}mui.ajax('5:10091/Neusoft/times-model/app/login',{headers:{'Content-Type':'application/json'},data:params,dataType:'json',//服務(wù)器返回json格式數(shù)據(jù)type:'post',//HTTP請求類型timeout:10000,//超時時間設(shè)置為10秒；success:function(data){if(data.code==200){mui.toast('登錄成功');localStorage.setItem('token',data.token);setTimeout(()=>{mui.openWindow('./pages/home/index.html');},1000)}else{mui.toast(data.msg)}},error:function(xhr,type,errorThrown){console.log("請求失敗");}});}在接口調(diào)用前，我們應(yīng)當(dāng)先完成數(shù)據(jù)校驗，當(dāng)獲取到的輸入內(nèi)容為空時，顯示提示信息，并跳出方法。校驗復(fù)選框是否選中時，我們可通過document.getElementById("isRead").checked屬性進(jìn)行判斷復(fù)選框是否被選中，如果選中，則函數(shù)的返回值為true，如果未選中，則函數(shù)返回值為false，從而驗證其復(fù)選框的狀態(tài)。說明【進(jìn)階提升】完整要求及分析11完整要求打開APP首先進(jìn)入登錄頁面，頁面上方顯示用戶名和密碼輸入框，輸入框下方顯示登錄按鈕和隱私協(xié)議復(fù)選框。點擊隱私協(xié)議復(fù)選框時或者在點擊登錄按鈕時沒有選擇我已同意復(fù)選框的情況下，會彈出用戶隱私政策頁面，在頁面右上角顯示5秒倒計時，倒計時結(jié)束前確認(rèn)按鈕不可點擊，倒計時結(jié)束后可以點擊下面的【確定】按鈕，關(guān)閉彈出框，同時隱私協(xié)議復(fù)選框狀態(tài)變?yōu)橐压催x狀態(tài)，點擊【登錄】按鈕進(jìn)行登錄操作，如果登錄成功則跳轉(zhuǎn)至App主頁面，如果登錄不成功，用消息框顯示登錄失敗的原因。要求分析紅色部分為進(jìn)階內(nèi)容要求，根據(jù)要求可以得出：1)需要新增隱私保護(hù)政策頁面，并添加倒計時功能2)點擊用戶隱私政策或在點擊登錄按鈕時，當(dāng)校驗觸發(fā)隱私保護(hù)政策后，需要進(jìn)入新頁面3)隱私保護(hù)政策頁面確定按鈕需關(guān)聯(lián)登錄頁隱私協(xié)議復(fù)選框勾選狀態(tài)難度：★★★★【進(jìn)階提升】創(chuàng)建用戶隱私政策頁面11在pages目錄內(nèi)創(chuàng)建policy.html文件，并引用CSS和JS文件。<!doctypehtml><html><head><metacharset="utf-8"><title></title><metaname="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><linkhref="../css/mui.min.css"rel="stylesheet"/><linkhref="../css/common.css"rel="stylesheet"/><linkhref="../css/icons-extra.css"rel="stylesheet"/></head><body><divclass="mui-content"></div><scriptsrc="../js/mui.min.js"></script><scripttype="text/javascript">mui.init()</script></body></html>【進(jìn)階提升】創(chuàng)建用戶隱私政策頁面12在<body></body>標(biāo)簽內(nèi)添加標(biāo)題欄<header></header>標(biāo)簽。<body><headerclass="mui-barmui-bar-nav"style="display:flex;align-items:center;"><astyle="color:black;"class="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><h1class="mui-title">用戶隱私政策</h1><divstyle="margin-left:auto;"><spanid="time">5</span>s倒計時</div></header><divclass="mui-content"></div><scriptsrc="../js/mui.min.js"></script><scripttype="text/javascript">mui.init()</script></body>用戶隱私政策界面【進(jìn)階提升】創(chuàng)建用戶隱私政策頁面13在<script></script>內(nèi)加入倒計時功能…<scripttype="text/javascript">mui.init();vartime=5;vartimer=setInterval(e=>{if(time>0){time--;document.getElementById("time").innerHTML=time;}},1000)</script>…定義了time變量用于記錄當(dāng)前秒數(shù)。使用document.getElementById("time")，通過標(biāo)簽ID獲取HTML界面內(nèi)的倒計時數(shù)字。通過JavaScript定時器方法serInterval（）方法創(chuàng)建一個每秒執(zhí)行一次的函數(shù)。在函數(shù)中，我們將time變量遞減直至0（默認(rèn)數(shù)字是5）。說明【進(jìn)階提升】用戶隱私政策頁面的跳轉(zhuǎn)11在login.html內(nèi)，點擊《用戶隱私政策》字樣，使界面跳轉(zhuǎn)至policy.html。需要在login.html文檔中添加點擊事件，實現(xiàn)頁面跳轉(zhuǎn)，并在<body></body>標(biāo)簽里寫入。...<body>...<divstyle="display:flex;"class="small-text"><inputtype="checkbox"id="isRead"><div>我已閱讀并同意</div><divstyle="color:#CF2D28;"onclick="mui.openWindow('./pages/policy.html')">《用戶隱私政策》</div></div>...</body>....在《用戶隱私政策》的<div></div>標(biāo)簽內(nèi)綁定”onclick”點擊事件onclick”點擊事件內(nèi)加入mui內(nèi)置方法mui.openWindow(‘需跳轉(zhuǎn)的界面地址’)說明【進(jìn)階提升】用戶隱私政策頁面的跳轉(zhuǎn)12在<script></script>標(biāo)簽內(nèi)修改login()方法，達(dá)到登錄前校驗?zāi)康摹Ｐ薷脑趌ogin.html文件里的<script></script>標(biāo)簽中。functionlogin(){varparams={username:document.getElementById("username").value,password:document.getElementById("password").value}if(!params.username||!params.password){mui.toast("請輸入用戶名和密碼")return;}if(!document.getElementById("isRead").checked){mui.toast("

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論