本文共 11911 字,大约阅读时间需要 39 分钟。
HBuilder追求无鼠标的极速操作,有很多的快捷设定,包括语法库/语法结构模型/AST语法分析引擎
HBuilder主要用于开发html/js/css,同时配合HTML的后端脚本语言如php/jsp也可以适用,还有前端的预编译语言如less及markdown都可以良好的编辑
代码块是常用的代码组合,比如在js中输入$,回车,则可以自动输入document.getElementById(id);在HTML中输入i,回车,可以得到input button标签
查看/编辑代码块可以在工具-自定义代码块中,选择相应的代码块进行查看和编辑;也可以在激活代码块的代码助手中,点击详细信息右下角的修改图标进行修改和查看代码块激活字符原则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:
后可以列出本工程所有使用过的颜色。
HBuilder内嵌了emmet(即zencoding)插件;输入div#id1,按下tab,可以自动生成<div id="id1"></div>
Emmet的详细语法请查阅其官方网站emmet.io
HBuilder内嵌了jquery/bootstrap/angular/mui等常用框架的语法提示库,并且这些框架语法一样可以享受到HBuilder的全时提示机制,提示图片/颜色/id/class...;如果要使用框架语法,需要在工具菜单/项目的右键菜单中,点击引入框架语法提示的子项,为该项目选择框架语法提示;提示效果如下:
HBuilder扩展了jsdoc,并改良用途用于酷酷的语法提示,让动态的js有了静态的感觉;具体参考:
想一边写代码一边看效果,按下Ctrl P进入边看边改视图,左边保存右边立即刷新,
调试的玩法还有很多,参考HBuilder的语法库包括W3C的HTML/JAVASCRIPT/CSS的正式标准和推荐标准...,ECMAScript中浏览器支持的部分,还有各大浏览器的扩展语法,webkit/moz/ms,均实时更新到各浏览器的最新版本;
信息栏中的浏览器品牌图标,全亮表示无障碍支持该语法,全灰表示不支持,而半亮则表示该浏览器部分支持该语法;半亮时会下图标下方显示出来详细的支持情况,比如video标签,从IE9才开始支持HTML5一大用途就是App开发,HBuilder良好的支持手机App开发;包括新建移动App项目/run in device真机调试/本地及云端打包;HBuilder开发的HTML5+ App,比普通的web App功能更强,性能更高
1.着色:正常使用
2.代码提示:只能提示其中的css部分,less/sass仅支持对已编写的代码的单词提示
3.编译:对less/sass文件右键点击编译即可正常编译
HBuilder还支持预编译器配置,在菜单工具-预编译器配置里,可以自己选配less/sass甚至coffeescript等文件的预编译器,保存即可触发
1.npm全局安装less:npm install less -g
2.hbuilder菜单"工具"->"选项"->"预编译器",修改.less中的命令路径和命令参数,也可以直接使用"智能完成"
3.如果"智能完成"失败,请在"命令触发地址"中填写less全局安装后的命令文件lessc.cmd(windows)或less(mac)文件的路径,命令参数请参照截图填写,也可自行修改保存路径
模板组指讲html文件及其使用的文件(如js/css/字体/图片等)整体作为模板的功能
点击菜单-文件-HTML文件,点击“自定义模板组”如下图
将常用的若干文件压缩为zip保存到该目录,新建HTML文件时,模板组列表会多出以该zip文件的文件名命名的模板组;如下图以该模板组新建HTML文件,HBuilder会自动生成zip里的文件(含内容)HBuilder默认只提示标准的HTML5语法,很多框架有自己的HTML/JS语法,也希望在开发中被提示;HBuilder提供如下扩展方案
对工程点右键,引入框架语法,可以看到已经做了的一些常用框架语法库,包括jquery/zepto/mui;其他框架语法,大家可参考这些语法库的sdocml文件格式,来自己做,做好后提交到 以共享给更多开发者
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,可以看到详细说明和教程;代码块并不是简单的xml配置,而是可以使用ruby编程的,功能很强大
HTML部分目前只能通过代码块扩展,代码块的扩展包括标签和属性2部分,在工具-扩展代码块-HTML里有说明
HBuilder7.1起支持中文符号自动替换为英文符合;中文符号免干扰指在编写html/js/css代码时,如果处于中文输入法状态,自动将必要的符号如
:;。等转为: ; .等如下图:
1.在HTML区域输入《
2.在js区域输入。
3.在css 输入 》如不需要此功能,请在工具-选项-HBuilder-编辑器的对应html/js/css/json编辑器类型中调整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可通过菜单直接操作的命令
运行-外部工具-外部工具配置如下图
选择程序菜单,点击“新建启动配置”如下图A处为外部的exe(请输入exe的全路径)或命令行命令;B处为执行此命令所处的目录;C处为执行命令需要的变量点击变量按钮,可使用HBuilder内置的变量,如下图
以上图为例,project_name变量指的是资源所在的项目;配置完毕后点击应用即可保存此外部工具,如下图上图配置的外部工具,点击运行的效果相当于在CMD命令行下,切换到E盘根目录,运行点击运行,E盘根目录生成1.txt/2.txt/3.txt如下图依次点击工具-选项-常规-快捷键,在过滤文本中输入外部工具,回车如下图
绑定自己喜欢的快捷键即可1.切换到你想用快捷键的视图(如开发视图/边改边看视图)
2.点击视图,定制透视图
3.选择命令选项卡4.选择SVN或Git5.设置成功后会在帮助菜单前生成SVN、Git等菜单
6.在工具-选项-快捷键中为SVN、Git等操作绑定快捷键即可
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.编辑大文档时,最好关闭大纲的实时同步功能;大文档的大纲结构会很多,每次移动光标实时计算大纲的位置会有点慢。可以在需要定位时再点一下同步。大纲实时同步在大纲视图的右上角的下拉菜单里
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+左键转到定义非常好用,而文本编辑器就做不到了
转载地址:http://pcmix.baihongyu.com/