HBuilder完成webApp入门(1)

一、什么是HTML5
HTML5并不是一门编程语言,也不是一个工具,它只是HTML的升级版本。简单的说,HTML5其实就是新的页面标签库。

但是如果仅仅如此,那么HTML5就没有出现的必要了。所以,HTML5除了新的标签以外,还包括了很多其他新的东西,如画布,视频和音频的播放,本地存储等等。
这里有HTML5详细教程,初学者可以一看: http://www.w3school.com.cn/html5/index.asp

二、学了HTML5标签,就完事了么?
如果你仅仅学会了标签,那么和普通的网页没什么区别。那怎么才能发挥HTML5的优势? 答案就是你需要掌握 javascript。HTML5中新鲜玩意:画布,本地存储等,都需要用javascript 来操作才玩得转。

三、掌握上面两个,我就可以做移动开发了?
没错,掌握上面两个,你就可以做一个HTML5的网站了---是网站,不是APP。
你可以使用HTML5做动画效果,做好看的报表,在本地存储数据等等。
利用javascript, HTML5就好像一个富客户端的平台,看你去如何利用它的特性了 但是,请记住,你做的只是一个网站。也就是说,你必须在浏览器中访问它才行。关掉浏览器,你的应用也就结束了。这和安装在我们手机里的APP程序是有本质区别的。如此WebApp就来了

四、什么是WebApp?
举个例子吧,易企秀是可以制作H5页面的,制作出来的H5页面就是移动端web;如果可以把这个H5页面打包成app,那就是webapp。本质上都是web,都是利用html、css、js构建的网站,不同的是,webapp利用框架技术等让你有了在使用App的感觉(比如页面不跳转刷新等)

五、如何去做一个WebApp
这方面做的最好的是 HBuilder,http://www.dcloud.io/ ,使用它,你可以使用HTML5快速地创建APP应用程序。

六、什么是HBuilder
它的网站:http://dcloud.io/

如果单从上面的页面来看,它就是一个开发工具,包含了javascript以及HTML的语法,你用它写web程序的时候,它会给你自动提示或者补全。从工具的角度来说,这个东西确实不错,谁能全记住那些关键词呢?但其实,工具只是它的一小部分而已。进入它的文档部分:http://ask.dcloud.net.cn/docs会发现里面很多项目。下面主要说说这些文档的阅读方式。
HBuilder
进入这个项目中,会看到“入门”,“代码提示”等项目。
这个项目主要介绍的就是HBuilder这个工具怎么用。重要程度基本上和“Eclipse怎么用”差不多。建议看一看。

七、什么是HTML5+
HBuilder所在的组织(公司),制定了HTML5+规范,然后第一个实现了这个规范,这就是HBuilder的核心。HTML5+,它已经可以让web应用变得几乎和原生应用一样快了这个标准的详细内容请访问 http://www.html5plus.org/doc/h5p.html

先介绍这些,具体webApp实现内容见下一篇^ ^

时间: 2024-10-18 08:43:17

HBuilder完成webApp入门(1)的相关文章

HBuilder完成webApp入门(2)

一.HBuilder的下载地址:http://www.dcloud.io/,点击那个"DownLoad"就可以 了 二.假设一切顺利,启动HBuilder后,大家会看到如下的界面 点击新建移动APP: 接下来就会弹出一个选择模板的对话框: 默认的模板选项是"空模板".不包含任何的HBuilder提供的画面组件,要选择"mui项目".它包含了 mui (默认提供的画面组件,也就是CSS 和 Javascript). 是不是不知道MUI是什么了(简单

Hbuilder开发app实战-识岁01-actionsheet实例

前言 之前写了HBuilder开发App入门-滴石,相信大家看完后应该可以入门了, 之后会做一些简单的app,把nativejs一些常用的功能都过一遍,这样以后做app就没什么难的了. 识岁 借助与face++的接口,做了一个人脸识别app,准确性和微软比确实差点, 主要用到了: 1.actionsheet的原生实现 2.选择本地照片 3.使用摄像头拍照 4.使用uploader上传文件 5.调用face++接口进行人脸识别 6.七牛云上传的实现 actionsheet 实现 actionshe

(一)半小时开发一个APP

[前言] HPP是什么? HybirdApp的简称,详细介绍参见:HPP--让所有中小企业拥有自己的APP 说白了就是用html+css+js开发app,包括ios和android版本. HBuilder 具体实现方式比较多,自行百度吧,就不一一叙述了, 之前比较推荐的HBuilder+mui+nativejs那套,相关资料: 如何快速开发出一个高质量的APP--创业谈 HBuilder开发App入门-滴石 Hbuilder开发App实战1-识岁 http://uikoo9.com/dishi

WebAPP设计和入门开发需要注意的5个事项

WebAPP设计和入门开发需要注意的5个事项 WebApp是针对NativeApp而产生的,Webapp最直接明了的定义就是一个针对Iphone.Android优化后的移动网站,它使用的技术无非就是HTML或HTML5.CSS3.JavaScript,服务端技术JAVA.PHP.ASP等. 今天,25学堂需要跟大家浅谈WebAPP设计的五个注意点及如何去设计webAPP 1. 必须要适配所有的智能手机设备 移动设备的屏幕是各式各样的,对设计影响较大的主要是屏幕分辨率.尺寸.屏幕方向这些因素.现在

移动web:原生开发打包,嵌入h5页面 webApp:全部都是H5开发的应用 混合APP:使用第三方开发平台从apicloud,appcan,hbuilder等开发,cordova技术打包 原生APP:就是eclipse开发或者studio等工具开发

论坛43213 移动端webApp兼容问题解决 谈谈App混合开发 Hybrid APP混合开发的一些经验和总结 PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用. Cordova提供了一组设备相关的

webapp开发之bui入门环境搭建及执行npm命令报错解决

引言: BUI是一个WebApp开发使用的框架,使用这个框架开发呢的app支持跨多个平台部署,这样方便很多.要使用BUI,首先要安装以及部署环境,过程中确实很让新手头疼,记录一下,望后人能少踩坑. BUI的官方网站是:BUI(含快速入门教程) 1.下载完整的工程模板 : 步骤:下载多页开发包 开发包下载--解压. ps:网页中两个选项,单页开发包和多页开发包.选择多页开发包下载,下载后解压.可以看到一个完整的工程目录. 但是此时的情况就像是在idea编辑的java项目一样,仅仅是把代码写好了,或

Hbuilder快捷入门

/*注:本教程针对HBuilder5.0.0,制作日期2014-12-31*/创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter)中途换行: 'Ctrl+Enter'设置charset: m e 6 Enter引用外部js: s 2 Enter 'Ctrl+Enter'创建js区块: s Enter创建函数: f u n 3 (或者 f u n n Enter)为函数命名:W h o i s E跳转到函数末尾: End 'Alt+['

WebApp开发入门必备知识

本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性.经过分析和总结,我们可以得出这么一条公式: 1 CSS pixels = (devicePix

HBuilder webApp开发 Websql增删改查操作

来源:http://blog.csdn.net/zhuming3834/article/details/51471434 这段时间公司要求我们做原生iOS和安卓的都转做H5开发APP,使用的工具HBuilder.公司这么要求我们也就只能转行做了.大家都是小白,好在公司有两位H5大神,他们先给我们一些代码看看,所以,我们上手也比较快.在做APP的过程中用到了一些本地存储,关于本地存储大家可以看看<App离线本地存储方案> .里面我只说说Web SQL,因为里面的localstorage,plus