hbuilder_hbuilder x - CSDN
hbuilder 订阅
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 [1]  HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。 [2] 展开全文
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 [1]  HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。 [2]
信息
软件语言
中文
开发商
DCloud(数字天堂)
特    点
兼容Eclipse的插件
软件名称
HBuilder
软件平台
windows,mac
支    持
HTML5
编写工具
Java、C、HTML、Web和Ruby
GetLine简述
特点快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。 [1] 
收起全文
精华内容
参与话题
  • HBuilder从下载到使用

    万次阅读 2016-10-20 21:15:15
    HBuilder从下载到使用教程。

    听别人谈论这货,于是决定长长见识,见见世面,便屁颠屁颠到网上下一个,满怀好奇的研究了一下。对用过eclipse这款软件的人来说,上手非常容易。

      ☆ 准备工作

      ① 确认自己的电脑连接网络,能下载东西。

      ② 最好有一款主流浏览器。如谷歌,火狐,IE,Opera等(用这个工具都是做web的,浏览器很重要。)

      ☆ 下载HBuilder

      方式一: 在浏览器的地址栏中输入 http://www.dcloud.io然后回车进入

      方式二: 打开浏览器,访问百度搜索,输入HBuilder官网,然后点击进入

      上面的两种方式,任选一种。访问官网后如下图所示

      选择HBuilder之后,点击下载处弹出提示界面。

      点击即可下载。

      注:一般都是选择保存在哪,有部分会调用你的下载工具进行下载,如,迅雷,电驴等。

      ☆使用HBuilder

      找到下载HBuilder文件,这文件时绿色解压缩版。就是说不用安装,解压后直接可以使用。因此,我们必须找到自己存放这种绿色版的工具位置,粘贴该文件,然后解压,解压后删除压缩包。

      打开如上图所示的HBuilder文件夹,找一个HBuilder.exe文件,如下图所示

      选中该文件,右键-弹出菜单中选择“发送到”弹出菜单中选择“桌面快捷方式”,点击他。

      然后,我们在桌面就可以看到这样一个图标,将文件的名字改成HBuilder就可以。以后直接双击这个快捷方式,就可以直接打开HBuilder开发工具。

      ☆ 使用HBuilder

      双击HBuilder这个图标,打开软件。然后你会看到这样一个界面

      你可以选择注册一个用户来使用,也可以直接使用。点击暂不登录跳过这个界面,直接使用此工具。如果需要注册的可以自己注册,此处省略注册过程。

      进入的这个界面是一个欢迎界面,同时下面有该工具的使用的教程。可以先浏览器一遍,然后在来使用这个工具。同时整个软件界面使用的都是简体中文,看起来也相对容易。

      使用步骤:

      1,建立web项目(工具帮助你构建开发和解析html环境)

      2,建立web页面(这是就是我们经常说的网页)

      新建页面时,注意选择html5这一项,因为时下流行的就是html,选择这个之后,软件会自动生成html5的代码结构。

      注:meta标记的charset属性一般设置为utf-8

      这个工具的最大优点就是快捷键使用起来舒服和方便。

      ☆ HBuilder快捷键

      点击”帮助”菜单,在里面找到”快捷键列表”这一项,点击他,然后在整个工具布局的右边看到一个列表,这里面就是对快捷键的描述。

      对于快捷键的使用,大家可以自己慢慢体验和琢磨。只有用的时间长了,快捷键就会信手而来,练得次数多了,写起代码才有飞一般的感觉。

    技术分享:www.kaige123.com

    展开全文
  • HBuilder中文版

    2020-07-30 23:30:03
    这是学习前端html,csss,js必备的开发工具,他是中文版,完美运行,代码提示功能健全,能够极大推动学习前端技术的兴趣和决心!
  • HBuilder安装与使用

    万次阅读 多人点赞 2018-06-05 16:10:44
    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。1 安装1) 官网下载地址:http://www.dcloud.io/2) 安装:解压zip文件到指定目录3) 运行安装文件下的exe文件4) 第一次使用需要登录(可选),不...

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。

    1 安装

    1)        官网下载地址:http://www.dcloud.io/

    2)        安装:解压zip文件到指定目录

    3)        运行安装文件下的exe文件

    4)        第一次使用需要登录(可选),不登录的话每次都会提示该窗口

    2 使用

             HBuilder在Eclipse的基础上添加和删除了很多插件。

    2.1 创建项目

             HBuilder没有“工作空间workspace”的概念,其创建的项目,可以指定到任意位置。

             HBuilder只能创建“WEB项目”和“移动APP”两种项目。

    1)        依次点击文件→新建→选择Web项目(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击Web项目))

    2)        填写项目名称,选择项目位置

    3)        创建完成,点击项目查看目录结构

    2.2 创建HTML页面

    1)        在项目资源管理器中选择刚才新建的项目,依次点击文件→新建→选择HTML文件(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击HTML文件))

    2)        选中文件位置,编写文件名称,选中文件使用版本

    3)        创建完成,自动生成html模板

    2.3 快速提示

    HBuilder特点,需要输入触发字符,就可以快速的提示需要的内容。

    l   <:注释

    l   h+8:html模板,先按h,再按8

    l   in:创建input标签;int:创建文本框;insu:创建添加按钮

    l   t+enter:创建表格

    l   s+enter:js模块

    l   s+2:js引入文件

    l   fun+3:创建js函数

    3. 快捷键

    3.1 常用快捷键

    l   ctrl+向上:向上移动一行代码

    l   ctrl+向下:向下移动一行代码

    l   ctrl+r:运行

    l   ctrl+shift+r:复制当前行,或复制选中区域

    l   ctrl+/:添加或移除单行注释

    l   ctrl+shift+/:添加或移除块注释

    l   ctrl+enter:任意位置向下插入一行

    l   shift+enter:html页面插入<br/>

    l   ctrl+shift+x:全部大写

    l   ctrl+shift+y:全部小写

    l   ctrl+f:查询

    l   ctrl+p:边敲边看

    l   ctrl+d:删除选中行

    l   ctrl+shift+f:整理代码行

    l   ctrl+shift+c:复制文件路径

    l   ctrl+shift+t:删除当前标签

    3.2 具体快捷键查看

    Ø  点击左下角图标

    Ø  选中“快捷键列表”

    Ø  查看快捷键

    Ø  点击其他区域,快捷键列表自动隐藏,点击左下角图标可以继续查看显示

    Ø  如果希望快捷键列表成为固定窗口,点击图标右键,取消“快速视图”勾选

    Ø  将显示在右边区域

    展开全文
  • HBuilder学习与使用

    千次阅读 2018-03-15 15:40:51
    原文链接:点击打开链接摘要: 设计理念及常用功能 设计理念 HBuilder追求无鼠标的极速操作,有很多的快捷设定,包括语法库/语法结构模型/AST语法分析引擎 HBuilder主要用于开发html/js/css,同时配合HTML的后端脚本...

    原文链接:点击打开链接

    摘要: 设计理念及常用功能 设计理念 HBuilder追求无鼠标的极速操作,有很多的快捷设定,包括语法库/语法结构模型/AST语法分析引擎 HBuilder主要用于开发html/js/css,同时配合HTML的后端脚本语言如php/jsp也可以适用,还有前端的预编译语言如less及markdown都可以良...

    设计理念及常用功能

    设计理念

    HBuilder追求无鼠标的极速操作,有很多的快捷设定,包括语法库/语法结构模型/AST语法分析引擎

    HBuilder主要用于开发html/js/css,同时配合HTML的后端脚本语言如php/jsp也可以适用,还有前端的预编译语言如less及markdown都可以良好的编辑

    常用功能

    代码块:一个代码块少敲20下键盘

    代码块是常用的代码组合,比如在js中输入$,回车,则可以自动输入document.getElementById(id);在HTML中输入i,回车,可以得到input button标签
    1
    查看/编辑代码块可以在工具-自定义代码块中,选择相应的代码块进行查看和编辑;也可以在激活代码块的代码助手中,点击详细信息右下角的修改图标进行修改和查看

    代码块激活字符原则1:连续单词的首字母;比如:dg激活document.getElementById(""),vari激活var i=0,dn激活display: none

    代码块激活字符原则2:整段HTML一般使用tag的名称;比如script/style,通常,敲最多4个字母即可匹配到需要的代码块,不需要完整录入,如sc回车/st回车,即可完成script/style标签的输入

    代码块激活字符原则3:同一个tag有多个代码块输出,则在最后加后缀,比如meta输出,但metau则输出,metag同理

    代码块激活字符原则4:如果原始语法超过4个字符,针对常用语法,则第一个单词的激活符使用缩写;比如input button,缩写为inbutton,同理intext是输入框

    代码块激活字符原则5:js的关键字代码块,是在关键字最后加一个重复字母;比如if直接敲会提示if关键字,但iff回车,则出现if代码块;类似的有forr/withh等;由于funtion字母较长,为加快输入速度,取fun缩写,比如funn,输出function代码块,而funa和func,分别输出匿名函数和闭包

    全时提示

    HBuilder不仅提示全面的语法,非语法的各种候选输入也都能提示;包括图片/链接/颜色/字体/脚本/样式/URI/ID/class/自定义JS对象/方法;举例:在img src=后激活代码助手,可看到本工程所有图片列表:输入<sc可以看到本工程所有js列表,在js的document.getElementById(id)中提示本工程已经定义的ID列表,在css的color:后可以列出本工程所有使用过的颜色。

    Emmet支持

    HBuilder内嵌了emmet(即zencoding)插件;输入div#id1,按下tab,可以自动生成<div id="id1"></div>Emmet的详细语法请查阅其官方网站emmet.io

    框架语法支持

    HBuilder内嵌了jquery/bootstrap/angular/mui等常用框架的语法提示库,并且这些框架语法一样可以享受到HBuilder的全时提示机制,提示图片/颜色/id/class...;如果要使用框架语法,需要在工具菜单/项目的右键菜单中,点击引入框架语法提示的子项,为该项目选择框架语法提示;提示效果如下:
    2
    3
    4
    5

    JSDoc+

    HBuilder扩展了jsdoc,并改良用途用于酷酷的语法提示,让动态的js有了静态的感觉;具体参考:http://ask.dcloud.net.cn/article/129

    边看边改

    想一边写代码一边看效果,按下Ctrl P进入边看边改视图,左边保存右边立即刷新,
    调试的玩法还有很多,参考http://ask.dcloud.net.cn/article/483

    最全语法库和浏览器兼容数据

    HBuilder的语法库包括W3C的HTML/JAVASCRIPT/CSS的正式标准和推荐标准...,ECMAScript中浏览器支持的部分,还有各大浏览器的扩展语法,webkit/moz/ms,均实时更新到各浏览器的最新版本;
    信息栏中的浏览器品牌图标,全亮表示无障碍支持该语法,全灰表示不支持,而半亮则表示该浏览器部分支持该语法;半亮时会下图标下方显示出来详细的支持情况,比如video标签,从IE9才开始支持

    手机App开发

    HTML5一大用途就是App开发,HBuilder良好的支持手机App开发;包括新建移动App项目/run in device真机调试/本地及云端打包;HBuilder开发的HTML5+ App,比普通的web App功能更强,性能更高

    less/sass的支持和预编译器

    HBuilder支持less/sass文档

    1.着色:正常使用

    2.代码提示:只能提示其中的css部分,less/sass仅支持对已编写的代码的单词提示

    3.编译:对less/sass文件右键点击编译即可正常编译

    HBuilder还支持预编译器配置,在菜单工具-预编译器配置里,可以自己选配less/sass甚至coffeescript等文件的预编译器,保存即可触发

    Less文件配置说明,其他文件可参照操作

    1.npm全局安装less:npm install less -g

    2.hbuilder菜单"工具"->"选项"->"预编译器",修改.less中的命令路径和命令参数,也可以直接使用"智能完成"

    3.如果"智能完成"失败,请在"命令触发地址"中填写less全局安装后的命令文件lessc.cmd(windows)或less(mac)文件的路径,命令参数请参照截图填写,也可自行修改保存路径
    6

    HTML模板组使用指南

    模板组指讲html文件及其使用的文件(如js/css/字体/图片等)整体作为模板的功能

    如何新建模板组

    点击菜单-文件-HTML文件,点击“自定义模板组”如下图
    1
    将常用的若干文件压缩为zip保存到该目录,新建HTML文件时,模板组列表会多出以该zip文件的文件名命名的模板组;如下图
    2
    3
    4
    以该模板组新建HTML文件,HBuilder会自动生成zip里的文件(含内容)5
    6

    如何扩展语法提示、自定义语法

    HBuilder默认只提示标准的HTML5语法,很多框架有自己的HTML/JS语法,也希望在开发中被提示;HBuilder提供如下扩展方案

    JS部分

    基于sdocml的框架语法库

    对工程点右键,引入框架语法,可以看到已经做了的一些常用框架语法库,包括jquery/zepto/mui;其他框架语法,大家可参考这些语法库的sdocml文件格式,来自己做,做好后提交到 https://github.com/dcloudio/WebFrameworkGrammar 以共享给更多开发者

    jsdoc

    HBuilder兼容jsdoc规范,如果开发者的jsdoc写的完善,一样可以被HBuilder的代码助手良好的提示出来;jsdoc的好处是分发容易,跟着js文件一起分发;坏处是造成js文件体积变大,影响性能;常见的做法是提供2个js文件给开发者,比如ext-dev.js和ext-min.js;dev包括jsdoc而min是压缩版

    另外注意js文件的体积,比如ext-dev.js的官方文件高达6M,这样的文件HBuilder解析起来还是有压力的

    js代码块

    我们也可以通过代码块的方式来扩展js提示,点菜单工具-扩展代码块-js,可以看到详细说明和教程;代码块并不是简单的xml配置,而是可以使用ruby编程的,功能很强大

    HTML部分

    HTML部分目前只能通过代码块扩展,代码块的扩展包括标签和属性2部分,在工具-扩展代码块-HTML里有说明

    HBuilder中文输入法免干扰功能说明

    HBuilder7.1起支持中文符号自动替换为英文符合;中文符号免干扰指在编写html/js/css代码时,如果处于中文输入法状态,自动将必要的符号如
    :;。等转为: ; .等

    如下图:

    1.在HTML区域输入《

    2.在js区域输入。
    1
    3.在css 输入 》
    2
    如不需要此功能,请在工具-选项-HBuilder-编辑器的对应html/js/css/json编辑器类型中调整

    HBuilder如何分栏/分窗格/并列标签

    HBuilder编辑器分栏功能可以实现左右分栏和上下分栏以及组合分栏

    1.左右分栏实现:鼠标点着编辑器选项卡往最右边拖动,拖到右滚动条附近,光标变化,然后松开,即可实现左右分栏

    2.上下分栏实现:鼠标点着编辑器选项卡往最下边拖动,拖到下滚动条附近,光标变化,然后松开,即可实现上下分栏

    3.组合分栏实现:组合分栏就是即有的文件向下拖动,有的文件向右拖动

    真机运行、手机运行、真机联调常见问题

    请首先保证iTunes或Android手机助手(如360手机助手)可以正常连接手机,如果仍有问题请查阅以下问题是否与自己遇到的情况相同

    出现问题手机分析清楚问题在哪个环节,从在HBuilder菜单里点真机运行,要经历几个步骤:

    1.手机硬件通过usb线连接到HBuilder所在电脑,此时可能因为usb口/数据线/手机硬件等多种问题造成连接失败

    2.HBuilder通过adb或itunes服务检测手机,此时可能因为手机渠道/usb连接设置/adb设置或abd冲突/itunes设置造成检测不到

    3.HBuilder安装调试基座到手机,此时可能因为手机禁止usb安装/Android手机没有sd卡/iOS手机没有信任证书而安装失败

    4.HBuilder将ide中的代码同步到手机上并启动调试基座,这一步一般不会出问题

    下面把各种常见FAQ列出,大家可按图索骥。

    Q:HBuilder检测不到手机

    A:真机只能运行移动App项目,所以首先必须新建好移动App项目,并选中移动App项目或将焦点放在将要运行的移动App项目的文件编辑器上;HBuilder的项目前面都是有图标的,W表示web项目,A表示App项目

    如果点击手机运行,HBuilder无法找到手机,尝试以下解决方案:

    Android设备:

    1)确认手机已通过数据线连接电脑

    2)如果是Windows系统,确认已安装Android手机驱动;装驱动比较好的方式是使用各种手机助手,比如360/腾讯的各种手机助手,如果有问题,尝试升级助手的版本

    3)确认手机设置中USB调试模式已开启;这个设置一般在OS设置里的开发者选项里,有的手机在插上数据线后在push通知栏里也可以设置,注意不能设置为u盘模式或充电模式,必须是usb调试或usb数据访问模式

    4)如手机屏幕弹出需信任本计算机的询问,请同意该授权,并且最好是把始终同意该设备调试的checkbox勾上

    5)Windows系统中,如果在启动HBuilder后才安装驱动连接上手机,可能需要重启HBuilder

    6)Windows系统中,如果手机助手正常连接,HBuilder无法检测到手机,可能是这个手机助手独占了Google的ADB服务通道,请关闭所有手机助手及进程里各种*adb.exe;(ADB是Google提供的Android手机与PC端通信的服务)

    7)如果是Android5.0系统,不要使用访客模式,这种模式下无法成功运行

    8)Windows系统中,使用管理员权限运行HBuilder

    9)Windows系统下,如果以上方案均无法解决,可能是其他软件带的adb与HBuilder冲突,点击检查冲突

    10)如果其他软件能检测到手机,但HBuilder无法检测到,将HBuilder安装目录下的tools/adbs目录(MAC下为HBuilder.app/Contents/tools/adbs目录)下的文件备份,然后将tools/adbs/1.0.31目录下的文件拷贝到tools/adbs目录下,重启HBuilder(注:特别是魅族)

    11)关闭右侧的WebView调试模式,重启HBuilder重试

    12)Mac系统下,HBuilder无法检测到Android手机:

    ①关于本机(指Mac系统的关于本机,非手机)-->系统报告->usb->你所连接的device-->厂商ID或者供应商ID(Vendor ID)

    ②在终端执行如下命令:echo xxxxxx >> ~/.android/adb_usb.ini (“xxxxxx”为厂商ID或者供应商ID(Vendor ID),有些系统下echo命令并不能正确写入文件,可在~/.android/目录下修改或新建adb_usb.ini添加xxxxxx)

    ③重启HBuilder

    ④如重启HBuilder仍然不行,请使用命令行(终端.app),cd到HBuilder.app/Contents/tools/adbs目录下运行./adb kill-server重试

    ⑤重启电脑重试

    iOS设备:

    1)确认手机已通过数据线连接电脑

    2)如果是Windows系统,确认已安装iTunes,若未安装点击下载iTunes
    注意iTunes12.1起更改了接口,会造成无法连接:

    ①HBuilder菜单:工具-插件安装,打开插件安装界面,选择iOS连接插件并安装,安装完并重启HBuilder,尝试是否解决

    ②安装最新版本的ITools,重启HBuilder

    3)确认iTunes能正常连接手机

    4)如手机屏幕弹出需信任本计算机的询问,请同意该授权

    5)如果是第一次安装完itunes,建议重新启动HBuilder

    6)如果以上方案都无法解决,有可能是因为本地库与iTunes带的库冲突了,一般是iTunes库目录(32位系统目录为:C:Program FilesCommon FilesAppleApple Application Support,64位系统目录为:C:Program Files (x86)Common FilesAppleApple Application Support)下的dll文件和系统库目录(32位系统目录为:C:WINDOWSsystem32,64位系统目录为:C:WindowsSysWOW64)下的dll重名,可将iTunes库目录下的同名dll文件拷贝到系统库目录下,或者将系统目录下的同名dll文件重命名或删除,然后再重启HBuilder或者重试真机运行

    7)有可能是iTunes安装时依赖库丢失,尝试重装iTunes解决问题

    8)iTunes12.1及以上版本无法找到设备:

    ①.HBuilder菜单:工具-插件安装,打开插件安装界面,选择iOS连接插件并安装,安装完并重启HBuilder,尝试是否解决

    ②.安装最新版本的ITools,重启HBuilder

    9)iOS模拟器如果无法识别:

    ①Xcode必须安装在应用程序(Application)中
    ②首先用确认Xcode(版本必须是6.0及以上版本)已安装并能正常启动模拟器

    ③其次将Xcode的应用名称(可能是Xcode-XXX/Xcode.XXX等)改为Xcode

    ④如果仍然无法检测到,则打开Xcode,然后打开Xcode的 Preferences --> Locations,设置该界面中的Command Line Tools 项,选择正确的Xcode版本即可

    排查问题有些方式虽然土,但没办法也要用:

    1.换数据线/换usb口;数据线有时电压不足或接触不良.尝试重新插拔数据线或直接插入电脑USB口.使用普通的USB HUB很容易出现供电不足

    2.重启HBuilder/重启手机/甚至重启电脑

    Q:能检测到手机,但点HBuilder的真机运行,无法安装调试基座

    1.部分Android rom如小米有usb安装apk的权限,可能是关闭状态,此时需要在手机管家等设置里寻找usb安装apk的权限,将其打开

    2.部分Android手机在usb安装apk时,会在手机界面上弹框,如果不能及时点弹框,会因为超时而安装失败,请注意手机屏幕的显示;当HBuilder控制台提示“安装HBuilder基座App失败,请使用手机助手手动安装xxxandroid_base.apk。”时,基本都属于这种情况

    如果不是这个原因,就是无法通过HBuilder真机运行的adb安装调试基座,那也只能借助三方工具把HBuilder所在目录里的调试基座android_base.apk手动copy到手机上进行安装了

    Q:检查adb冲突(windows系统)

    Android的ADB服务已经被大量软件使用,除了各种手机助手自带adb,其他如搜狗输入法/暴风影音/酷狗音乐/阿里旺旺等众多软件都自带adb,有些工具的adb服务版本低且独占手机通道,就会导致HBuilder无法连接手机

    一般情况下,用户可以在软件的设置里取消该软件对手机的监控;
    还可以使用如下方式检测当前是哪个进程在占用Android手机通道

    1)打开系统dos窗口:开始-运行(快捷键:win+r),输入cmd并回车

    2)确认adb的启动进程:

    寻找端口是5037的tcp连接,在dos中输入:netstat -ano | findstr 5037
    在输出结果中找到类似下面的一行:

    TCP 127.0.0.1:5037 0.0.0.0:0 LISTENING 5816

    如果内容为空,可能是没有程序在占用adb端口;或者使用 netstat -ano | findstr 5037>d:/1.txt 输出到文件中查找

    根据查询结果确认端口为5037的连接被那个进程占用,结果中显示的“5816”表示占用adb端口的进程PID;根据进程的PID可以找到具体进程,在命令行中输入:tasklist | findstr 5816,在输出结果中找到类似下面的一行:

    adb.exe 5816 Console 0 4,440 K

    adb.exe(名称一般不是adb.exe,以adb.exe举例)为启动的adb进程;或者手工在任务管理器中定位这个进程,打开任务管理器后,进入进程选项卡,如果列表里有PID,直接找;如果列表里没有PID,点菜单查看-选择列,勾上PID

    3)解决冲突:

    一般发生冲突是,任务管理器的进程里会出现多个adb.exe,或kadb.exe、tadb.exe。。。

    在任务管理器中找到adb.exe相关进程,在任务管理中右键该进程,打开文件位置,查看该进程是什么软件启动的

    如果adb.exe不是HBuilder安装目录下的文件,一般可以用以下方案解决冲突:

    1.有些软件这种进程是可以设置成不自动启动的,各个软件设置不一样,设置完成后关闭软件就自动退出了

    2.在任务管理器中结束该进程

    3.有些软件该进程结束后又会被自动启动,所以得将adb.exe文件重命名一下

    Q:iPhone真机联调报安装失败 return code=

    A:确保HBuilder为最新版

    iOS5目前确实在运行时会报错,其他iOS版本偶发也会报错,此时需要这样处理:

    在HBuilder安装目录的/plugins/com.pandora.tools.android_1.0.0.xxxx/base目录下(其中xxxx代表最新日期),手动安装iPhone_base.ipa;安装方式推荐itools,没有itools使用itunes也可以;安装完毕后会在手机上有一个HBuilder的应用,以后再点真机运行,就可以把项目部署到手机上,然后手动点击HBuilder应用,就能看到项目的结果

    Q:Android手机真机运行提示应用安装成功,但是其实手机上并没有HBuilder应用

    A:

    1.确认USB调试模式是否打开,如果未打开,请打开USB调试模式重新运行真机调试

    2.如果HBuilder已经检测到手机,可能存在与手机助手冲突的情况,请关闭所有的手机助手重新运行真机调试

    3.利用手机助手手动安装HBuilder安装目录下的 pluginscom.pandora.tools.android_1.0.0.xxx(最新版本号)baseandroid_base.apk到手机上,然后重新运行真机调试

    Q:Android真机联调报文件操作Permission denied

    A:请尝试以下方法解决:
    1.拔出数据线

    2.重新打开USB调试模式

    3.重新插上数据线,此时手机上可能需要授权确认,点击确认

    4.重新运行真机调试看看是否还有问题

    5.重启手机,再重新运行真机调试,看看问题是否解决

    6.如果还有问题,重新启动HBuilder,重复1-4步骤,再重新运行真机调试,看看问题是否解决

    7.如果问题仍然没有解决,则重新安装手机驱动:

    1)我的电脑---右键--属性--硬件---设备管理器--删除USB驱动

    2)打开手机助手重新安装驱动

    此时手机上可能需要授权确认,点击确认,然后再重新运行真机调试

    8.如果以上方案均无法解决,则有可能是手机root的时候把sdcard目录的权限搞错了,导致无法真机运行,此时可以恢复出厂设置,或者重新root,或者刷机解决此问题

    Q:Android真机联调报:open '/dev/hwlog_switch' fail -1, 13. Permission denied

    A:请尝试以下方法解决:

    1.拔插数据线重试

    2.重新打开USB调试模式重试

    3.重启手机重试

    4.重新启动HBuilder重试

    5.如果以上方案均无法解决,则有可能是手机root的时候把sdcard目录的权限搞错了,导致无法真机运行,此时可以恢复出厂设置,或者重新root,或者刷机解决此问题

    Q:真机联调图标和启动图片如何更改

    A:真机联调不是打包,资源都是DCloud预先打包好的,只有自己重新打包,才能更改图标,启动图片,这是原生应用的规范;如果是为了在手机浏览器上使用的WEB应用,还是应该使用手机浏览器来访问,HBuilder内置的web服务器地址配成192.168等内网地址,手机wifi连入,即可访问

    更改HBuilder内置的web服务器地址请点击菜单工具-选项,展开左边的HBuilder-web服务器-内建服务器,在右边更改地址,需要重启HBuilder才生效

    Q:为什么Android手机没有SDCard就不能真机调试

    A:Android没有root的手机只有SDCard才有权限,不过此SDCard并不是非得外插一张实体sd卡,是手机里一个叫SDCard的根目录;如果是使用Android模拟器,在模拟器里可以配置SDCard是否存在及大小

    Q:控制台显示手机应用已启动,但手机屏幕上没有出现

    A:Android手机第一次安装基座应用时,手机端大多有各种杀毒软件要检测一会才会放行,需要等一会

    Q:运行后手机端一直在启动画面停留,不停转圈不能进入

    A:这个是应用的js代码的问题,启动画面的关闭是可配置的

    Q:为什么我电脑没有插iphone,但HBuilder检测到iOS设备

    A:iTunes支持wifi同步,如果iOS设备启动了wifi同步,电脑端的iTunes就可以检测到,进而HBuilder也可以检测到

    Q:真机运行成功启动,但手机端软件启动后显示的不是正在运行的项目

    A:

    1.这种情况是adb连接手机成功,但copy项目文件到手机上失败了,首先尝试重新运行真机调试

    2.Android设备可能存在与手机助手冲突的情况,点击检查冲突

    3.确认手机上HBuilder应用安装位置,如果手机上有外置SDCard,不要把HBuilder基座App安装在外置SDCard上,如果是安装在外置SDCard上,卸载外置SDCard上的HBuilder基座App,并在设置中将应用的默认安装位置不要设置为外置的SDCard上,或者将应用转移至手机内存或内置SDCard上,并重新运行真机调试.

    Q:真机运行启动后显示HBuilder真机运行(log)界面

    A:

    1.重新运行真机调试尝试解决问题

    2.Android设备可能存在与手机助手冲突的情况,请关闭所有的手机助手重新运行真机调试

    3.如果步骤2无法解决,请更换别的手机助手,重新运行真机调试尝试解决问题

    4.确认手机上HBuilder应用安装位置,如果手机上有外置sdcard,不要把HBuilder基座App安装在外置sdcard上,如果是安装在外置sdcard上,卸载外置sdcard上的HBuilder基座App,并在设置中将应用的默认安装位置不要设置为外置的sdcard上,或者将应用转移至手机内存或内置sdcard上,并重新运行真机调试

    外部工具使用指南

    外部工具指将一些外部程序/命令配置为HBuilder可通过菜单直接操作的命令

    如何添加外部工具

    运行-外部工具-外部工具配置如下图
    1
    选择程序菜单,点击“新建启动配置”如下图
    2
    3
    A处为外部的exe(请输入exe的全路径)或命令行命令;B处为执行此命令所处的目录;C处为执行命令需要的变量

    点击变量按钮,可使用HBuilder内置的变量,如下图
    4
    以上图为例,project_name变量指的是资源所在的项目;配置完毕后点击应用即可保存此外部工具,如下图
    5
    上图配置的外部工具,点击运行的效果相当于在CMD命令行下,切换到E盘根目录,运行
    6
    7
    点击运行,E盘根目录生成1.txt/2.txt/3.txt如下图
    8

    如何为外部工具添加快捷键

    依次点击工具-选项-常规-快捷键,在过滤文本中输入外部工具,回车如下图
    9
    绑定自己喜欢的快捷键即可

    给SVN/GIT等绑定操作快捷键

    1.切换到你想用快捷键的视图(如开发视图/边改边看视图)

    2.点击视图,定制透视图
    1
    3.选择命令选项卡
    2
    4.选择SVN或Git

    5.设置成功后会在帮助菜单前生成SVN、Git等菜单

    6.在工具-选项-快捷键中为SVN、Git等操作绑定快捷键即可

    速度慢/响应卡顿/CPU高/占用内存高怎么办

    HBuilder功能比文本编辑器更多,资源消耗也更多,但HBuilder可保证主流配置电脑流畅使用;我们先说下HBuilder比文本编辑器慢的几个原因:

    1.HBuilder毕竟是IDE,功能比文本编辑器多,执行也自然会相对慢

    2.HBuilder还自带了可调试控制台的浏览器,ide+浏览器都在这里,内存占用肯定也少不了

    3.插件有问题导致卡:HBuilder的三方eclipse插件,如aptana的php/ftp插件

    4.HBuilder遇到某些情况的bug造成卡:目前这种情况已经比较少见了

    然后讨论下让HBuilder更快的技巧,或使用中避免不卡的注意事项

    1.如果有固态硬盘,把HBuilder和工程代码都放到SSD固态盘上;现在的电脑配置,cpu和内存都不是问题,往往的瓶颈是硬盘上

    2.同时打开的项目不要太多,把不用的项目点右键关闭,这样HBuilder就不扫描这些项目了,后台资源会释放不少

    3.编辑大文档时慎用自动语法验证器,语法验证过程较易引发卡顿,可以在工具-选项-HBuilder-语法验证器设置里关闭,或选择手动验证语法

    4.编辑大文档时,最好关闭大纲的实时同步功能;大文档的大纲结构会很多,每次移动光标实时计算大纲的位置会有点慢。可以在需要定位时再点一下同步。大纲实时同步在大纲视图的右上角的下拉菜单里

    1. 清理无用的js框架和素材库,Js框架文件都比较大且结构复杂,素材库文件可能很多,扫描这些文件比较费时,不用的文件就移出项目;如果不在意这些文件的扫描提示,也可以把文件移除扫描清单,这样就会更流畅;对不用的文件或目录点右键-构建-移除构建目录

    6.windows search index和dropxbox等工具也会监控磁盘,当项目文件目录被他们监控时,磁盘IO会比较高,在新建项目时会卡

    7.刚导入一个大工程时,或语法库升级时,会触发索引构建,此时cpu会比较高,并行做其他操作就会卡顿,但构建完毕后会恢复正常

    8.不用边看边改时,不要最小化那个浏览器,直接关掉它(ctrl+shift+p);不然你改其他页面时,那个浏览器始终在运行,万一临时写的js有死循环,那HBuilder就挂掉了;而且HBuilder是相当于同时开了ide和浏览器,浏览器也是吃资源的,可能总体内存看着占了不少,但比较某些工具+浏览器合起来占的内存,其实也不多

    9.有些杀毒软件在监控HBuilder的exe和dll等文件,导致HBuilder卡顿,此时请把HBuilder的目录设成杀毒软件的白名单,禁止杀毒软件扫描

    简单说下IDE和文本编辑器的区别:

    IDE有AST语法树,是专用于某种语言的优化开发工具,它能认识这种语言;而文本编辑器是通用的,没有为特定的语言做优化,语法提示也乱;比如var a = document.getElementById("a1");,在a后敲点出它的方法属性时,HBuilder要扫描a到底是什么,超链接?canvas?输入框?然后才会给予用户最准确的提示;这种计算都需要在按下键盘的很短时间内完成,文本编辑器没有这些功能,它不管什么都提示一样的内容,所以提示速度更快;而在所有的语言的AST构建中,js这种动态语言是最复杂的;一个function,可能根据参数不同返回多种类型,这样的function后面再点时,HBuilder都会分析function里的代码以确定返回类型

    AST不止用于语法提示,转到定义/重构变量都离不开它,这些功能也是文本编辑器缺失的;所以在HBuilder里alt+左键转到定义非常好用,而文本编辑器就做不到了


    展开全文
  • 推荐一个超爽的前端工具HBuilder

    万次阅读 2019-10-27 16:28:41
    使用HBuilder UniApp跨平台开源框架开发的H5和有app项目 感觉效果还不错 以后跨平台是一个趋势哦 可以学习一下 语法是vue的语法开发还有一些小程序的语法结合起来的 有很多个开源项目,可以下载学习!一套代码可...

    开发学习网站:http://www.runoob.com 菜鸟教程

    uniapp官网学习地址:https://uniapp.dcloud.io/

    使用HBuilder UniApp跨平台开源框架开发的H5和有app项目

    感觉效果还不错 以后跨平台是一个趋势哦

    可以学习一下 语法是vue的语法开发还有一些小程序的语法结合起来的 

    有很多个开源项目,可以下载学习!一套代码可编译到8个平台 

    我学习后开发的了解一下

    H5项目

    https://www.gomyorder.cn

    支付宝小程序

    在支付宝中搜索【淘淘省钱兄】了解

    App项目下载地址 app目前只能下载安卓的 ios的没有证书看不了 东西是一样的

    https://www.gomyorder.cn/app

    微信小程序

    我做的是淘宝的东西所有微信不让上,那就也看不了,不过核心功能还是一样的 ,不同平台有特殊的处理方式哦

    微信公众号

    go省钱兄】了解

    了解完可以搞事情了哦

    扫码关注【码兄】回复【tbk】免费获取v1.0版本源码,可直接使用的哦

    小程序、vue、h5、css3等前端视频学习资料关注公众号【码兄】免费获取

    什么是HBuilder?

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。


    如何安装 HBuilder?

    HBuilder下载地址:在HBuilder官网http://www.dcloud.io/点击免费下载,下载最新版的HBuilder。

    HBuilder目前有两个版本,一个是windows版,一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。


    使用HBuilder新建项目

    依次点击文件→新建→选择Web项目(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击Web项目))

    image

    image

    如上图,请在A处填写新建项目的名称,B处填写(或选择)项目保存路径(更改此路径HBuilder会记录,下次默认使用更改后的路径),C处可选择使用的模板(可点击自定义模板,参照打开目录中的readme.txt自定义模板)


    使用HBuilder创建HTML页面

    在项目资源管理器中选择刚才新建的项目,依次点击文件→新建→选择HTML文件(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击HTML文件)),并选择空白文件模板,如下图

    image


    使用HBuilder边改边看试试查看编程效果

    win系统按下Ctrl+P(MacOS为Command+P)进入边改边看模式,在此模式下,如果当前打开的是HTML文件,每次保存均会自动刷新以显示当前页面效果(若为JS、CSS文件,如与当前浏览器视图打开的页面有引用关系,也会刷新)


    HBuilder代码块大量减少重复代码工作量

    在打开的getstart.html中输入H,如下图

    image

    然后按下8,自动生成HTML的基本代码如下图

    image

    什么是代码块?

    代码块是常用的代码组合,比如在js中输入$,回车,则可以自动输入document.getElementById(id)。

    查看、编辑代码块可以在工具-自定义代码块中,选择相应的代码块进行查看和编辑。也可以在激活代码块的代码助手中,点击详细信息右下角的修改图标进行修改和查看。

    • 代码块激活字符原则1:连续单词的首字母。比如:dg激活document.getElementById("");vari激活var i=0;dn激活display: none;

    • 代码块激活字符原则2:整段HTML一般使用tag的名称。比如script、style,通常,敲最多4个字母即可匹配到需要的代码块,不需要完整录入,如sc回车、st回车,即可完成script、style标签的输入。

    • 代码块激活字符原则3:同一个tag,有多个代码块输出,则在最后加后缀。比如 meta 输出 <meta name="" content=""/> 但 metau 则输出 <meta charset="UTF-8"/>,metag同理。

    • 代码块激活字符原则4:如果原始语法超过4个字符,针对常用语法,则第一个单词的激活符使用缩写。比如input button,缩写为inbutton,同理intext是输入框。

    • 代码块激活字符原则5:js的关键字代码块,是在关键字最后加一个重复字母。比如if直接敲会提示if关键字,但iff回车,则出现if代码块。类似的有forr、withh等。由于funtion字母较长,为加快输入速度,取fun缩写,比如funn,输出function代码块,而funa和func,分别输出匿名函数和闭包。


    灵活的快捷键使得编程过程手不离键盘

    效果如下图

    image

    • 新建html基本模板后,当前光标处于title标签内,此时我们给HTML设置title:hellohbuilder,完成后使用Ctrl+回车在当前的下一行插入空行,并将光标移动到下一行

    • 我们在此处使用sc代码块生成一个script块来编写js代码(输入sc,回车)如下图

    image

    • 使用funn代码块编写一个JS方法helloworld(输入funn,回车)如下图

    image

    • 此时生成的方法的方法名是选中状态,我们只需要直接输入新的方法名helloworld即可,如下图

    image

    • 上图中的绿色竖线,是代码块中指定的下一个编辑位置,敲击回车光标会直接跳转至竖线位置

    • 此时按向下、向下,Ctrl+回车,输入style回车,生成css代码区域

    • 定义一个Css类classA:输入. c l a s s A { 回车,f o n t 回车 回车 回车

    • 然后按alt+下,alt+下跳转至下一个编辑区域

    • 依次输入< d i v 也可输入<dv回车、<iv回车,语法助手可以通过模糊匹配获知想要生成的标签)如下图

    image

    • 如上图所示,代码助手左侧包含数字,可以使用这些数字选择对应的条目,右侧包含浏览器兼容性数据及示例

    • 输入i 回车 d 1,右箭头,空格,c 回车 回车

    • 鼠标在div标签的class属性classA上悬浮,按下Alt和左键,点击后可跳转至classA定义处

    • Ctrl+回车

    • div也可以通过代码块生成如输入divc回车回车回车,输入helloworld如下图

    • 向下,回车


    使用CSS选择器语法来快速开发HTML和CSS(支持Emmet)

    输入div#page>div.logo+ul#navigation>li*2>a,按下tab生成代码如下图

    image

    HBuilder集成了Emmet功能,可以通过CSS选择器语法来快速开发HTML和CSS,如想深入了解Emmet请移步http://www.emmet.io/


    强大的JS解析引擎大大加快JS开发的速度

    JS中提示HTML、CSS

    JS提示html的ID

    image

    JS提示html的tagname

    image

    JS提示css类名

    image

    JS通过ID、tagname、css类名不但可以获取HTML元素,还可以精确分析出其元素类型,准确提示其属性,如上图可以提示出list[0].type

     

    JS中提示JSON

    image

    JS提示自定义系统方法

    image

    JS提示对象引用及其属性、方法

    image

    JS提示闭包对象

    image

    image


    跳转到class、id、js方法定义处

    按下Alt,左键点击引用的方法名、ID、CSS类、文件(链接、图片),均可跳转到引用的地方,跨文件的引用也可以哦

    跳转到JS方法定义处 如下图

    image

    跳转到CSS类定义处 如下图

    image

    跳转到ID定义处 如下图

    image

    跳转到文件 如下图

    image

     

    展开全文
  • HBuilderX

    千次阅读 2019-09-03 14:42:58
    官方下载地址:http://www.dcloud.io/hbuilderx.html uni-app:https://uniapp.dcloud.io/quickstart uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等...
  • HBuilderX App开发环境搭建

    千次阅读 2019-03-05 00:17:38
    1. Nox 模拟器 1). 无脑式安装 Nox模拟器平板界面.png 2). 屏幕修改 点击右侧上方的设置按钮,在系统设置中选择手机版,点击...3)....2. HBuilderX 1). 点击右侧的Download,并选择对应平台的App开发版下载即可...
  • Hbuilder X 开发APP指南

    万次阅读 2019-03-22 12:16:41
    开发环境HBuilder X 开发环境Hbuilder下载 Vant轻量、可靠的移动端 Vue 组件库(参考文档) HTML5中国产业联盟(参考文档) 平台支持 iOS Android FirstAPP 启动HbuilderX 在菜单栏中选择“文件”-> “新建...
  • HBuilder.7.6.5

    2020-07-27 23:32:45
    HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。 它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。 特点 快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,...
  • Hbuilder实用技巧

    万次阅读 2016-09-22 15:49:39
    A:在编辑代码时经常会出现需要跳转到引用文件或者变量定义的地方,HBuilder提供了一个非常好用的代码追踪功能,只需要按住Alt+鼠标左键即可实现追踪。 图示: 2、 Q:编辑器怎么实现分栏? A:HBuilder编辑器分栏功能...
  • HBuilderX的下载和安装

    万次阅读 2019-03-05 14:47:44
    HBuilderX下载 HBuilderX:官方IDE。建议下载App开发版,如下载标准版,还需在插件管理中安装uni-app插件。 HBuilderX下载地址:添加链接描述 HBuilderX安装 找到下载好的安装包。如图 解压安装包。 解压后...
  • hbuilder不显示代码提示解决

    万次阅读 2018-09-05 10:13:13
    右键项目——扫描索引——重新建立索引。  
  • HBuilder设置代码自动换行的方法

    万次阅读 2018-02-17 21:10:40
    HBuilder设置代码自动换行的方法
  • 1.右键项目名称2.引入框架语法提示3.选择自己使用的框架,确定
  • HBuilder工作空间修改

    万次阅读 2016-07-06 13:58:24
    HBuilder的默认工作空间的修改并不像其他ide一样,在设置里进行更改,而是在工具中进行设置。 1.单击菜单栏“工具”,选择“变更默认代码存放目录” 2.进行修改即可。
  • 第一次发,求大神解答,HBuilder虽好,但是不能debug,错误还没提示很伤脑筋,请问HBuilder 能不能加断点调试?
  • hbuilder 导入git 项目

    万次阅读 2016-03-08 17:56:52
    1.在www 目录下 右键 gitclone 点击确定 2 在hbuilder 中点击 文件 –》导入 3 4
  • HBuilder最新最全快捷键清单及快捷键修改方法

    万次阅读 多人点赞 2017-11-11 20:52:46
    HBuilder大家应该都很熟悉了,不说废话,直接上快捷键。 Hbuilder的快捷键是很多的,共分了12类,下面将分类展示这些快捷键。 HBuilder的快捷键在软件里就可以查看的,按下ctrl+...
  • HbuilderX能像Hbuilder一样,左侧的项目栏文件位置和打开的文档同步,一一对应 设置 · 截图演示:
  • 如何在HBuilder中运行npm命令

    万次阅读 2019-07-31 14:56:51
    有时候发现自己电脑内存不是很大 如果用webstorm跑项目会很卡的话 可以试试轻量级HBuilder来跑VUE项目 VUE项目又需要执行NPM,下面教你怎么在HBuilder中使用NPM 1.首先在HBuilder上面找到运行 进入到外部工具——&...
1 2 3 4 5 ... 20
收藏数 17,792
精华内容 7,116
关键字:

hbuilder