移動應(yīng)用項目開發(fā)實戰(zhàn) 課件B模塊 任務(wù)1-15（開啟制作流程） - 任務(wù)十五 (繪制圖標(biāo))_第1頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件B模塊 任務(wù)1-15（開啟制作流程） - 任務(wù)十五 (繪制圖標(biāo))_第2頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件B模塊 任務(wù)1-15（開啟制作流程） - 任務(wù)十五 (繪制圖標(biāo))_第3頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件B模塊 任務(wù)1-15（開啟制作流程） - 任務(wù)十五 (繪制圖標(biāo))_第4頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件B模塊 任務(wù)1-15（開啟制作流程） - 任務(wù)十五 (繪制圖標(biāo))_第5頁
已閱讀5頁，還剩279頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

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

開啟制作流程【制作步驟】瀏覽線上公開平臺/1.瀏覽文件1【制作步驟】輪播圖制作從網(wǎng)站上下載接口文檔2打開文檔打開這個軟件在POSTMAN中打開這個地址【制作步驟】輪播圖制作完成環(huán)境的測試過程【制作步驟】輪播圖制作關(guān)于錯誤代碼說明：關(guān)于token解釋和說明：【制作步驟】下載、安裝安卓手機(jī)模擬器android-studio-ide-202.7486908-windows安裝手機(jī)模擬器1在安裝的過程中，自動從網(wǎng)絡(luò)上下載資源，自動安裝?！局谱鞑襟E】下載、安裝安卓手機(jī)模擬器android-studio-ide-202.7486908-windows安裝手機(jī)模擬器1下載完成資源包，安裝成功效果【制作步驟】下載、安裝安卓手機(jī)模擬器開始手機(jī)模擬器調(diào)試2【制作步驟】下載、安裝安卓手機(jī)模擬器下載安裝插件3【制作步驟】下載、安裝安卓手機(jī)模擬器下載安裝插件3【制作步驟】下載、安裝安卓手機(jī)模擬器手機(jī)模擬器運行成功，開啟手機(jī)模擬器45把設(shè)計完成的后臺程序，運行在模擬器中THANKS

《移動應(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)的控件綁定運行事件，以實現(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)康?。修改在login.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("請閱讀并同意《用戶隱私政策》");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("請求失敗");}});}【進(jìn)階提升】點擊確定后的返回事件11在policy.html界面內(nèi)，加入確定按鈕<html><head>...</head><style>html,body{height:100vh;}#submit{position:absolute;bottom:0;left:0;}</style><body>…<divclass="mui-content"><buttontype="button"style="margin-top:200px;"class="mui-btnmui-btn-redmui-btn-blockfix-bottom"disabledid="submit">確定</button></div>…</body>用戶隱私政策界面【進(jìn)階提升】點擊確定后的返回事件12修改點擊確定按鈕事件1)添加用戶隱私政策頁面確認(rèn)按鈕監(jiān)聽事件在policy.html文件的<script></script>標(biāo)簽中添加以下代碼，用于實現(xiàn)添加用戶隱私政策頁面確認(rèn)按鈕監(jiān)聽。<scripttype="text/javascript">…vartimer=setInterval(e=>{...}document.getElementById('submit').addEventListener('tap',function(){mui.fire(plus.webview.currentWebview().opener(),'read')mui.back()})...</script>點擊確定按鈕后，需對登錄頁產(chǎn)生影響（點擊按鈕后，自動將登錄界面“用戶隱私政策復(fù)選框更改為選中狀態(tài)”），需要通過mui.fire()方法進(jìn)行頁面間的參數(shù)傳遞。通過plus.webview.currentWebview().opener()獲取當(dāng)前頁面的上級界面（login.html），并為其添加自定義“read”事件。說明注：mui.fire函數(shù)需要在真機(jī)或模擬器上進(jìn)行調(diào)試插件效果【進(jìn)階提升】點擊確定后的返回事件13在“l(fā)ogin.html”界面的<script></script>標(biāo)簽內(nèi)增加自定義“read”事件，實現(xiàn)“用戶隱私政策”復(fù)選框自動勾選。<scripttype="text/javascript">mui.init()window.addEventListener('read',function(){document.getElementById("idRead").checked=true})…</script>在登錄頁監(jiān)聽“read”事件，將頁面中用戶隱私政策復(fù)選框狀態(tài)自動修改為勾選。說明注意：由于plus在瀏覽器端無法調(diào)試，該功能需在模擬器及真機(jī)下調(diào)試。THANKS

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

實現(xiàn)底部導(dǎo)航功能【任務(wù)描述】1實現(xiàn)底部導(dǎo)航欄功能：顯示底部導(dǎo)航欄，采用圖標(biāo)加文字方式顯示，圖標(biāo)在上，文字在下，共五個圖標(biāo)+文字組合，分別為首頁、視頻、心得、數(shù)據(jù)分析和我的。要求點擊標(biāo)簽進(jìn)入相應(yīng)頁面，并借用顏色標(biāo)記當(dāng)前頁面所在導(dǎo)航欄標(biāo)簽的icon和名稱。要求1tabbar(選項卡)組件的使用【關(guān)鍵技術(shù)描述】2icon(圖標(biāo))組件的使用3tabbar(選項卡)組件的webview切換顯示實現(xiàn)4onclick（事件）用戶點擊導(dǎo)航項時要執(zhí)行的操作5CSS3動畫的使用進(jìn)階【制作步驟】創(chuàng)建底部導(dǎo)航欄樣式通過閱讀【任務(wù)描述】板塊，可以確定在制作底部導(dǎo)航欄時，我們會涉及到MUI組件以下組件的使用：1)tabbar(選項卡):MUI官網(wǎng)【首頁】（/mui）在我們初始框架DigitalLife項目中參照examples文件夾中的tabbar.html文件，創(chuàng)建底部導(dǎo)航欄樣式。（也可通過MUI官網(wǎng)【首頁】選擇【底部導(dǎo)航卡—div模式】后，使用控制臺（F12）在元素選顯卡選中底部導(dǎo)航欄查看源碼。

2)icon（圖標(biāo)）

底部導(dǎo)航欄圖標(biāo)可以使用MUI提供的icon（圖標(biāo)）來實現(xiàn)。1/mui/ui/#icon底部導(dǎo)航卡官網(wǎng)源碼【制作步驟】創(chuàng)建底部導(dǎo)航欄樣式接下來我們用代碼開始實現(xiàn)，在pages目錄下的home子目錄中，修改index.html頁面。

在<head></head>標(biāo)簽中定義畫面的分辨率，引用通用CSS文件及圖標(biāo)文件。2<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HelloMUI</title><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><!--標(biāo)準(zhǔn)mui.css--><linkrel="stylesheet"href="../../css/mui.min.css"><!--引入common.css文件--><linkrel="stylesheet"href="../../css/common.css"></head>...</html>

【制作步驟】創(chuàng)建底部導(dǎo)航欄樣式在<body></body>標(biāo)簽中引用mui.min.js(MUI封裝的JavaScript文件）。3<!DOCTYPEhtml><html> <head><metacharset="utf-8"><title>HelloMUI</title><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><!--標(biāo)準(zhǔn)mui.css--><linkrel="stylesheet"href="../../css/mui.min.css"><!--引入common.css文件--><linkrel="stylesheet"href="../../css/common.css"><body><!--引入MUI封裝的JavaScript文件--><scriptsrc="../../js/mui.js"></script><scripttype="text/javascript">mui.init()</script></body></html>【制作步驟】創(chuàng)建底部導(dǎo)航欄樣式在<body></body>標(biāo)簽中引用<header></header>標(biāo)簽，用于顯示界面頂部狀態(tài)欄。4<!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)航欄【制作步驟】創(chuàng)建底部導(dǎo)航欄樣式在<body></body>標(biāo)簽中加入tabbar組件5默認(rèn)的底部導(dǎo)航欄<body><headerclass="mui-barmui-bar-nav"style="background-color:white;"><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><h1class="mui-title">首頁</h1></header><scriptsrc="../../js/mui.min.js"></script><navclass="mui-barmui-bar-tab"> <aclass="mui-tab-itemmui-active"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首頁</span></a> <aclass="mui-tab-item"><spanclass="mui-iconmui-icon-videocam"></span><spanclass="mui-tab-label">視頻</span></a> <aclass="mui-tab-item"><spanclass="mui-iconmui-icon-compose"></span>spanclass="mui-tab-label">心得</span> </a> <aclass="mui-tab-item"><spanclass="mui-iconmui-icon-pengyouquan"></span><spanclass="mui-tab-label">數(shù)據(jù)分析</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-contact"></span><spanclass="mui-tab-label">我的</span> </a></nav></body>【制作步驟】創(chuàng)建底部導(dǎo)航欄樣式1A.添加類“mui-active”的a標(biāo)簽元素，會處于默認(rèn)選中的狀態(tài)；B..由于MUI默認(rèn)的主題色為藍(lán)色，此次項目主題色為紅色，因此我們需要在CSS目錄下的common.css文件中添加“mui-active”對應(yīng)的顏色，添加如下代碼：.mui-bar-tab.mui-tab-item.mui-active{ color:#CF2D28;}C.所需要用到的icon圖標(biāo)可以在MUI官網(wǎng)找到/mui/ui/#icon說明底部導(dǎo)航欄【制作步驟】添加Tab欄切換事件根據(jù)【任務(wù)描述】要求，實現(xiàn)“點擊標(biāo)簽的icon（圖標(biāo)）進(jìn)入相應(yīng)頁面”的功能。首先，要掌握onclick（點擊事件）的相關(guān)知識，用來實現(xiàn)頁面跳轉(zhuǎn)。接下來我們要在pages目錄下新建目錄和html文件。操作步驟如下:

首先，在pages目錄下的home目錄中新建home.html頁面作為首頁內(nèi)容，如圖所示。1新建home.html文件【制作步驟】添加Tab欄切換事件其次，在home.html中，引用CSS和JS文件,并在頂部標(biāo)題欄中顯示頁面名稱即可。分別在<head></head>標(biāo)簽引入CSS和在<body></body>標(biāo)簽中引入JS文件：2<!doctypehtml><html><head><metacharset="utf-8"><title></title><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><!--引入css--> <linkhref="../../css/mui.min.css"rel="stylesheet"/> <linkhref="../../css/common.css"rel="stylesheet"/></head><body><!--引入JS文件--><scriptsrc="../../js/mui.min.js"></script><scripttype="text/javascript">mui.init();</script></body></html>

【制作步驟】添加Tab欄切換事件在<body></body>標(biāo)簽中加入<header></header>標(biāo)簽和MUI內(nèi)容域，用于在頂部標(biāo)題欄中顯示頁面標(biāo)題。2<!doctypehtml><html><body><!--頂部標(biāo)題欄中顯示頁面名稱--><headerclass="mui-barmui-bar-nav"><!--頂部標(biāo)題欄返回箭頭--> <aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a> <h1class="mui-title">首頁</h1></header><!--MUI內(nèi)容域--><divclass="mui-content"></div><!--引入JS文件--> <scriptsrc="../../js/mui.min.js"></script> <scripttype="text/javascript">mui.init();</script></body></html>

【制作步驟】添加Tab欄切換事件首頁基礎(chǔ)頁面的完整代碼如下（home目錄下的home.html）3<!doctypehtml><html><head><metacharset="utf-8"><title></title><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><linkhref="../../css/mui.min.css"rel="stylesheet"/><linkhref="../../css/common.css"rel="stylesheet"/></head><body><!--頂部標(biāo)題欄中顯示頁面名稱--><headerclass="mui-barmui-bar-nav"><!--頂部標(biāo)題欄返回箭頭--><aclass="mui-action-backmui-iconmui-icon-left-nav mui-pull-left"></a><h1class="mui-title">首頁</h1> </header> <divclass="mui-content"> </div> <scriptsrc="../../js/mui.min.js"></script> <scripttype="text/javascript">mui.init()</script></body></html>【制作步驟】添加Tab欄切換事件接下來依次創(chuàng)建pages目錄下的子目錄：視頻頁面：創(chuàng)建video目錄，并在其中創(chuàng)建videos.html4新建videos.html文件以首頁基礎(chǔ)頁面的完整代碼為標(biāo)準(zhǔn)，添加修改內(nèi)容如下：<body><!--頂部標(biāo)題欄中顯示頁面名稱--><headerclass="mui-barmui-bar-nav"><!--頂部標(biāo)題欄中返回箭頭--> <aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><!--頁面名稱:視頻--> <h1class="mui-title">視頻</h1></header>...</body>【制作步驟】添加Tab欄切換事件心得頁面：創(chuàng)建experience目錄，并在其中創(chuàng)建experience.html5新建experirence.html文件<body><!--頂部標(biāo)題欄中顯示頁面名稱--><headerclass="mui-barmui-bar-nav"><!--頂部標(biāo)題欄中返回箭頭--> <aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><!--頁面名稱:心得--><h1class="mui-title">心得</h1></header>...</body>以首頁基礎(chǔ)頁面的完整代碼為標(biāo)準(zhǔn)，添加修改內(nèi)容如下：【制作步驟】添加Tab欄切換事件數(shù)據(jù)分析頁面：在home目錄下創(chuàng)建analysis.html6新建analysis.html文件以首頁基礎(chǔ)頁面的完整代碼為標(biāo)準(zhǔn)，添加修改內(nèi)容如下：<body><!--頂部標(biāo)題欄中顯示頁面名稱--><headerclass="mui-barmui-bar-nav"><!--頂部標(biāo)題欄中返回箭頭--><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><!--頁面名稱:數(shù)據(jù)分析--><h1class="mui-title">數(shù)據(jù)分析</h1></header>...</body>【制作步驟】添加Tab欄切換事件我的頁面：創(chuàng)建user目錄并新建user.html7新建user.html文件以首頁基礎(chǔ)頁面的完整代碼為標(biāo)準(zhǔn)，添加修改內(nèi)容如下：<body><!--頂部標(biāo)題欄中顯示頁面名稱--><headerclass="mui-barmui-bar-nav"><!--頂部標(biāo)題欄中返回箭頭--><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><!--頁面名稱:我的--><h1class="mui-title">我的</h1></header>...</body>【制作步驟】實現(xiàn)底部導(dǎo)航欄功能根據(jù)首頁底部導(dǎo)航欄的切換規(guī)則，無法使用mui.openWindow()方法實現(xiàn)。我們需要在當(dāng)前webview中，將新建的頁面提前載入。在（onclick）點擊事件時，展示出對應(yīng)的webview即可。具體方法如下：載入tabbar（選擇卡）組件的webview修改home目錄中index.html頁面，在index.html頁面<script></script>標(biāo)簽中引入以上新建頁面的路徑，然后通過遍歷循環(huán)的方式，使用plus.webview.create方法進(jìn)行webview的載入，具體代碼如下。1<body><scripttype="text/javascript">mui.init();mui.plusReady(function(){letsubPages=['../home/home.html','../video/videos.html','../experience/experience.html','../home/analysis.html','../user/user.html'] letself=plus.webview.currentWebview() subPages.forEach(e=>{ letcurr=plus.webview.create(e,e,{top:'0px',bottom:'45px'}) curr.hide() self.append(curr)})plus.webview.show(subPages[0])})</script></body>【制作步驟】實現(xiàn)底部導(dǎo)航欄功能1其中subPages數(shù)組中存放新建各頁面的路徑，如首頁頁面路徑為：../home/home.html，任務(wù)頁面路徑為'../video/videos.html，心得頁面路徑為：../experience/experience.html，數(shù)據(jù)分析頁面路徑為../home/analysis.html，我的頁面路為：../user/user.html。plus.webview.currentWebview()可獲取當(dāng)前webview，各頁面通過plus.webview.create()方法載入當(dāng)前webview中。plus.webview.show(subPages[0])表示導(dǎo)航欄初始化時，顯示數(shù)組中第一個路徑也就是首頁的地址。說明【制作步驟】實現(xiàn)底部導(dǎo)航欄功能綁定點擊事件繪制完成頁面后，我們需要為頁面對應(yīng)的控件綁定運行事件，以實現(xiàn)對應(yīng)的功能。根據(jù)需求我們要對底部導(dǎo)航欄做點擊事件,因此實現(xiàn)點擊標(biāo)簽進(jìn)入對應(yīng)頁面。在以下案例中，我們通過在html中的dom節(jié)點，直接綁定onclick點擊事件的形式來實現(xiàn)按鈕綁定，以最大限度節(jié)約代碼量。修改index.html頁面，在<nav></nav>標(biāo)簽的<a></a>標(biāo)簽中，綁定onclick事件實現(xiàn)頁面跳轉(zhuǎn)效果。2【制作步驟】實現(xiàn)底部導(dǎo)航欄功能2<body><navclass="mui-barmui-bar-tab"><aclass="mui-tab-itemmui-active"onclick="plus.webview.show('../home/home.html')"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首頁</span></a><aclass="mui-tab-item"onclick="plus.webview.show('../video/videos.html')"><spanclass="mui-iconmui-icon-videocam"></span><spanclass="mui-tab-label">視頻</span> </a> <aclass="mui-tab-item"onclick="plus.webview.show('../experience/experience.html')"><spanclass="mui-iconmui-icon-compose"></span><spanclass="mui-tab-label">心得</span> </a> <aclass="

溫馨提示

  • 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

提交評論