hbuilder手机版

hbuilder手机版，HBuilder手机版是一款功能强大的移动端HTML5开发工具，它具备简洁清爽的界面和丰富的功能模块，能让用户轻松将大型开发项目迁移到手机上操作，实现随时随地办公。借助emmet、tab等功能可快速生成代码片段，显著提升工作效率，有需求的用户不要错过。

【功能介绍】

HBuilder手机版是一款专业且实用的手机HTML开发工具

用户可以使用该软件随时进行HTML编辑

通过完整的语法提示和代码输入法、代码块等

大幅提升HTML、js、css的开发效率。代码输入法：只需按下一个数字键，就能减少10次按键操作

代码块：一个代码块，少敲50个按键

模糊匹配：跳着敲字母就能匹配到单词

emmet，tab一下生成一串代码

智能补齐：感知你的意图，自动完成输入

【软件特色】

代码块

一个代码块，少敲50个按键

模糊匹配

跳着敲字母就能匹配到单词

代码输入法

一个数字键，少敲10个按键

emmet

tab一下生成一串代码

智能补齐

感知你的意图，自动完成输入

【使用教程】

使用HBuilder进行移动开发：通过ajax调用接口数据

既然要动手做，和接口进行交互是必不可少的，除非只是打算做一个纯静态的东西。所以在把html5+的环境准备妥当之后，我最先着手研究的就是怎样和接口交互。

用HBuilder新建示例教程后，会生成一个包含ajax（网络请求）示例的文件，路径是examples/ajax.html。查看该文件的代码可知，其功能为点击“提交”按钮后向接口提交参数，再依据所选的返回数据格式输出一段字符串。我打算对这段代码进行改造，改为在页面加载时调用列表接口，并在页面中展示该列表——毕竟这类场景的使用频率应该不低。

在list.html中添加一个用于访问该列表的链接，通过ajax加载接口列表数据

在examples目录下创建一个新的文件，文件名为ajaxlist.html

在这个文件里先把展示列表的HTML框架写好。我是这样写的

//显示接口列表里的记录总数//显示列表数据

编写一段JS代码，功能是在页面加载时通过ajax调用接口，并且要包含判断条件if(mui.os.plus){

mui.plusReady(function{

if(plus.networkinfo.getCurrentType === plus.networkinfo.CONNECTION_NONE) {

network=false;

}else{

//调用接口数据的入口方法

getList;

}

});

}

其中，getList是调用接口数据的入口方法。接下来我们编写getList方法。

varajax=function{

//利用askh3的演示接口数据

var url = "http://askh3.com/try/data/starJson";

//发送数据，随便填，反正返回的数据都是那个样

vardata={

name:"askh3.com",

author:"gzdayou",

description:"最棒的HTML5社区..."

};

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

使用$.post方法向指定url发送data数据，设置成功回调函数为success，并指定响应数据类型为json格式。

};

//加载时调用接口数据，加载列表

functiongetList

{

if(network){

ajax;

}else{

mui.toast("当前网络连接不佳，请稍后尝试操作");

}

}

这里调用的接口是从askh3的angularjs入门教程中看到的，属于一段演示用的json数据。

使用$.post方法向指定url发送data数据，设置成功回调函数为success，并指定响应数据类型为json格式。

上面这个代码片段中的success是post方法的回调函数，接下来我们编写success函数，以处理返回的数据。

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

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

//成功响应的回调函数

var success = function (response) {

varstr = JSON.stringify(response);

console.log(str);

// 将响应对象转换为 JSON 字符串并赋值给变量 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);

varcol1=document.createElement("td");

col1.className="col1"

col1.innerHTML = elem.Name;

li.endChild(col1);

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

col2.className="col2"

col2的innerHTML属性被赋值为elem对象的Club属性值。

li.endChild(col2);

list.endChild(li);

});

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

};