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从下载到使用的更多相关文章
- hbuilder的使用
今天在群里看群友提及了hbuilder,下载试了下,发现确实会有些代码敲起来方便多了.也帮助我自己发现uft8和保存的时候选择字符重要,不然乱码,很窝心.
- HBuilder:最快的Web开发IDE
这里给大家介绍一个个人觉得最好用的web开发工具:Hbuilder. HBuilder是DCloud推出的一款支持HTML5的Web开发IDE.快,是HBuilder的最大优势,通过完整的语法提示和代 ...
- 使用HBuilder+MUI+Flask后端服务器框架+Mongodb数据库开发手机APP
1.开发准备HBuilder: 1.下载安装HBuilder2.创建APP项目 3.代码示例: <!doctype html> <html lang="en"&g ...
- hbuilder中的wap2app (将M站快速转换成App的开发框架)使用过程有关原生标题的关闭
首先,我最近在做有关将M站快速转换成App的项目,在网上看了很多,最终结合同学的推荐,我选择了hbuilder,有关于hbuilder的下载还有具体使用方法,官网都有详细的说明,我就不介绍了,我重点介 ...
- Hbuilder环境下配置php
XAMPP的安装 https://blog.csdn.net/qing666888/article/details/81914389 安装并配置好Xampp后,在Hbuilder中下载php插件,工具 ...
- MUI(1)
今天小编用HBuilder+MUI开发移动APP,不用Android原生也不用IOS原生,仅仅用HTML5+MUI.小编也是初学者所以如有不准确的地方望大家指出帮助小编改正,同时也可以促进大家的深入学 ...
- uni-app—从安装到卸载
uni-app实现了一套代码,同时运行到多个平台.支持iOS模拟器.Android模拟器.H5.微信开发者工具.支付宝小程序Studio.百度开发者工具.字节跳动开发者工具 工具安装 开发uni-ap ...
- wap2app(一)-- 网站快速打包成app
工具:HBuilder,下载地址:http://www.dcloud.io/ 下载并安装HBuilder后,打开编辑器,选择:文件 -> 新建 -> 项目,出现如下图: 选择wap2app ...
- HTML5 Plus移动App(5+App)开发入门指南
HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和 ...
随机推荐
- 使用php+swoole对client数据实时更新(上)
如果想对一个列表做实时的更新,传统的做法是采用轮询的方式.以web为例,通过Ajax定时请求服务端然后获取数据显示在页面.这种方式实现简单,缺点就是浪费资源. HTTP1.1新增加了对websocke ...
- iOS开发——高级篇——通讯录
一.简介 1.如何访问用户的通讯录1)在iOS9之前有2个框架可以访问用户的通讯录AddressBookUI.framework提供了联系人列表界面.联系人详情界面.添加联系人界面等一般用于选择联系人 ...
- Python自动化之一对多
一对多 建立一对多关系之后(也就是加了外键),会在字表里面多一个"外键字段_id"这个字段 查询 #_*_coding:utf-8_*_ from django.db import ...
- php自动加载
初學PHP時,最早會面對的問題之一就是require與include差別何在?require_once與include_once又是什麼?弄懂這些問題之後,如果不使用framework,直接開發,便常 ...
- dex文件格式二
一. dex文件头 (1) magic value 在DexFile.c dexFileParse函数中 会先检查magic opt 啥是magic opt呢? 我们刚刚从cache目录拷贝出来的 ...
- [k]优雅的css
1.图片文字列表 (2016-01-25) 1.1 实现效果图如下: 1.2 代码: html:( 代码十分优雅哦! ) <ul> <li class="step1&quo ...
- Angular2 架构
1. 说明 Angular 2 是一个用 HTML 和 JavaScript (或者可以编译成JavaScript)来构建应用程序的框架.该框架包含了一系列的库. 在 Angular 里,我们这样 ...
- 设置UITableView的separatorInset值为UIEdgeInsetsZero,分隔线不最左端显示的问题
一.问题描述 UITableView分割线要显示到最左端 查看UITableView的属性,发现设置separatorInset的值可以自定义分割线的位置. @property (nonatomic) ...
- Mybatis Collection查询集合只出现一条数据
1.原因 如果两表联查,主表和明细表的主键都是id的话,明细表的多条只能查询出来第一条. 2.解决办法 级联查询的时候,主表和从表有一样的字段名的时候,在mysql上命令查询是没问题的.但在mybat ...
- .Net中使用无闪刷新控件时提示框不显示
今天做提示框的时候一直不显示,让我郁闷好久,晚上吃饭的时候问了同事一下,他给了一个思路, 他说可能是因为由于页面中的无闪刷新导致的结果:百度了一下真找到了解决方法 在页面中存在无闪刷新控件的时候提示框 ...