HBuilder開發詞典app（一）--基本頁面佈局

lightTrace發表於2018-07-16
UIAPP

首先下載HBuilder；
在紅色➕號按鈕下新建移動app，選擇mui專案，確定，然後去掉不需要的js和css，並新增h.js和一些我們用到的圖片，程式碼圖片自取：https://github.com/lightTrace/Hbuilder-app

首先index.html是整個app的入口頁面，header有兩個div，一個是書本樣式的logo和紅色背景，一個是搜尋框，下面的四個nav可以 通過mtab自動補全hbuilder的底部選項卡：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.css" rel="stylesheet"/>

</head>
<body>
    <header class="mui-bar mui-bar-nav hBg">
     <div id="logo">
       <img src="imgs/logo.png"/>
     </div>
     <div id="searchBut">請輸入要翻譯的文字</div>
    </header>

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首頁</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-compose"></span>
            <span class="mui-tab-label">詞典</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-star"></span>
            <span class="mui-tab-label">熱點</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>   
</body>
</html>

然後是通過在mui.css中新增部分css樣式實現我們要的效果，主要在mui.css的5612行開始寫我們自己的css，大家可以自己調節：

.hBg{background:#F03844 !important;}

#logo{width:44px; 
      height:44px; 
      float:left;
      overflow:hidden;
      }
#logo img{height:44px; width:44px;}    
#searchBut{width:70%; height:30px; line-height:30px; margin:7px; border-radius:30px; float:right; background:url(../imgs/searchBut.png) no-repeat 8px center #FFFFFF; background-size:auto 68%; padding-left:35px; color:#6D6D72; font-size:14px;}

連線手機後可以ctrl+r真機除錯，也可以在右邊選擇邊看邊改檢視效果：
這裡寫圖片描述

相關文章