1 問題描述
最近在使用Hbuilder進行移動app前端開發(fā)中，我通常搭建首頁框架的常規(guī)方法是在index.html主文件中使用多種框架組件模塊，再通過css疊層樣式表對相應模塊加以修飾。但在分析Hbuilder提供的移動app底部選項卡模板的代碼時，我卻在index.html文件中找不到底部選項卡區(qū)域的相應代碼，這很讓我傷腦筋。通過查詢多方面的資料并與學長交流后，我大概了解了后者搭建框架所用到的原理。因此接下來我將分享一些干貨來幫助大家理解，并且能在兩種方式上進行選擇。
2 問題分析
在Hbuilder中，一個移動app有著以下的幾個目錄：css目錄、fonts目錄、js目錄、images目錄以及html目錄；還有著以下幾個文件：index.html、manifest.json。
①目錄篇
css目錄存放html中內(nèi)容的修飾樣式表；
fonts目錄提供整個app中的字體樣式；
html目錄存放app中的子頁面html文件；
images目錄存放前端頁面中所需要的圖片內(nèi)容（不包括數(shù)據(jù)庫提供的那部分）；
js目錄存放整個app所需javascript腳本語言修飾、搭建內(nèi)容（具體js的作用在此就不再聲明，有興趣可自行了解學習）。
②文件篇
index.html文件：主要作用是對app首頁面進行設(shè)計、架構(gòu)以及與其他頁面建立聯(lián)系。在相對功能簡單的app中，通常能在index.html中直接看到底部欄，內(nèi)容欄、頂部欄及與跳轉(zhuǎn)子頁面的相應代碼。
Manifest.json文件：（重點）關(guān)于這個文件，我們也可以將它理解成app的一個配置系統(tǒng)。里面包含了應用信息、圖標設(shè)置等大量初始化設(shè)置選項，如下圖
以上大概就是一個移動app的基本構(gòu)成。
3 解決方案
讓我們先來分析圖中的代碼，底部導航條標簽以及class屬性這些沒啥好說的，我們主要看mui中的函數(shù)。首先是mui.init()，mui框架將很多的功能配置都集中在mui.init()中， 目前支持在init中配置的功能包括：創(chuàng)建子頁面、預加載、手勢事件配置、上拉加載、下拉刷新、關(guān)閉頁面、設(shè)置系統(tǒng)狀態(tài)欄背景顏色。
注意：mui.init()是每個mui頁面都必須調(diào)用的，官方指出，頁面初始化，必須執(zhí)行init方法。
另外這里解釋一下H5：即HTML5，萬維網(wǎng)的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）第5次重大修改，2014年發(fā)布，之后的瀏覽器都必須遵守這個開發(fā)規(guī)范實現(xiàn)對html、css、javaScript的解釋。
最后就是<nav>實現(xiàn)底部導航條，其里面的<a>標簽需要注意，我們做web開發(fā)使用標簽中的href屬性來添加鏈接跳轉(zhuǎn)頁面，起初我也是想這樣做，但在查閱資料后發(fā)現(xiàn)這樣是不行的，有興趣的小伙伴們可以自己試一下。為什么不行呢？因為使用web技術(shù)做app，有一個無法避開的問題就是網(wǎng)上提到的轉(zhuǎn)場動畫；web是基于鏈接構(gòu)建的，從一個頁面點擊鏈接跳轉(zhuǎn)到另一個頁面，如果通過有刷新的打開方式，會出現(xiàn)白屏頁面等待，如果通過無刷新的方式，用JS移入DOM節(jié)點（常見的SPA解決方案），項目容器會碰到很高的性能挑戰(zhàn)；DOM節(jié)點如果非常多的話，頁面太大，轉(zhuǎn)場動畫卡頓，不流暢，甚至導致瀏覽器等相應容器崩潰；關(guān)于這點，在參照CSDN博主的具體案例后，我發(fā)現(xiàn)可以采用mui的解決思路：單個的webview只承載單個頁面的dom，減少dom層級及頁面大??；頁面切換使用原生動畫，將最消耗性能的部分交給原生實現(xiàn).
4 總結(jié)
App前端開發(fā)與web前端有著異曲同工之處，但在某些細節(jié)上又有適合各自應用需要的特點，作為初學者來說，無論是搭建什么樣的一個框架，首先自己得先理解布局與功能中的代碼原理。只有融會貫通，知識才能為其所用！希望本文章能在前端開發(fā)中幫助你解答一些困惑。
更多精彩文章：
關(guān)于網(wǎng)頁首頁設(shè)計的一點思考
深入理解瀏覽器內(nèi)核 - 瀏覽器內(nèi)核依賴關(guān)系
Jupyter快速編輯高大上數(shù)學公式 常見希臘字母
基本初等函數(shù) 指數(shù)函數(shù) 代碼篇
一種基于狀態(tài)機的 DOM 樹生成技術(shù)(1)
一種基于狀態(tài)機的 DOM 樹生成技術(shù)(2)
where2go 團隊
