html5+_html5+规范 - CSDN
精华内容
参与话题
  • HTML5+ API

    千次阅读 2019-05-21 19:52:49
    HTML5+ API:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.getLaunchWebview
    展开全文
  • 谈谈HBuilder以及HTML5+

    千次阅读 2018-07-05 16:26:51
    随着HTML5规范的发布以及chrome、Safari、firefox等浏览器的大规模支持,HTML5的开发得到了广泛使用,随后延伸到了APP端的开发。这一两年来,使用HTML5在A
    原文地址为:谈谈HBuilder以及HTML5+

          随着HTML5规范的发布以及chrome、Safari、firefox等浏览器的大规模支持,HTML5的开发得到了广泛使用,随后延伸到了APP端的开发。这一两年来,使用HTML5在APP端的开发形成了一股不小的热潮,让原本许多web开发的工程师们也能以比较低的学习成本踏入了App端的开发。在一些极端的情况下,还能实现一次开发,多平台发布的优势。在这么一个优势驱使下,一些优秀的hybridApp更是带动了这一潮流的涌动。

           在这之中,老牌的hybrid App中间件有phoneGapAppCan等,其中phoneGap只提供了js到Android API的中间层转换,也就是说开发者还需要去找个js组件与phoneGap结合下,才能快速开发出有模有样App,不然事件响应和样式,可以把人整死;对于AppCan呢,据说是国人在phoneGap的基础上做了二次开发的产物,具体就没去研究了,提供有的事件响应和样式的框架包给使用,但是开发文档写得是在不敢恭维,不过聊胜于无。

           另外还有个比较重要的事要说下,phoneGap与AppCan都是基于单Webview模式的,简单来说,也就是所有的界面都是运行在一个标签页上的,在页面切换之间,很容易就出现性能以及白屏问题,我在测试的时候发现几乎每次跳转都是白屏,跳转时的界面渲染也有延迟感。简单提及一下,我的测试机是小米三,应该不存在太大的性能问题。

           在选技术的过程中,发现了DCloud出的HBuilder,顺藤摸瓜找到了相应的HTML5+以及mui框架。下面说说我这几个月来得感受吧。


    HBuilder:

    先来看看官网上的图片:

    HBuilder是一款深度集成eclipse的IDE编辑器,但其主要是集中在web端的开发,不能进行Java等后台开发,也不需要集成Android SDK。其集成了对通用js、jquery、HTML5+、mui等语法的提示功能,还有很多快捷键,在编码过程中可以实现飞一般的感觉,十分有geek的感觉。比如当我想打document.querySelectorAll("")的时候,我只需要键入dq然后回车就行,光标还会定位到双引号之间,省了很多打繁琐代码的时间。虽然很多快捷键都有一套规律可循,但还是需要动脑子想想的,比如我就觉得打document.querySelector("")就比较疑惑,实在不知道该怎么快速键入,可能是我没发觉到的原因吧,或者需要自定义快捷键,我没去折腾。还有就是一些快捷键比较反eclipse,比如【转到定义】,eclipse是Ctrl+右键就行了,而HBuilder需要Ctrl+Alt+D官网首页有飞一般编码的演示,大家可以去看看,这个算是此IDE的一大特色吧,我就不多说了

    HBuilder也集成了eclipse market,用过eclipse的都知道这个是好东西,我就不多说了。

    说到这,也许有些读者会对HBuilder存在疑惑:只能作为HTML开发的IDE怎么做成apk。DCloud提供了一种简单的方式【云打包】,只要开发者信得过DCloud,完全就可以把代码上传然后在云端打包,等短暂的时间就打包并下载到本地了,十分方便。但是,如果你不想进行云打包也是可以的,只不过又回归到正常的Android开发过程了:先有本地Android SDK平台->然后是eclipse的Android支持->新建一个Android程序->导入HTML5+的jar包->开发程序->按正常的Android模式在本地打包。整个过程中,除了开发与正常的Android开发不一样之外,其他均一致。

    但是按照上面的打包方式,就比较纠结了,比如我很喜欢用HBuilder那飞一般的编码快捷,但是又需要用到本地打包,那我该怎么办呢?确实比较难办,现阶段也没什么比较geek的解决方法。我比较土,在HBuilder里写HTML,然后再到eclipse中打包。真是土到家了,DCloud以后应该要去解决这个问题才对,不然geek不起来了。

    我个人是觉得,除非是比较小型的应用,可以完全用HTML实现,不然本地打包是必须的。主要还是因为HTML5+中好多Android SDK的API都没实现,比如最最常用的微博登陆微信登陆都没有,必须自己去写插件,一旦写插件了,本地打包就是必须有的了。想想也是醉了。


    HTML5+

    HTML5+是对接AndroidSDK与页面的中间件,用于页面通过js调用底层的SDK接口,比如弹出个窗口、拍照、录音等。

    据我查阅其API,大部分的常用接口都已经实现了,只不过当你用到很细致的时候,你就会想抓急了。比如我使用的文件上传功能,不知道为何会出现两次请求到后端,但是第一次请求是非法的,第二次请求才是正常的文件上传,而第一次请求的处理失败不会影响第二次请求的成功处理,当时我查了半天论坛,只看到有人提问没人回答,于是我只能做忽略第一次请求的处理,保证不出现异常。后来某DCloud内部大神出来说是因为上传模块支持自定义协议,所以才有了第一次请求,如果用不上,遇到就直接返回200就好了...我¥%¥……#,这个坑大啊,文档里也没有说明,真不知道还有什么大坑在等着。

    API接口就不说了,反正用到的时候去查就行了,里面都有简易的例子,要是想深入就踩踩坑行了,没有DCloud团队的支持,估计很累。

    来简单说说插件的开发。因为Android SDK的API众多,据说原生高达40多万,就不说还有其他第三方的了。为了方便开发者对SDK的深度支持,HTML5+可以通过一定得接口规范实现js->java的接口映射。只不过,坑又来了:0.XX版本的跟1.XX版本的,怎么改动这么大,几天不见,我还以为之前看错代码例子了...代码例子都随着HTML5+的SDK离线包里有,我就不贴图了。

    再来说说HTML5+的一个高级点的用法【在原生Android开发中嵌入HTML5应用】。当然,这个是必须有的,又不是人人都喜欢整个应用都用HTML5,这不蛋疼么。其支持三种模式:独立应用模式【也就是整个应用都是HTML5】、widget方式、webview方式。后两种模式见名知意,就不多说了,知道有这个东西就好。


    mui

    这个是三个框架中,最能给用户牛逼感的东西,因为这货直接面对APP用户,也就是主打界面端。

    mui分mui.js与mui.css两部分,mui.js对HTML5+做了一层封装,就有点类似于jquery与dom的关系,而mui.css则是一套高仿iOS界面的样式,看起来牛逼哄哄高大上的。

    mui.js中,已经对mui.css中的很多样式响应做了很多处理,使用体验也不错。也就是当你成套使用mui.js与mui.css的时候,觉得开发如有神助,不然就又想死了。这绝对是真心话,事件的响应处理远远比预想的麻烦得多,在Android中很多已经预设好的,在web上都得自己去实现,比如在弹出菜单之外的地方点击时,菜单要消失这一样的。之前美工MM不懂,我也不懂,她就没用mui.css做静态页面,然后我在开发时,就各种醉了。

    mui大约实现了如下这些,包括但不局限于,因为文档写得也不够特别详细,大部分时候不如去看Demo里面的代码:








    现在说说我所了解到的HTML5+的优势与劣势

    优势就是HTML5之间的界面切换,是基于多webview模式的,流畅度是棒棒的,而且单界面上还可以实现多webview模式,也就是说title可以单独是一个webview,然后列表内容是一个webwiew。流畅度简直完胜其他老牌的hybrid app中间件。而且从IDE到中间件到js/css都有一整套的框架,可以做到流畅度的兼容优化,在主流机子上面以几乎逼近原生Android的速度了。完美解决老牌hybrid app中间件的病痛。

    现在说劣势,HTML5+的API不完善啊,离线打包折腾起来太麻烦啊,无法监控到Android的系统log啊,HTML5+的log经常不明所以啊。

    最最让我痛心的两个问题是:

    • 当我界面是由多个webview组成时,这个webview的界面无法出现在另一个webview中,比如常用的右上角的more按钮,点击会出现菜单栏,如果内容是单独的webview,菜单栏居然无法居于内容上显示出来,据论坛上的说法就是自己在内容页中出现菜单栏好了。看到这,我又抓狂了。

    • 很多默认响应都没有,都需要自己去实现,好痛苦,想想还是Android大法好了

    总的来说,我的使用感触大体差不多就是这样了,用起来有利有弊,流畅度确实十分吸引人,但是坑也有点多就是了,如果论坛能活跃点,也许都能找到填坑的方式,但是论坛都没什么人气。如果用作Demo快速成型倒是挺不错的选择。


    来自https://m.oschina.net/blog/379924


    转载请注明本文地址:谈谈HBuilder以及HTML5+
    展开全文
  • mui开发app之html5+,5+Runtime,5+sdk,native.js

    千次阅读 2017-05-06 13:09:43
    说说几个名词html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它html5+:所谓“+”,扩充了html5原本没有的app功能对象,“中国html5+产业联盟”规范了html5+并且...

    说说几个名词

    html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它

    html5+:所谓“+”,扩充了html5原本没有的app功能对象,“中国html5+产业联盟”规范了html5+并且实现他们,html5+是对常用的原生API的js封装,包括相机,陀螺仪等31个常用API(android和ios通用),这些html5是没有的!

    native.js:native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。上面的html5+就是他的一个实现好的子集。native.js不是js框架,是技术!

    如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展到手机App的原生世界。

    5+Runtime:native.js的运行时,相当于.net对C#,JRE对于JAVA,是一个运行环境,有把Native.js映射到java,oc代码的原生API功能,从而实现原生的调用。

    对于5+Runtime和native.js的关系可以理解成:native.js是一种语言(语法基于js),5+runtime是这语言的运行环境!

    html5+sdk:软件开发工具包,它和android sdk,ios sdk一样

    HTML5+ 的SDK,是把5+ runtime封装为原生SDK,它有3个用途。
    1. 使用HTML5+ SDK实现本地打包。
    2. 通过原生代码扩展HTML5+ runtime的功能。
    3. 在现有原生项目中使用HTML5+ SDK替换原有的webview,以获得更强的web增强表现。

    这里写图片描述

    然后:当我们使用dcloud的mui框架做应用开发的时候

    有这么几种情况!

    仅仅使用html5的语法:

    即浏览器级的html5+js+css,不需要打包成app,可以使用mui框架里的css样式和部分js,与开发传统的wap手机页面相同,相似的其他框架有诸如:jquery mobile,amazeui等等。

    这样开发只适合制作微信公众号,手机网页等等,并且只能在浏览器中使用应用,不过相比于html4已经强大不少。

    需要在mui.init()之后才能使用mui这个对象,调用其中部分的js方法,为什么说部分是因为。。。请往下看!

    使用html5+提供的plus对象

    mui中有个plus对象,他不是简单的使用html5的功能,而是提供了一个叫html5+的API集,并且将他们封装在了这个plus对象中,里面有陀螺仪,map,定位,相机,文件流等等的原生功能调用接口!

    plus这里面的对象就必须在mui.plusReady()之中使用,,而上面说浏览器级别的只能使用mui部分的js对象和方法就是这个原因!如果不是用html5+,你并不需要使用plusReady方法,只需要在用mui之前mui.init()一下就可以,这也是经常有人问的mui.init()和plusReady()的区别。

    mui.plusReady()是为“html5+”而生的,最终通过“html5+sdk”打包成了app级别才能使用,因为这plus对象里面的东西最终会被映射成为java(android sdk),objective-c(ios sdk)的代码,这也是native.js的技术咯!

    说太多也不好理解,这些底层的实现都已经由dcloud团队领导的“中国html5+产业联盟”(社区)实现了,我们只要知道我们写的plus对象的js代码都会被转化为原生代码,app就能实现很多原生功能的调用。

    注意:plus这些东西在浏览器级别是不支持的,所以不可以在普通浏览器中调用这个plusReady,以及plus.xxx.xxx方法等,浏览器用mui框架只是一部分可用的而已(刚刚说过了,再啰嗦一下)!

    要使用html5+就要求我们打包成app(使用html5+sdk),有5+Runtime,这样即可运行plus对象下的对象和方法,这个打包可以由hbuilder实现。(称之为:调试基座,html5+的功能要在调试基座中实现,即5+runtime)

    这些都是app级别的了

    html5+规范也不够用了

    完全有这种可能,毕竟html5+是规范性的,不能什么原生API都往里面塞对吧,他实现的是基本的,常用的一些原生API调用,比如相机,定位,陀螺仪,文件流等等等。。。
    (有31个,详细请看:http://www.html5plus.org/doc/h5p.html

    其实真正的原生语法有几十万个,提供API数不胜数,不可能一一调出来,html5+把几个常用的被规范化提出来而已。

    要使用其他的原生语法并映射成为js就要用到比html5+更厉害的native.js了

    native.js是对html5+的扩展(超集),是映射到原生代码的原理,交给原生代码去实现原生开发的功能,可以简单说成是把js代码转化为java代码了,当然java也不过是JVM虚拟机上跑的,最终还被转换了二进制,计算机编程实现就是这样一层一层往下丢的啦!

    注意:native.js不是一个js框架,和node.js命名一样,是一种技术实现,专门把js映射成底层代码,或者说是js在app开发上的一种实现!就像node把js带入了服务器和系统领域一样的道理。

    使用native.js需要对原生语法,api十分的了解,你至少要学过android或者ios开发,否则你只能copy别人代码也不知道为什么这么写!

    下面举个例子,就懂了为什么你不懂原生就不能搞native.js:

    function plusReady(){
        // 导入Native.js需要的原生对象
        Activity = plus.android.runtimeMainActivity();
        BitmapFactory = plus.android.importClass("android.graphics.BitmapFactory");
        StringBuffer = plus.android.importClass("java.lang.StringBuffer")
        Byte = plus.android.importClass("java.lang.Byte");
        CompressFormat = plus.android.importClass("android.graphics.Bitmap.CompressFormat");
        bBitmap = plus.android.importClass("android.graphics.Bitmap");
        ByteArrayOutputStream = plus.android.importClass("java.io.ByteArrayOutputStream");
        Base64 = plus.android.importClass("android.util.Base64");
        //viewClass = plus.android.importClass("android.view.View");
    
        document.getElementById("btGetCapture").disabled="";
    }

    看到没这是一个html5+没有的截屏功能,是通过native.js扩展实现的

    里面出现了大量的importClass,写过java就明白了,这不是java在导入包吗??

    是的,native.js就是实现了js导入java包,并且最终使用java的代码来实现功能

    总之
    1. native.js使得开发html5 app更加接近原生,因为他可以用原生一样的语法调用原生的对象(映射)
    2. 要懂原生开发才能自由定义或者使用已有的API功能实现
    3. 个人建议是能不用native.js则不用,多用已经实现的html5+(其实这些也是native.js实现了,不过被封装好了不用自己去import什么的)

    参考别人做好的native.js对原生功能实现:http://ask.dcloud.net.cn/article/114

    展开全文
  • HTML5+开发移动app教程1-环境搭建

    万次阅读 多人点赞 2015-02-04 13:46:00
    本教程是介绍使用html5+(nativejs)和mui开发移动app(包括android和ios), 感兴趣请继续,不感兴趣请跳过,大部分来自官方api,增加了一些自己的总结。 HBuilder 说明 用h5+开发app的环境,也是ide,对...

    前言

    本教程是介绍使用html5+(nativejs)和mui开发移动app(包括android和ios),

    感兴趣请继续,不感兴趣请跳过,大部分来自官方api,增加了一些自己的总结。


    HBuilder

    说明

    用h5+开发app的环境,也是ide,对eclipse做了深度定制,以前使用过eclipse或者myeclipse可以直接上手

    官网

    http://www.dcloud.io/

    下载

    在官网上点击下载,安装好后可以自己将文件夹压缩成zip,方便以后使用,解压就可以用

    依赖

    估计会需要jre环境?没有试过,如果需要请自行百度搜索jre安装方法

    上手

    打开HBuilder之后默认会有一个项目“HelloHBuilder”,里面有HBuilder使用的介绍

    快捷键

    HBuilder一大亮点是快捷键,但是如果习惯了自己之前的快捷键会很别扭,需要自己在工具——选项——常规——快捷键中修改

    插件

    HBuilder将插件做了下优化,提供了最长用的一些插件,并且使用dcloud网站下载,速度很快,eclipse自带插件安装需要翻墙

    打开工具——插件安装,安装自己需要的插件,例如我安装了如下插件:

    QQ截图20150204134317.jpg


    完成

    环境搭建就完成了,这应该是所有开发环境搭建中最简答的了。


    更多

    更多文章请访问:http://uikoo9.com/blog/list


    展开全文
  • HTML5+CSS3网页模板

    千次阅读 2012-10-25 09:45:15
    HTML5已经得到众多网页设计者的推崇,国际W3C标准组织及全球许多著名互联网公司也首推新的HTML5脚本,再加CSS3的推出,越来越多的人开始学习使用HTML5+CSS3来设计网页。 最好模板特此推出HTML5+CSS3网页模板专题,...
  • HTML5+CSS3+JS(第一课)

    万次阅读 2014-05-04 22:14:03
    html5+css3+jacascript 一. 简介  书就不介绍了,讲的内容呢。标题都很清楚了,HTML5和CSS3和JS。就这些内容。 二. 第一章:HTML5  1. 发展历史,HTML4.01、XHTML、DTD这个就不用介绍了。因为页面要绚烂,...
  • 一谈到webAPP,大家就会想到用html5+CSS+js来实现。到底如何来制作?25学堂小编还没有找到比较合适的用html5+css3开发webAPP项目教材。 这里分享了一个《网易微博Web App开发过程》但是这个过程的重点不是在于...
  • mui、HTML5+、5+Runtime的关系说明

    千次阅读 2018-05-07 00:29:56
    mui是一个前端框架,HTML5+是一套HTML5能力扩展规范,HTML5+ Runtime是实现HTML5+规范的强化浏览器引擎。 有点类似于bootstrap、w3c和chrome os的关系。 HTML5+规范隶属于http://www.html5plus.org,定义了HTML5...
  • MUI 结合 HTML5+ 实现的二维码扫描功能 一、说明 二维码的扫描在手机APP的开发中是很常见的一个需求,毕竟用的也多嘛。html5+ 提供了Barcode模块管理条码扫描,支持常见的条码(一维码及二维码)的扫描识别功能。...
  • html5+ 和phoneGap、cordova的比较

    千次阅读 2017-01-05 23:14:20
    phonegap出的早,自然用的人多。  phonegap自己的定位是混合开发hybrid,用原生+js; HBuilder的定位是纯js搞定...有HTML5+和Native.js技术,HTML5+包含常用的跨平台的几百个API,能满足常规开发需求,而Native.js
  • 最近由于公司项目的需要,使用HBuilder开发基于MUI的web版APP,其中有一个文件上传的功能,通过查询资料,发现利用HTML5+的Uploader模块的API能上传文件。经过一番折腾后,终于成功实现了多文件的上传,简单地记录...
  • html5+css3基础+高级项目实战(完整)

    千次阅读 2019-03-16 12:21:26
    html5+css3基础+高级视频教程 下载地址:百度网盘
  • HTML5+CSS3从入门到精通书籍配套源码

    千次阅读 热门讨论 2018-01-18 09:55:35
    HTML5+CSS3从入门到精通配套视频讲解227节光盘源码云盘分享:链接:https://pan.baidu.com/s/1nvG5FZz
  • HTML5+CSS3从入门到精通 中文pdf版​

    千次阅读 2018-04-25 23:19:56
    HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南、高级程序设计、开发指南同类图书,本书是一本适合快速入手的自学教程。内容有:创建...
  • HTML5+JS+CSS3前端积累(一)

    千次阅读 2016-12-01 16:36:21
    HTML5+JS+CSS3开发点滴积累:Location对象,querySeelctor方法,addEventListener方法,字符串转数字
  • 电子商务网站源码HTML5+CSS3+JavaScript

    万次阅读 2018-01-30 17:16:46
    利用CSS3+HTML5+Jquery开发的一个电商网站页面,代码都有详细注释,希望能帮到你们,下面是页面的展示。源代码在GitHub上,地址:https://github.com/PowerDos/Mall 首页动态图片 图片比较大,可能加载速度会...
  • 使用HTML5+调用手机摄像头和相册

    万次阅读 热门讨论 2016-11-21 13:29:59
    主要介绍了采用HTML5plus(HTML5+)的方式调用手机摄像头并拍照,将具体的代码和一些注意事项进行了讲解,并对不同的开发环境使用简单进行了介绍。
  • 后台模版第二季,真正好用漂亮,HTML5+CSS3搭建,下载即用,无需二次编写。 源代码下载地址:http://www.zuidaima.com/share/1605673798175744.htm
  • 在uni-app中使用H5+的功能实现IO操作

    千次阅读 2019-03-01 09:16:24
    uni-app实现文件存储,在开发APP的过程中会存在大量的缓存数据需要存储,Vuex存储量太小...HTML5+ 的SDK,是把5+ runtime封装为原生SDK,它有3个用途。 使用HTML5+ SDK实现本地打包。 通过原生代码扩展HTML5+ runtim...
  • Html5 + Css3 制作酷炫的导航栏

    万次阅读 多人点赞 2020-05-02 16:35:26
    主要亮点: 1 ul 水平显示 2 li 去掉圆点 3 li中字体水平、竖直居中... 5 使用html + css3 渐变画图 制作背景图片 6 更改颜色透明度 7 DIV制作边框阴影 先看效果图: 实现代码: 案例
1 2 3 4 5 ... 20
收藏数 3,315,745
精华内容 1,326,298
关键字:

html5+