HBuilder

HBuilder是专为前端开发设计的代码编辑器，无论是网页的HTML5编辑，还是CSS样式修饰，都能在这款软件中便捷完成。它具备丰富的编辑功能，可轻松满足不同用户的多样化需求；同时，清爽简洁的界面与柔和的色彩搭配，能让用户在编写代码时获得更舒适的体验。总体而言，这款软件十分适合代码初学者，有需要的用户不妨尝试一下。

使用教程

HBuilder新手使用指南

使用HBuilder开发移动应用时，通过ajax调用接口获取数据

既然决定要做，和接口进行交互这一步是必不可少的，除非只是打算做一个完全静态的东西。因此在把html5+的环境准备妥当之后，我最先着手研究的就是怎样实现与接口的交互。

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

1、在list.html页面中添加一个用于访问该列表的链接，通过ajax加载方式获取接口列表数据

2、于examples目录下创建新文件ajaxlist.html

3、先在这个文件中编写展示列表的HTML框架，我的写法如下：

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

4、编写一段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{

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

varurl=

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

vardata={

name:"askh5.com",

author:"gzdayou",

description:"最棒的HTML5社区…"

};

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

$.post（url,data,success,'json'）；

};

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

functiongetList

{

if（network）{

ajax；

}else{

mui.toast（"当前网络不太顺畅，请您稍后尝试一下"）；

}

}

这里面调用的接口是在askh5的angularjs入门教程里看到的，是一段演示用的json数据。

$.post（url,data,success,'json'）；

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

var responseEl = 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);

var col1 = 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);

};

常见问题

HBuilder怎么运行到浏览器

1、在HBuilder里找到菜单栏，依次点击工具选项，再选择选项功能

2、点击选项选择“常规”，再点击“Web浏览器”，此时会显示出我们之前使用过的浏览器，不过其版本已经比较老旧了。若要配置新的浏览器，需要先将这个旧版本的浏览器删除。

3、一直删除到仅剩下系统默认浏览器，随后点击确定。

4、接着在菜单栏中点击任意一款浏览器，都会弹出未配置信息的提示。

5、此时我们进行相关信息的配置，输入名称、位置、参数等内容就可以了。

6、创建web运行文件与环境，点击页面右上角的【预览】按钮，屏幕右侧随即会弹出对应的预览效果。

7、点击菜单栏中的【运行】选项，然后在展开的子菜单里选择【浏览器】，接着在弹出的浏览器选择菜单中，挑选自己已安装的浏览器就可以了。

8、然后在您选择的浏览器中就会出现运行的结果。

更新日志

v9.9.1版本

1、修复了已知bug

2、优化了画面

3、新增了内容

软件功能

1、强悍的转到定义和一键搜索

2、emmet：return一下生成一串代码

3、可编程代码块：一个代码块，少敲50个按键

4、边改边看：一边写代码，一边看效果

5、代码输入法：按下数字快速选择候选项

6、全方位提示：不仅能提示语法，还可针对ID、Class、图片、链接、字体等内容进行提示…

7、多语言兼容支持：涵盖php、jsp、ruby、python、nodejs等Web开发语言，以及less、coffee等编译类语言均能适配

8、这里还有最全的语法库、最全的语法浏览器兼容库