【學習筆記】HBuilder初學，簡單結構體
最近在研究HBuilder的用法，在看到官方網站的介紹和文件後感覺很懵，文件中並不是由淺入深的方式帶著新人通過一些常用示例來入門，一步一步循序漸進的讓使用者瞭解產品，使用產品，而是直接就列出了各種模組的方法、物件、許可權等等，讓我這個從技術出身而又轉型做產品的人一頭霧水，在學習的過程中總結出一些小心得和大家分享，共同探討
工具在這裡就不介紹了，一般敲程式碼的裝上用了就很容易上手
說說移動端開發的程式碼基本結構
先新建一個移動APP專案，選擇mui專案，僅包括基本的css、js、字型等夠用的模板就行了，生成的專案檔案是這些
index.html預設是主入口頁面，當然在manifest.json的配置檔案中可以修改頁面入口檔名
開啟index.html看看
<!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>
<script src="js/mui.min.js"></script 基本程式碼就這些，看著和普通的HTML沒什麼區別，主要就是增加了mui框架，那既然是移動APP專案，那麼一定有相應的結構，那直接說乾貨
在<body></body 
可以看到編輯器的程式碼助手就提示了相應的內容，這點做的還是挺不錯的，顯示出來的程式碼：
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">標題</h1>
</header>看到header這個關鍵字了，必定知道是頭部了，通過編輯器右上角的檢視模式，改成“邊改邊看模式”，就能看到效果了
看到什麼了，上導航！這下明白了吧
然後接著</header>輸入mbody通過程式碼助手快速顯示相應的程式碼：
<div class="mui-content">
</div>有header，有body了，那還差什麼footer，但是注意，移動應用的下導航在這裡叫底部標籤
輸入mtab
<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-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></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>ctrl+s，儲存下，從“邊改邊看模式”裡看到
怎麼樣，上導航，下導航都有了吧，那應該就明白了，內容都是寫在
<div class="mui-content">
</div>之間的
如果有裝置的，插上裝置，在手機中實際看下效果，看下整個程式碼片段吧
<!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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">標題</h1>
</header>
<div class="mui-content">
</div>
<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-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></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>
</body>
</html>一個簡單的結構就是這樣，還是比較簡單的，在裝置中安裝和更新程式碼也非常容易，每ctrl+s一下都會往裝置中更新一下所修改的內容
第一個文章先寫到這，希望大家在學習的過程中多交流，我也有很多沒弄明白的地方O(∩_∩)O