精华内容
参与话题
问答
  • HBuilder 详细使用教程

    千次阅读 2018-12-20 09:44:24
    https://blog.csdn.net/YouYou_GO/article/details/79670798 本人做笔记参考使用
    展开全文
  • HBuilder使用教程及下载,无需编程可以直接生成安卓和IOS应用,内附APP打包H5应用的详细教程图片及百度盘下载。
  • HBuilder 使用教程

    千次阅读 2018-11-27 14:04:44
    什么是HBuilderHBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。...

    什么是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


    更多挖宝

    • 跳转助手、选择助手、转义助手、快捷键助手,让你手不离键盘。

    • HTML5+支持、手机真机连调、云编译,方便开发跨手机平台的APP。

    • 更多精彩功能:重构 | 大纲 | 任务 | 版本历史 | 内置webserver | 实时升级 | 安全工程管理 | 包围 | 掩码转换 | 智能纠错 | 折叠代码 | 转到定义 | 格式化代码 | URL编解码 | 进制转换 | 自动闭合。

    • 还不满足?下载插件增强更多功能,高手更可开发插件,并共享插件造福所有开发者。

    • 来源:https://www.runoob.com/w3cnote/hbuilder-intro.html

    展开全文
  • HBuilder教程

    2017-02-07 11:07:00
    2019独角兽企业重金招聘Python工程师标准>>> ...

    HBuilder教程

    文档 http://ask.dcloud.net.cn/docs/

    HBuilder mui开发示例
    转自【B5教程网】:http://www.bcty365.com/content-146-2453-1.html

    http://www.bcty365.com/content-146-2453-1.html

    mui 即时通信、im问题汇总。环信、融云怎么集成

    http://ask.dcloud.net.cn/article/649
    转自【B5教程网】:http://www.bcty365.com/content-146-5500-1.html

    http://www.bcty365.com/content-146-5500-1.html

    转载于:https://my.oschina.net/u/1266171/blog/833147

    展开全文
  • 使用HBuilder打包App教程(图文教程)

    万次阅读 多人点赞 2018-11-30 12:04:00
    使用HBuilder打包App教程(图文教程) 1:新建app,或者打开“文件 - 新建 - 移动APP” 2:然后填写应用名称以及位置,默认空模板完成 3:默认生成以下文件,把除了unpackage和manifest.json以外的都删掉 4:把自己...

    使用HBuilder打包App教程(图文教程)

    1:新建app,或者打开“文件 - 新建 - 移动APP”
    在这里插入图片描述
    2:然后填写应用名称以及位置,默认空模板完成
    在这里插入图片描述
    3:默认生成以下文件,把除了unpackage和manifest.json以外的都删掉
    在这里插入图片描述
    4:把自己的项目文件全部放进来

    在这里插入图片描述
    5:双击打开manifest.json文件,页面入口默认是index.html,你可以把自己的首页改成index或者点选择选中.
    在这里插入图片描述
    6:在下面选择图标设置,点击+号选择你的app图标必须是.png格式的,选好后点击自动生成所有图标并替换

    在这里插入图片描述
    7:启动图片,启动选项默认就好
    在这里插入图片描述
    8:在unpackage下的res下新建个文件夹取名splash,把我们的app启动图片放进去(注意同样是.png格式的且注意尺寸大小)

    在这里插入图片描述
    9:选择相对应的尺寸大小的启动图片
    在这里插入图片描述
    10:SDK配置:工具自己的需要配置,没有就默认就行。
    11:模块权限配置:一样有需要就配置,没有就默认就行。(报黄报红的要删掉)
    在这里插入图片描述
    12:页面引用关系,点击确定
    在这里插入图片描述
    13:点击发行 - 发行为原生安装包
    在这里插入图片描述
    14:选择好后点击打包

    在这里插入图片描述
    在这里插入图片描述
    15:点击确认就完成了.
    在这里插入图片描述
    16:看下效果,点击手动下载
    在这里插入图片描述
    17:我直接在虚拟器上安装了,懒的发送到手机了
    在这里插入图片描述
    启动画面
    在这里插入图片描述
    app里面的效果

    在这里插入图片描述 在这里插入图片描述

    电脑上的效果
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • HBuilderX从入门到发布教程

    万次阅读 2019-09-20 10:57:44
    一、环境安装和配置 1、下载HBuilderX工具 https://www.dcloud.io/hbuilderx.html 解压后打开开发工具 下载插件,打开工具-》插件安装 2、下载微信小程序ide工具 ...安装微信小程序开发工具,这里有个坑,我们系...
  • Hbuilder 教程

    万次阅读 2014-12-16 15:49:25
    HBuilder不仅仅提示全面的语法,非语法的各种候选输入也都能提示。包括图片、链接、颜色、字体、脚本、...A:软件自带HelloHBuilder项目,该项目为教程项目(如果不小心删除了不要担心,可以在新建WEB项目时,使用Hello
  • HBuilder安装教程

    千次阅读 2019-07-28 01:35:42
    1.下载教程 1.1:HBuilder的简介: HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了...
  • 卸载手机上的Hbuilder

    2020-03-21 23:58:24
    adb uninstall io.dcloud.HBuilder
  • hbuilder安装教程

    2020-05-29 15:04:28
    【安装教程】 1、其实该软件的安装并不会像想象中的那么复杂。下载好安装包后将其解压(安装包一般会以一个压缩包的形式存在) 2、打开解压后的文件夹,找到一个叫做“Hbuilder.exe”的可执行文件,这个可执行文件...
  • 删除Open With HBuilder X

    千次阅读 2018-06-13 10:41:28
    曾经因为某些原因,试用了半个小时的HBuilder,虽然立即卸载删除了,但以后右键点击文件想要打开的时候,这句Open With HBuilder X就会出现,这极大的刺激了我这强迫症患者。 网上说,新版的HBuilderX里面有个reset....
  • hBuilder培训资源视频教程汇总

    千次阅读 2017-05-10 16:09:00
    DCloud对开发者的学习支持分3个层面:官方文档、三方专业培训、网友经验分享 DCloud的精力主要在做产品,配套的文档也会一直完善好。...同时网友的学习经验分享也很重要。本文汇总这些资源,希望更多的培训机构加入...
  • HBuilder安装与使用

    万次阅读 多人点赞 2018-06-05 16:10:44
    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。1 安装1) 官网下载地址:http://www.dcloud.io/2) 安装:解压zip文件到指定目录3) 运行安装文件下的exe文件4) 第一次使用需要登录(可选),不...
  • 通过实际的商城app开发前端页面的案例向大家介绍了如何使用mui进行app开发。
  • HBuilder详细安装教程

    2020-09-19 16:38:22
    1.输入网址进入官网 https://dcloud.io 2.点击第一个图标 ... 4.选择适合自己电脑的版本 5.下载后解压并双击文件夹中的HBuilder 6.点击后会弹出一个框,选择“暂不登录” 接下来就可以新建项目自己玩耍啦 ...
  • HBuilder mui入门教程——(1)简介

    万次阅读 2017-07-02 15:31:50
    从周一开始接触mui框架,到今天完成一个简单app的开发,时间刚好一周,mui框架丰富的插件集成和方便的调用功不可没,但是在开发过程中也遇到了一些坑,为方便以后查看,做个记录,也希望能帮助到别人更好了。...
  • HBuilder软件下载及安装教程

    万次阅读 2019-04-28 14:13:03
    Hbuilder是由我国开发的一款开发网页的编辑器,使用起来及其方便容易上手,而且在Hbuilde全语法库中,可以清楚地看到对各个浏览器、各个版本的支持情况,集成了大量语法快,少敲多行代码,体验飞一般的感觉。...
  • HBuilderX安装使用教程

    千次阅读 2020-06-20 15:58:42
    HBuilderX安装使用教程 HBuilderX是HBuilder的升级版。它是是DCloud(数字天堂)推出为前端开发者服务的通用IDE,或者称为编辑器。HBuilderX的功能从下图可以直观的了解个大概: 官网地址: ...
  • 本课程为基于MUI的混合模式app开发系列课程的MUI基础课程部分,主要介绍了MUI的各种控件的基本使用。让大学在实际操作中掌握MUI的基础控件应用,为app开发打下基础。...
  • Hbuilder X下载及安装教程

    千次阅读 2020-05-15 21:15:12
    1.找到下载下来的文件HBuilder X 2.将压缩包“HBuilderX.1.7.0.20190314.zip”解压 3.双击打开”HBuilerX“ 4.在文件夹下,找到HbuilderX.exe可执行程序,双击即可启动程序。 5.进行简单的设置后,新建一个html...
  • 当你做完一个网页想要让它打包成一个APP的时候,可以参考此文档。此教程是我在工作中经常使用的一种方法,并且实践过无数次。
  • HBuilder离线打包教程

    千次阅读 2015-03-31 18:40:39
    教程地址:http://ask.dcloud.net.cn/docs#http://ask.dcloud.net.cn/article/41 注: 配置应用使用的5+功能模块(可选) 那一个模块的东西一般不作处理
  • HBuilder开发App教程06-首页

    万次阅读 2015-07-29 23:16:43
    正如前面提到的,本教程会以滴石作为范例进行讲解, 有兴趣的可以先行下载体验一下,或者下载源码研究下。 新建项目 打开HBuilder,在项目管理器中右键——新建——移动app,或者直接ctrl+n,a, 见到如下...
  • Hbuilder快捷键教程

    千次阅读 2017-10-09 16:28:16
    /*注:本教程针对HBuilder5.0.0,制作日期2014-12-31*/ 创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter) 中途换行: 'Ctrl+Enter' 设置charset: m e 6 Enter 引用外部...

空空如也

1 2 3 4 5 ... 20
收藏数 2,334
精华内容 933
关键字:

hbuilder教程