# 簡(jiǎn)單介紹
? ? 最近接到公司一個(gè)移動(dòng)APP項(xiàng)目開發(fā)任務(wù)您访，公司決定采用跨端技術(shù)來實(shí)現(xiàn)一套代碼同時(shí)兼容安卓和蘋果端手機(jī)，于是我評(píng)估了一下最后決定采用dcloud平臺(tái)提供mui和htlm5+技術(shù)來實(shí)現(xiàn)分冈，其實(shí)現(xiàn)在市面上有很多優(yōu)秀的跨端開發(fā)技術(shù)比如facebook的react native辽装、Googl的flutter参袱、還有阿里weex等等他們也有各種特色，而我為什么選擇dcloud呢浑彰？原因是我之前一直做原生APP開發(fā)對(duì)web技術(shù)棧不是很熟恭理，想借此機(jī)會(huì)可以學(xué)習(xí)web相關(guān)技術(shù)，還有就是目前項(xiàng)目馬上要啟動(dòng)了dcloud相比其他框架學(xué)習(xí)成本較低郭变。颜价，好了接下來我就分享一下我使用dcloud開發(fā)app的經(jīng)歷吧。
1诉濒、用dcloud開發(fā)H5移動(dòng)APP需要用到什么技術(shù)周伦？
html/html5標(biāo)記語言用于編輯APP頁面容器和控件
? ? ? ? css樣式語言用于對(duì)APP頁面控件進(jìn)行渲染
? ? ? ? javascipt技術(shù)用于開發(fā)APP的業(yè)務(wù)邏輯層
2、dcloud介紹
? ? dcloud是一家云服務(wù)器開發(fā)公司他為開發(fā)者提供了 一套用于Html5開發(fā)APP的UI和api框架
其中MUI框架是一套dcloud根據(jù)移動(dòng)端自身的特性封裝的一套適合手機(jī)端展示的控件UI庫未荒，我們可以直接用他們封裝好的控件专挪，此框架采用的技術(shù)就是html+css。另外一個(gè)叫5+Runtime咱們它簡(jiǎn)稱5+他的工作原理是用通過javaScipt代碼去調(diào)用安卓和蘋果系統(tǒng)用于開發(fā)原生API接口。這樣就達(dá)到了只需要寫一行javascipt代碼就可以同時(shí)調(diào)用安卓和蘋果api的目的寨腔。
3速侈、實(shí)現(xiàn)一個(gè)登錄頁面功能
我用的是dcloud提供的IED叫HBuilderX是一款很好用開發(fā)工具個(gè)人感覺體驗(yàn)還不錯(cuò)。
第一步 創(chuàng)建項(xiàng)目
新建項(xiàng)目選擇5+APP迫卢、輸入項(xiàng)目名倚搬、選擇好項(xiàng)目存放目錄、選擇MUI項(xiàng)目（會(huì)自動(dòng)給你集成MUI框架）然后點(diǎn)擊創(chuàng)建乾蛤。
第二步 編寫代碼實(shí)現(xiàn)一個(gè)簡(jiǎn)單登錄頁面
咱們先看看項(xiàng)目目錄如圖
如上圖所示項(xiàng)目包括3個(gè)文件夾和2個(gè)文件每界，其中css文件夾用于存放css樣式文件負(fù)責(zé)APP頁面控件效果渲染、html用于存放html文件負(fù)責(zé)APP頁面控件布局家卖、js文件夾存放的是javascriot文件用實(shí)現(xiàn)APP業(yè)務(wù)邏輯盆犁、index.html文件是一項(xiàng)目默認(rèn)入口頁面。 mainifest.json是用有配置app開發(fā)的時(shí)候需要調(diào)用手機(jī)設(shè)備的某些權(quán)限和APP自身的一些配置比如調(diào)用攝像頭篡九、設(shè)置APP桌面圖標(biāo)等。
首先我們?cè)趆tml文件夾新建Login.html文件然后打開就可以開始我們的頁面布局代碼的編寫了醋奠。編寫前簡(jiǎn)單思考一下一個(gè)登陸頁面需要設(shè)計(jì)哪些元素榛臼？，我在這里設(shè)計(jì)的一個(gè)賬號(hào)輸入框一個(gè)秘密輸入框和一個(gè)登陸按鈕這樣一個(gè)簡(jiǎn)單登錄頁面就實(shí)現(xiàn)了窜司，廢話不多說直接上代碼如下沛善。
<!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.min.css" rel="stylesheet" />
<script src="../js/vue.min.js"></script>
<script src="../js/mui.js"></script>
<script src="../js/mui.min.js"></script>
<style type="text/css">
.con {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.con-h1 {
margin-top: 90prx;
}
</style>
</head>
<body>
<div class="con">
<h1 class="con-h1">登錄頁面</h1>
<input type="text" id="account" class="mui-input-clear" placeholder="請(qǐng)輸入賬號(hào)" />
<input type="password" id="pwd" class="mui-input-password" placeholder="請(qǐng)輸入密碼" />
<button type="mui-button" style="margin-top: 50px;" onclick="login()">登錄</button>
<button type="mui-button" style="margin-top: 50px;" onclick="phoneVail()">注冊(cè)</button>
</div>
</body>
</html>
我的具體實(shí)現(xiàn)步驟如下
1、我定義了一個(gè).con樣式來定義整個(gè)頁面div容器塞祈。他實(shí)現(xiàn)功能是彈性布局頁面金刁，長(zhǎng)高度設(shè)置100%并且讓子元素成垂直布局代碼如下。
.con {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
2议薪、我用2個(gè)<input>分別實(shí)現(xiàn)賬號(hào)輸入框和密碼輸入框在<input>中我用到了4個(gè)屬性分別為（type尤蛮、class、id斯议、placeholder）type設(shè)置input輸入內(nèi)容類型賬號(hào)設(shè)置為text密碼設(shè)置為password产捞，id屬性用有代表元素的唯一標(biāo)識(shí)。用于寫邏輯的時(shí)候區(qū)分指定的元素標(biāo)簽哼御，class屬性用于設(shè)置控件css樣式坯临。我用了mui庫提供的mui-input-clear和mui-input-password，placeholder屬性用于提示用戶輸入框需要輸入什么內(nèi)容恋昼，可由開發(fā)者自定義代碼如下看靠。
<input type="text" id="account" class="mui-input-clear" placeholder="請(qǐng)輸入賬號(hào)" />
<input type="password" id="pwd" class="mui-input-password" placeholder="請(qǐng)輸入密碼" />
3、實(shí)現(xiàn)button按鈕
? 我用<button>標(biāo)簽實(shí)現(xiàn)登錄按鈕 type我采用了mui提供mui-button類型液肌。在style屬性里面可以直接編寫css樣式腳本代碼挟炬。我這里設(shè)置的離上面控件距離50px。"margin-top: 50px;"
4、調(diào)試運(yùn)行
? 調(diào)試可以有兩種比較的模式第一種是用手機(jī)用usb線連接電腦另外一種是下載個(gè)安卓模擬器現(xiàn)在網(wǎng)上很多手游模擬器下載辟宗，下來可以直接用的爵赵，我這里用的網(wǎng)易的mumu模擬器。
接下來保存代碼->選擇菜單欄運(yùn)行->手機(jī)或者模擬器找到你的項(xiàng)目和模擬器點(diǎn)擊運(yùn)行->OK運(yùn)行成功
如圖
ps:模擬器鏈接不上怎么辦泊脐？
建議在模擬器里面下載一個(gè)應(yīng)用寶APP然后啟動(dòng)它空幻，它會(huì)自動(dòng)下載和mBuilderX連接的驅(qū)動(dòng)程序。然后你在IDE運(yùn)行看看能否找到自己的模擬器容客。
實(shí)在不行就用手機(jī)通過USB鏈接電腦秕铛。
不管在模擬器還是手機(jī)上調(diào)試應(yīng)用的時(shí)候它都會(huì)自動(dòng)安裝一個(gè)的H5基座應(yīng)用，你的應(yīng)用就是在這個(gè)基座里面展示缩挑。
業(yè)務(wù)邏輯部分
這里我只是寫了一個(gè)簡(jiǎn)單登錄邏輯方法但两，方法功能是獲取賬號(hào)和密碼輸入框的輸入值，并做非空判斷供置。如果為非空就跳入主頁面谨湘，如果為空就彈出提示框，login()方法代碼如下芥丧。
<script type="text/javascript">
function login() { //登錄
var account, password;
account = document.getElementById("account").value;
password = document.getElementById("pwd").value;
console.log("=================參數(shù)長(zhǎng)度===================" + password.length)
if (account.length == 0 || password.length == 0) {
console.log("=================參數(shù)為空===================")
mui.alert('參數(shù)不能為空', '溫馨提示')
} else {
console.log("==============登錄===========")
mui.openWindow({
url: 'shenbao.html'
})
}
}
</script>
app的業(yè)務(wù)邏輯代碼是通過javascript腳本語言編寫紧阔，并且需要放在在<script type="text/javascript"></script>中實(shí)現(xiàn)步驟如下
1、我這里定義了兩個(gè)變量account,password兩個(gè)變量來獲取賬號(hào)和密碼輸入框的值续担， 用此方法document.getElementById("account").value獲取具體值賦相應(yīng)變量擅耽，
2、然后我通過分別判斷account和password變量的長(zhǎng)度來判斷值是否為空如果等于0代表值為空否則代表有值物遇。
3乖仇、驗(yàn)證，如果輸入值為空我用mui框架提供的mui.alert（）方法彈出提示用戶值不能為空對(duì)話框询兴。如果有值就用mui.openWindow({ url:'本地項(xiàng)目指定頁面路徑'})打開登錄后的頁面乃沙。
好了通過h5實(shí)現(xiàn)一個(gè)簡(jiǎn)單APP登錄頁面就講完了。如果有什么表達(dá)不準(zhǔn)確的地方請(qǐng)指出來诗舰，大家一起糾正進(jìn)步崔涂。
