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

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

軟件特色

1. HBuilder手機版是一款專業(yè)實用的手機HTML開發(fā)工具。

2. 用戶可以使用該軟件隨時進行HTML編輯。

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

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

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

- 代碼塊：一個代碼塊，少敲50個按鍵。

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

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

- 智能補齊：感知您的意圖，自動完成輸入。

使用教程

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

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

1. 在list.html中增加一個訪問該列表的鏈接。

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

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

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

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

4. 編寫一段JS代碼，用于在頁面加載時通過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ù)的入口方法。

下面來編寫getList方法：

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

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

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

responseEl.innerHTML = '正在請求中...';

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

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

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

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

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

上面這個代碼片段里的success就是post方法的回調(diào)方法，下面來編寫success方法，來處理返回的數(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. 代碼塊：一個代碼塊，少敲50個按鍵。

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

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

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

5. 智能補齊：感知您的意圖，自動完成輸入。

更新日志

v9.9.1版本

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

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

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