hbuilder手機(jī)版是一款專(zhuān)為移動(dòng)端設(shè)計(jì)的HTML5開(kāi)發(fā)工具，具備與原生應(yīng)用相媲美的功能和性能。它旨在幫助用戶(hù)輕松在手機(jī)上進(jìn)行開(kāi)發(fā)，且操作簡(jiǎn)便，即便對(duì)于初學(xué)者，通過(guò)逐漸熟悉，也能完全掌握使用技巧，隨時(shí)隨地拿起手機(jī)即可開(kāi)始編程。

軟件提供了豐富的代碼塊，在操作過(guò)程中，只需選擇一個(gè)合適的代碼塊，就可能幫助您減少50個(gè)按鍵的輸入，從而快速、高效地提升工作效率。內(nèi)置的emmet和tab功能能夠快速生成一串代碼，極大地提高了便利性。有需要的朋友歡迎下載體驗(yàn)。

軟件特色

1. HBuilder手機(jī)版是一款專(zhuān)業(yè)實(shí)用的手機(jī)HTML開(kāi)發(fā)工具。

2. 用戶(hù)可以使用該軟件隨時(shí)進(jìn)行HTML編輯。

3. 提供完整的語(yǔ)法提示和代碼輸入法、代碼塊等功能。

4. 大幅提升HTML、JS、CSS的開(kāi)發(fā)效率。

- 代碼輸入法：一個(gè)數(shù)字鍵，少敲10個(gè)按鍵。

- 代碼塊：一個(gè)代碼塊，少敲50個(gè)按鍵。

- 模糊匹配：跳著敲字母就能匹配到單詞。

- 內(nèi)置emmet：Tab一下生成一串代碼。

- 智能補(bǔ)齊：感知您的意圖，自動(dòng)完成輸入。

使用教程

使用HBuilder開(kāi)發(fā)移動(dòng)APP：ajax調(diào)用接口數(shù)據(jù)

既然要做APP，與接口交互是必不可少的，除非只想制作一個(gè)純靜態(tài)的APP。所以在準(zhǔn)備好html5+環(huán)境后，我首先開(kāi)始研究的是如何與接口交互。使用HBuilder新建示例教程后，里面會(huì)有一個(gè)ajax（網(wǎng)絡(luò)請(qǐng)求）的例子，文件目錄是examples/ajax.html。查看該文件的代碼，其功能是點(diǎn)擊“提交”按鈕后，將參數(shù)提交給接口，并根據(jù)選擇的返回?cái)?shù)據(jù)格式，將一段字符串打印出來(lái)。我打算改造這段代碼，使其在頁(yè)面加載時(shí)調(diào)用列表接口，并在APP中顯示列表，因?yàn)檫@種情況應(yīng)該會(huì)經(jīng)常用到。

1. 在list.html中增加一個(gè)訪(fǎng)問(wèn)該列表的鏈接。

2. 在examples目錄新建文件ajaxlist.html。

3. 在這個(gè)文件中先寫(xiě)上展示列表的HTML框架。我是這么寫(xiě)的：

// 顯示接口列表中的記錄總數(shù)

// 顯示列表數(shù)據(jù)

4. 編寫(xiě)一段JS代碼，用于在頁(yè)面加載時(shí)通過(guò)ajax調(diào)用接口數(shù)據(jù)。

if(mui.os.plus){mui.plusReady(function () {if(plus.networkinfo.getcurrentType()==plus.networkinfo.CONNECTION_NONE){network = false;} else {//調(diào)用接口數(shù)據(jù)的入口方法getList();}});}

其中，getList就是調(diào)用接口數(shù)據(jù)的入口方法。

下面來(lái)編寫(xiě)getList方法：

var ajax = function() { //利用askh5的演示接口數(shù)據(jù)

var url = //發(fā)送數(shù)據(jù)，隨便填，反正返回的數(shù)據(jù)都是那個(gè)樣

var data = {name: "askh5.com", author: "gzdayou", description: "最好的HTML5社區(qū)..."};

responseEl.innerHTML = '正在請(qǐng)求中...';

$.post(url, data, success, 'json');

};//加載時(shí)調(diào)用接口數(shù)據(jù)，加載列表

function getList(){if(network){ajax();}else{mui.toast("當(dāng)前網(wǎng)絡(luò)不給力，請(qǐng)稍后再試");}}

這里面調(diào)用的接口是在askh5的angularjs入門(mén)教程里看到的，是一段演示json數(shù)據(jù)。

$.post(url, data, success, 'json');

上面這個(gè)代碼片段里的success就是post方法的回調(diào)方法，下面來(lái)編寫(xiě)success方法，來(lái)處理返回的數(shù)據(jù)。

var responseEl = document.getElementById("records_count");

var list = document.getElementById("list");

//成功響應(yīng)的回調(diào)函數(shù)

var success = function(response) {

var str = JSON.stringify(response);

console.log(str);

responseEl.innerHTML = "總記錄：" + response.count;

list.innerHTML = "字段1字段2";

mui.each(response.records, function(key, elem) {

console.log("elem.name:" + elem.Name );

var li = document.createElement("tr");

//li.setAttribute("id", key);

var col1 = document.createElement("td");

col1.className = "col1";

col1.innerHTML = elem.Name;

li.appendChild(col1);

var col2 = document.createElement("td");

col2.className = "col2";

col2.innerHTML = elem.Club;

li.appendChild(col2);

list.appendChild(li);

});

console.log("list" + list.innerHTML );

};

功能介紹

1. 代碼塊：一個(gè)代碼塊，少敲50個(gè)按鍵。

2. 模糊匹配：跳著敲字母就能匹配到單詞。

3. 代碼輸入法：一個(gè)數(shù)字鍵，少敲10個(gè)按鍵。

4. 內(nèi)置emmet：Tab一下生成一串代碼。

5. 智能補(bǔ)齊：感知您的意圖，自動(dòng)完成輸入。

更新日志

v9.9.1版本

1. 修復(fù)了已知bug。

2. 優(yōu)化了畫(huà)面。

3. 新增了內(nèi)容。