一步一步教你如何開發(fā)h5頁面

時間：2023-05-30 14:36:01 | 來源：網(wǎng)站運營

時間：2023-05-30 14:36:01 來源：網(wǎng)站運營

一步一步教你如何開發(fā)h5頁面：我們現(xiàn)在要做一個簡單的h5應用：包含登錄、注冊、修改密碼、個人中心主頁面、個人中心內(nèi)頁修改名稱、個人中心修改手機號碼。

第一步：工具安裝，我選擇了能夠輔助我們快速開發(fā)的light開發(fā)工具

1.light依賴node環(huán)境，所以首先要安裝node，安裝 - light開發(fā)文檔這里有詳細的安裝說明及安裝包下載地址

Node安裝成功后打開命令行工具鍵入npm -v，看到版本號即表示安裝成功

2.安裝light工具，在命令行輸入npm install lighting -gd--registry=https://registry.npm.taobao.org最終出現(xiàn)npm info ok字樣則表示light以安裝成功


第二步：正式開發(fā)

我們現(xiàn)在要做的這個h5應用包含登錄、注冊、修改密碼、個人中心主頁面、個人中心內(nèi)頁修改名稱、個人中心修改手機號碼。怎么用light快速開發(fā)呢？

一、首頁我們要用剛裝好的light工具生成一個項目，我們打開剛剛的命令行的工具，我想在我的電腦E盤下生成我的項目myproject, 在命令行輸入e: 然后按回車鍵

繼續(xù)輸入light create lightProjectDemo然后回車項目版本和描述可以填寫，如果不想填寫直接按回車鍵就好

這樣我們就生成好了一個light項目

二、現(xiàn)在可以用工具打開我們建好的項目正式開發(fā)了、這里我用WebStorm演示

1. 打開項目，我們發(fā)現(xiàn)index.html頁面上有個視圖，但是目錄中卻沒有對應的內(nèi)容，這里我們需要在控制臺上生成下代碼輸入lightgen然后回車，第二張圖發(fā)現(xiàn)變化了嗎？分別在js和html的文件夾下新生成了一個view文件，這就是我們index.html中的視圖所生成的，這里我們把這個頁面當做我們項目的首頁，登錄和個人中心的入口都從這里

2.下面我們先來跑一下我們的項目，在我們的首頁中添加登錄和個人中心的入口內(nèi)容，然后在樣式表中添加一些樣式，最后在控制臺上輸入light release –wb 8888 然后回車（這里的8888是端口號，也可以不設置，默認的端口號是3000，這里我們設置一下端口8888），瀏覽器會自動打開我們的首頁

3.現(xiàn)在我們開始建立登錄和個人相關的視圖，這里我又新建了一個頁面personal.html,內(nèi)容參照index.html，當然你也可以只用一個頁面index.html把所有的視圖都放里面。

輸入我們需要的視圖內(nèi)容（這里我把登錄和個人的視圖都放在personal.html里了，當然你也可以根據(jù)需要再新建一個登錄的頁面），你可能還注意到了，personal.html中的視圖id上都多了個二級目錄，好了，現(xiàn)在在控制臺上再次輸入lightgen 來生成視圖看下，你就會發(fā)現(xiàn)這個二級目錄的效果（注意每次新建視圖的時候都必須執(zhí)行l(wèi)ight gen命令才能生效）

發(fā)現(xiàn)不一樣了嗎？在我們的view視圖下生成了一個personal的文件夾，里面是我們剛剛新建的個人和登錄相關的視圖，這樣以后視圖很多的時候我們可以很好的進行分類管理（你可以根據(jù)自己的需要建立二級、三級…）

4.繼續(xù)執(zhí)行l(wèi)ight release –wb 8888跑一下我們的項目，下面我們看一下跳轉(zhuǎn)（頁面間的跳轉(zhuǎn)我們用window.location.href=；視圖間的跳轉(zhuǎn)用light框架中的方法Light.navigate）

跳轉(zhuǎn)1：從首頁頁面中視圖lightProjectDemo跳轉(zhuǎn)到個人頁面的登錄和個人中心主頁（頁面跳轉(zhuǎn)）

跳轉(zhuǎn)2：從個人頁面的登錄視圖跳轉(zhuǎn)到個人頁面的注冊視圖（視圖跳轉(zhuǎn)）,用light框架的視圖跳轉(zhuǎn)方法Light.navigate還可以攜帶視圖參數(shù)

好了，這樣一個簡單的h5頁面就做好了。