基于h5、javascript、ionic、angularjs的web應用畢業(yè)論文-資料下載頁
2025-07-01 20:22本頁面
【導讀】未定義書簽。實現(xiàn)本地存儲..
【正文】 步驟二：配置模擬數(shù)據(jù) 步驟三：發(fā)送 Ajax 請求（ JQuery 版） 簡介 canvas 是 HTML5 中的新元素，你可以使用 javascript 用它來繪制圖形、圖標、以及其它任何視覺性圖像。它也可用于創(chuàng)建圖片特效和動畫。如果你掌握了完整的命令，你可以用 canvas 創(chuàng)建豐富的 web 應用程序。 如下定義 canvas 標簽： canvas id=canvas瀏覽器不支持 html5canvas 我們也可以給 canvas 添加 style 屬性，添加 canvas 的寬和高， canvas 就好像一快畫布，我們可以用 css 向操作 div 一樣來操作這塊畫布的起始狀態(tài)，只有先確定 canvas 畫布的狀態(tài)，才可以用 js 在這塊畫布上創(chuàng)作畫作。 canvas id=canvas width=1024 height=768 style=border: 1px solid aaa。display:block。margin: auto。 這樣我們就準備好了一張長寬都為 400 的畫布。 接下來用 js 操作 canvas var canvas=(canvas)。//獲取 Canvas var context=(39。2d39。)。//設置畫布為 2d畫布 接下來就可以根據(jù) 實際需求來畫圖形了。 完成首頁內(nèi)容 由于本 web 應用要實現(xiàn)動態(tài)加載數(shù)據(jù)，所以要有一門后端語言，而且需要搭建服務，本 web 應用沒有用到后臺語言，而是用到上文提到的 來提供假數(shù)據(jù)，實現(xiàn)動態(tài)加載。 當加載數(shù)據(jù)的時候需要加載 ，里面是用 ，并使用數(shù)組的 Math,random()方法產(chǎn)生隨機數(shù)據(jù)，保證數(shù)據(jù)的動態(tài)加載。 其中首頁內(nèi)容的加載用到了 angularjs 的遍歷方法 ngrepeat=” item in data” , Data 是一組 json 數(shù)據(jù)，用來填充頁面內(nèi)容。 當加載 canvas 動畫的時候用到了 Angularjs 的自定義指令 .如下： 6 ionic 結(jié)合 Angularjs 實現(xiàn)上拉加載和下拉刷新功能 上拉加載更多功能實現(xiàn) 在 頁面引用 ionic 組件 ioninfinitescroll/ ioninfinitescroll ioninfinitescroll oninfinite=loadMore() distance=1% /ioninfinitescroll 其中 loadmore()為上拉加載更多函數(shù)，在 文件中定義這個函數(shù)。 當 LoadProduceList 函數(shù)傳入的參數(shù)是 2 時，實現(xiàn)上拉 加載更多。 當LoadProduceList()傳入的參數(shù)是 1 時，實現(xiàn)下拉刷新的功能。 實現(xiàn)下拉刷新功能 在 頁面引用 ionic 組件 ionrefresher/ionrefresher實現(xiàn)下拉刷新功能。在組件內(nèi)寫上 ionrefresher onrefresh=doRefresh()/ionrefresher， doRefresh()是 ionic 組件自帶的刷新函數(shù) 。 具體實現(xiàn)代碼如下： 7 注冊登錄模塊的實現(xiàn) 實現(xiàn)注冊登錄功能 首先，進來首頁先檢測是否登錄。 如果沒有登錄，點擊登錄按鈕，進入登錄界面，登錄成功跳轉(zhuǎn)到首頁，并存取用戶名。登錄失敗， 顯示錯誤提示信息。 代碼如下： 實現(xiàn)本地存儲 當?shù)卿洺晒螅脩裘畔鎯υ诒镜?，除非刪除本地存儲或者退出登錄，否則用戶名信息會一直存儲在本地。具體實現(xiàn)用到了 HTML5 的新特性localstorage。 具體實現(xiàn)的代碼如下： 登錄界面如下： 8 完成產(chǎn)品頁面以及詳情頁 產(chǎn)品頁面的主題內(nèi)容 產(chǎn)品頁面內(nèi)容編寫的原理同首頁內(nèi)容一樣， 在 文檔中 引入ionview標簽，所寫內(nèi)容放在 ionview 標簽內(nèi)。產(chǎn)品頁面用到 Tab 切換功能，引用 iontabs 標簽， tab 切換功能寫在 iontabs 標簽內(nèi)。 具體如下： 在 的 produceCtrl 控制器中注入 $scope,$,并寫入如下程序，通過發(fā)送 ajax 請求來接收數(shù)據(jù)。實現(xiàn)頁面的加載。 產(chǎn)品詳情頁完成 當點擊產(chǎn)品頁的某個產(chǎn)品列表會跳轉(zhuǎn)到 該產(chǎn)品的詳情介紹頁。 在 te mp late 文件夾中創(chuàng)建 文檔，編寫詳情頁內(nèi)容 。 在 中 寫入如下代碼：通過 $ 來獲取數(shù)據(jù)。 詳情頁顯示如下： 9 完成風險評估 點擊立即購買按鈕，顯示開始評估模態(tài)框， 顯示模態(tài)框需要引入 $ionicModal。創(chuàng)建一個 編寫如上圖顯示的模態(tài)框內(nèi)容。 點擊開始評估，進入評估頁面。 當點擊完第一題，自動跳轉(zhuǎn)到下一題，并且出現(xiàn)上一題提示，點擊上一題會回到上一題的選擇界面，并且保存上一次已經(jīng)選擇的選項，點擊可重新選擇。 當點擊到最后一題時，會出現(xiàn)警告框顯示風險等級。 10 結(jié)論 編輯本 web應用的過程中，頁面布局主要用到基礎(chǔ)的 HTML語言和 CSS樣式表，此外用到一些 HTML5 一些新增特性，例如本地存儲 localstorage、 Canvas 繪圖，主要精力放在了 使用 ， ajax請求數(shù)據(jù)， ionic組件的運用 ，ionic 的路由切換， Angularjs 的控制器之間互相傳參數(shù)，通過在各個控制器中注入自定義服務、 $state、 $scope、 $ 等，完成模塊功能的實現(xiàn)。 參考文獻 [1]美． Nichols C． Zakas《 javascript 高級程序設計（第三版）》 [2]Adam Freeman 《 Angularjs 高級程序設計》 [3]ionic 實戰(zhàn)基于 Angularjs 的移動混合應用開發(fā) [4]Eric 《 CSS 權(quán)威指南》
研究報告相關(guān)推薦
鄂ICP備17016276號-1