一步一步教你如何開發h5頁面

咱們如今要作一個簡單的h5應用：包含登陸、註冊、修改密碼、我的中心主頁面、我的中心內頁修更名稱、我的中心修改手機號碼。

第一步：工具安裝，我選擇了可以輔助咱們快速開發的light開發工具

1. light依賴node環境，因此首先要安裝node，https://document.lightyy.com/tools/index.html這裏有詳細的安裝說明及安裝包下載地址

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

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

第二步：正式開發

咱們如今要作的這個h5應用包含登陸、註冊、修改密碼、我的中心主頁面、我的中心內頁修更名稱、我的中心修改手機號碼。怎麼用light快速開發呢？

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

繼續輸入light create lightProjectDemo 而後回車項目版本和描述能夠填寫，若是不想填寫直接按回車鍵就好

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

2、如今能夠用工具打開咱們建好的項目正式開發了、這裏我用WebStorm演示

1. 打開項目，咱們發現index.html頁面上有個視圖，可是目錄中卻沒有對應的內容，這裏咱們須要在控制檯上生成下代碼輸入light gen而後回車，第二張圖發現變化了嗎？分別在js和html的文件夾下新生成了一個view文件，這就是咱們index.html中的視圖所生成的，這裏咱們把這個頁面當作咱們項目的首頁，登陸和我的中心的入口都從這裏

2. 下面咱們先來跑一下咱們的項目，在咱們的首頁中添加登陸和我的中心的入口內容，而後在樣式表中添加一些樣式，最後在控制檯上輸入light release –wb 8888 而後回車（這裏的8888是端口號，也能夠不設置，默認的端口號是3000，這裏咱們設置一下端口8888），瀏覽器會自動打開咱們的首頁

3. 如今咱們開始創建登陸和我的相關的視圖，這裏我又新建了一個頁面personal.html,內容參照index.html，固然你也能夠只用一個頁面index.html把全部的視圖都放裏面。（這裏我把登陸和我的的視圖都放在personal.html裏了，固然你也能夠根據須要再新建一個登陸的頁面），你可能還注意到了，personal.html中的視圖id上都多了個二級目錄，好了，如今在控制檯上再次輸入light gen 來生成視圖看下，你就會發現這個二級目錄的效果（注意每次新建視圖的時候都必須執行light gen命令才能生效）

發現不同了嗎，在咱們的view視圖下生成了一個personal的文件夾，裏面是咱們剛剛新建的我的和登陸相關的視圖，這樣之後視圖不少的時候咱們能夠很好的進行分類管理（你能夠根據本身的須要創建二級、三級…）

4. 繼續執行light release –wb 8888跑一下咱們的項目，下面咱們看一下跳轉（頁面間的跳轉咱們用window.location.href=；視圖間的跳轉用light框架中的方法Light.navigate）

跳轉1：從首頁頁面中視圖lightProjectDemo跳轉到我的頁面的登陸和我的中心主頁（頁面跳轉）

跳轉2：從我的頁面的登陸視圖跳轉到我的頁面的註冊視圖（視圖跳轉）,用light框架的視圖跳轉方法Light.navigate還能夠攜帶視圖參數

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