[任務]
上一節我們創建了新的H5應用項目，本節我們制作一個僅顯示”hello world”的邏輯頁面，在首頁中添加一個鏈接，點擊可進入這個頁面。
制作一個邏輯頁面，存到文件page/hello.html:
<div> <div class="hd"> <h2>HelloWorld</h2> </div> <div class="bd"> <p>Hello, world</p> </div></div>這是個html片段，其中class="hd"與class="bd"分別代表邏輯頁的標題欄和主體部分。一般應保持這樣的結構，即使不需要標題欄，也建議保留hd這個div，將其設置隱藏即可(style="display:none")。
在首頁page/home.html中添加一個鏈接過來：
... <div class="bd"> ... <li><a href="#hello">Hello</a></li> </div>在瀏覽器時刷新H5應用進入首頁，點擊Hello鏈接，就可以看到新邏輯頁Hello顯示出來了。 筋斗云可以動態加載邏輯頁，并為它指定id為”hello”(即頁面文件名)。 除了使用鏈接，還可以通過JS代碼MUI.showPage("#hello")來顯示該頁。
點擊瀏覽器的返回按鈕，可以回到首頁。在返回時，沒有網頁刷新的過程，這也是變臉式應用的典型特點。
我們也可以在邏輯頁的hd部分里為應用添加返回按鈕，如：
<div class="hd"> <!-- 加上返回按鈕 --> <a href="javascr改好后，不必刷新頁面重新從首頁進入，直接在瀏覽器控制臺中輸入：MUI.reloadPage();就可以直接查看到更新后的邏輯頁了。
筋斗云支持邏輯頁熱更新技術，可以實時熱更新當前頁面，并保留當前的應用狀態。這一技巧在開發調試邏輯頁時非常好用，尤其對于復雜的H5應用，不必從首頁操作進來。類似的技巧還有卸載一個邏輯頁，以便再進入時可重新初始化：
MUI.unloadPage(); // 卸載當前頁MUI.unloadPage("hello"); // 卸載指定頁如果你嫌首頁上加的鏈接太難看，可以使用框架默認集成的weui樣式庫來潤色它，如：
<div class="weui_cells" style="margin-top:100px"> ... <!-- 顯示為一個button --> <li class="weui_cell" style="display:block"><a href="#hello" class="weui_btn weui_btn_default">Hello</a></li> </div>同樣地，在修改好后，直接在控制臺輸入MUI.reloadPage()看效果。
筋斗云的核心是頁面路由(showPage)和接口調用(callSvr)。它自身不提供移動UI樣式庫，而是通過集成的weui樣式庫來提供移動UI樣式。 weui是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方團隊開發，關于weui的使用可以參考https://weui.io/或自行搜索。 當然你也可以把它換成你自己喜歡的UI庫。
[任務]
上一節中，我們添加了一個邏輯頁”hello”?，F在我們通過CSS修改顯示字體為紅色，并在進入和退出頁面時彈出提示框。
為邏輯頁設置樣式，如果這個樣式只在這個邏輯頁使用，一般就在頁面div中內嵌style標簽。 頁面的邏輯寫在與頁面同名的js文件中，在頁面div上使用mui-script屬性指定js文件，并通過mui-initfn標簽指定頁面初始化函數。
修改hello.html頁面文件如下：
<div mui-initfn="initPageHello" mui-script="hello.js"><style>p { color: red;}</style> <div class="hd"> <a href="Javascript:history.back();" class="icon icon-back"></a> <h2>HelloWorld</h2> </div> <div class="bd"> <p>Hello, world</p> </div></div>在上例中，在內嵌的style標簽中為”p”標簽指定樣式，讓它顯示紅色。 你可能有疑問，這樣寫會不會影響其它頁面中的p標簽的樣式呢？
筋斗云支持自動限定邏輯頁樣式作用域。 即框架保證這個樣式只會用于當前邏輯頁，不會污染到其它頁面。
你也可以加頁面id前綴來指定：
<style>#hello p { color: red;}</style>在不支持這一特性的其它框架中，一般都必須像這樣人工來限定。
上面邏輯頁中通過mui-script=”hello.js”指定了js文件，創建page/hello.js文件如下：
上面演示了邏輯頁進入和退出時常用的事件處理，很容易理解。 一般從后端取數據的操作都習慣放在pagebeforeshow事件中處理。另外還有pageshow, pagecreate等事件。
app_alert是框架提供的異步彈出框函數，可用于提示消息(類似alert)、確認消息(類似confirm)、問詢消息(類似PRompt)等，彈出框界面也可自由定制，后面還將介紹。
框架支持邏輯頁面的前進和后退，甚至可以用手勢左右劃動頁面來后退或前進。
本節講述一個常見需求：提交訂單后進入下一頁面，這時點返回按鈕（不管是點瀏覽器的返回按鈕還是頁面左上方的返回按鈕）， 應該跳過提交頁面，返回再前一個頁面。
在示例應用首頁上，點擊”立即下單”，進入”創建訂單”頁，點擊”創建訂單”按鈕，進入”訂單列表”頁。 這時點擊返回按鈕，我們看到，它跳過了”創建訂單”頁，直接返回了再前面一頁即首頁。
我們查看”創建訂單”頁的代碼(createOrder.js)，其實只需在切換頁面前，調用MUI.popPageStack()：
如果想在回退時跳過兩個頁面（比如提交過程有兩步分了兩個頁面），調用MUI.popPageStack(2)即可。
新聞熱點
疑難解答
