h5頁(yè)面應(yīng)該如何開發(fā)
H5被全稱為HTML5，是HTML的第五個(gè)版本。HTML(Hyper Text Mark-up Language)也就是超文本標(biāo)記語(yǔ)言，是目前網(wǎng)絡(luò)上使用最廣泛的語(yǔ)言，同時(shí)也是組成網(wǎng)頁(yè)文檔的主要語(yǔ)言。下面就讓小編來給大家分享一下h5頁(yè)面應(yīng)該如何開發(fā)，讓我們一起來看看吧。
h5頁(yè)面應(yīng)該如何開發(fā)
第一步：工具安裝，我選擇了能夠輔助我們快速開發(fā)的light開發(fā)工具
1.light依賴node環(huán)境，所以首先要安裝node，安裝 - light開發(fā)文檔這里有詳細(xì)的安裝說明及安裝包下載地址
Node安裝成功后打開命令行工具鍵入npm -v，看到版本號(hào)即表示安裝成功
2.安裝light工具，在命令行輸入npm install lighting -gd --registry=https://registry.npm.taobao.org最終出現(xiàn)npm info ok字樣則表示light以安裝成功
第二步：正式開發(fā)
我們現(xiàn)在要做的這個(gè)h5應(yīng)用包含登錄、注冊(cè)、修改密碼、個(gè)人中心主頁(yè)面、個(gè)人中心內(nèi)頁(yè)修改名稱、個(gè)人中心修改手機(jī)號(hào)碼。怎么用light快速開發(fā)呢？
一、首頁(yè)我們要用剛裝好的light工具生成一個(gè)項(xiàng)目
我們打開剛剛的命令行的工具，我想在我的電腦E盤下生成我的項(xiàng)目myproject, 在命令行輸入e: 然后按回車鍵
繼續(xù)輸入light create lightProjectDemo 然后回車項(xiàng)目版本和描述可以填寫，如果不想填寫直接按回車鍵就好
這樣我們就生成好了一個(gè)light項(xiàng)目
二、現(xiàn)在可以用工具打開我們建好的項(xiàng)目正式開發(fā)了
1. 打開項(xiàng)目，我們發(fā)現(xiàn)index.html頁(yè)面上有個(gè)視圖，但是目錄中卻沒有對(duì)應(yīng)的內(nèi)容，這里我們需要在控制臺(tái)上生成下代碼輸入light gen然后回車，第二張圖發(fā)現(xiàn)變化了嗎？分別在js和html的文件夾下新生成了一個(gè)view文件，這就是我們index.html中的視圖所生成的，這里我們把這個(gè)頁(yè)面當(dāng)做我們項(xiàng)目的首頁(yè)，登錄和個(gè)人中心的入口都從這里
2.下面我們先來跑一下我們的項(xiàng)目，在我們的首頁(yè)中添加登錄和個(gè)人中心的入口內(nèi)容，然后在樣式表中添加一些樣式，最后在控制臺(tái)上輸入light release –wb 8888 然后回車（這里的8888是端口號(hào)，也可以不設(shè)置，默認(rèn)的端口號(hào)是3000，這里我們?cè)O(shè)置一下端口8888），瀏覽器會(huì)自動(dòng)打開我們的首頁(yè)
3.現(xiàn)在我們開始建立登錄和個(gè)人相關(guān)的視圖，新建了一個(gè)頁(yè)面personal.html,內(nèi)容參照index.html，當(dāng)然你也可以只用一個(gè)頁(yè)面index.html把所有的視圖都放里面。
輸入我們需要的視圖內(nèi)容（這里我把登錄和個(gè)人的視圖都放在personal.html里了，當(dāng)然你也可以根據(jù)需要再新建一個(gè)登錄的頁(yè)面），你可能還注意到了，personal.html中的視圖id上都多了個(gè)二級(jí)目錄，好了，現(xiàn)在在控制臺(tái)上再次輸入light gen 來生成視圖看下，你就會(huì)發(fā)現(xiàn)這個(gè)二級(jí)目錄的效果（注意每次新建視圖的時(shí)候都必須執(zhí)行l(wèi)ight gen命令才能生效）
發(fā)現(xiàn)不一樣了嗎？在我們的view視圖下生成了一個(gè)personal的文件夾，里面是我們剛剛新建的個(gè)人和登錄相關(guān)的視圖，這樣以后視圖很多的時(shí)候我們可以很好的進(jìn)行分類管理（你可以根據(jù)自己的需要建立二級(jí)、三級(jí)…）
4.繼續(xù)執(zhí)行l(wèi)ight release –wb 8888跑一下我們的項(xiàng)目，下面我們看一下跳轉(zhuǎn)（頁(yè)面間的跳轉(zhuǎn)我們用window.location.href=；視圖間的跳轉(zhuǎn)用light框架中的方法Light.navigate）
跳轉(zhuǎn)1：從首頁(yè)頁(yè)面中視圖lightProjectDemo跳轉(zhuǎn)到個(gè)人頁(yè)面的登錄和個(gè)人中心主頁(yè)（頁(yè)面跳轉(zhuǎn)）
跳轉(zhuǎn)2：從個(gè)人頁(yè)面的登錄視圖跳轉(zhuǎn)到個(gè)人頁(yè)面的注冊(cè)視圖（視圖跳轉(zhuǎn)）,用light框架的視圖跳轉(zhuǎn)方法Light.navigate還可以攜帶視圖參數(shù)
HTML5本身并不是一項(xiàng)新技術(shù)，但是由于HTML5在功能上的巨大豐富，以及對(duì)各個(gè)主要瀏覽器性能的支持，它比之前的HTML5有著更廣泛的用途。以上就是小編為大家分享的關(guān)于“h5頁(yè)面應(yīng)該如何開發(fā)”的全部?jī)?nèi)容啦，希望能夠給大家?guī)韼椭丁?/p>
[免責(zé)聲明]
文章標(biāo)題： h5頁(yè)面應(yīng)該如何開發(fā)
文章內(nèi)容為網(wǎng)站編輯整理發(fā)布，僅供學(xué)習(xí)與參考，不代表本網(wǎng)站贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)。如涉及作品內(nèi)容、版權(quán)和其它問題，請(qǐng)及時(shí)溝通。發(fā)送郵件至36dianping@36kr.com，我們會(huì)在3個(gè)工作日內(nèi)處理。
