【學習筆記】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 >
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
</body>
</html>
基本程式碼就這些,看著和普通的HTML沒什麼區別,主要就是增加了mui框架,那既然是移動APP專案,那麼一定有相應的結構,那直接說乾貨
在<body></body >之間輸入mhead
可以看到編輯器的程式碼助手就提示了相應的內容,這點做的還是挺不錯的,顯示出來的程式碼:
<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