资讯专栏INFORMATION COLUMN

HTML5 plus初步了解

honmaple / 3460人阅读

摘要:中国产业联盟中国产业联盟,是工信部下属单位,是为了更好的推进的商用更好的为开发者服务而由产业链厂商共同组成的一个联盟。是会员中国产业联盟发起单位,致力于推进发展,构建生态。

问题

开发HTML5页面要解决的主要问题之一,就是调用系统的能力,比如拍照/选图/保存图片到相册/录音/录制视频/定位等,而是否能够调用这些能力,在于其运行环境是否开放了这些权限,是否能够便捷地使用,取决于所提供的API。若是微信网页开发,微信提供了js-sdk, 以及weui样式库;那么若是原生APP提供的webview容器呢,或者直接在手机浏览器内运行呢,抑或直接打包成APP呢,是否也能够调用系统能力,并且用得优雅便捷?

HTML5 plus是什么
HTML5+是中国HTML5产业联盟的扩展规范,基于HTML5扩展了大量调用设备的能力,使得web语言可以想原生语言一样强大。

HTML5中国产业联盟:

HTML5中国产业联盟,是工信部下属单位,是为了更好的推进HTML5的商用、更好的为HTML5开发者服务而由产业链厂商共同组成的一个联盟。

附:

HTML5+规范文档

效果示例 HelloH5+

HTML5+运行环境 Runtime版 – for App(运行环境与项目代码打包为原生APP)
使用HTML5开发,然后使用HBuilder提供的云打包或本地打包将可以把5+ Runtime和开发者编写的HTML5页面打包为原生App的安装包,包括Android的apk和iOS的ipa。发行到原生应用市场。
SDK版 – for Hybrid(原生APP中构建H5+运行环境)
在你的原生应用中内嵌5+ SDK,替代手机默认的webview,无论使用Hybrid开发模式,还是在原生App中构建web应用生态,都将能体验到更强大的内核动力。

附:HTML5+运行环境 5+Runtime官网介绍

配套工具 HBuilder

HTML5+项目的开发工具,既是代码编辑器,也是基于H5+的APP打包工具。

HBuilder是完整支持HTML5+及JSDoc+规范的优秀开发工具,在HBuilder中可以有效提示HTML5+语法、JSDoc+提示,可以开发、调试、发布基于HTML5+的App。

HBuilder项目调试:

下载HBuilder;

使用邮箱注册HBuilder账号;

新建项目:分移动App,web项目和Wap2App;

已测试运行HelloH5和HelloMui项目,手机功能需真机调试,真机调试需USB连接手机,开启调试模式,可边在手机操作边查看电脑控制台输出;

只有移动App类型的项目才能启用真机调试,web类型的项目不能

移动App类型的项目在真机运行,除了通过USB连接的方式,也可以通过同一局域网访问,但页面内原生的tab无法显示;

web类型项目同样可以通过同一局域网在真机/电脑浏览器访问,进行开发调试;但需调用手机系统能力的功能无效;

HBuilder 优点:

性能体验挺不错的;

支持多种系统能力调用;

配套的Mui框架挺好看的,组件挺齐全;

缺点:

官方文档写得阅读体验比较差;

附:HBuilder介绍及下载

MUI框架

一个与HTML5+配套的样式框架

mui框架是一个基于HTML5+规范的开源前端UI框架,它利用了HTML5+扩展的原生能力,解决常用UI控件的性能及跨平台问题。

使用mui框架,可以简单方便的开发出高性能的App,同时mui也可以自动适应没有HTML5+环境的普通浏览器,降低为普通web app,这使得开发者使用mui开发一次,可以同时发布为HTML5+的iOS、Android App,也可同时发布到手机浏览器里。

附:mui官方网站

安卓/IOS中集成HTML5+SDK

安卓集成:

HTML5+ SDK集成:

独立应用集成方式:即Widget集成方式,开发者在集成后可在需要时启动HTML5+ SDK,显示指定目录下的5+ WebAPP

单页面集成方式:即Webview集成方式,用户可在需要时显示一个支持5+扩展API的Webview页面。使用单页面方式集成5+ SDK,在页面内不能调用plus.webview的API创建新的页面,其他5+API的使用不受影响。

IOS集成:

独立应用集成方式: 使用独立应用方式,开发者需要将HTML5+SDK生成的首页面设置为当前View的subView。HTML5+ SDK将对应用进行管理。

Widget集成方式: 运行方式和独立运行方式类似,开发者在集成时可在需要的位置启动HTML5+ SDK,显示指定的HTML5+应用。

Webview集成方式: 用户可在任何页面将HTML5+ SDK的页面以Webview的形式独立显示,显示的Webview页面。

widget集成方式与webview集成方式的步骤区别:

安卓-widget集成方式:将5+SDK导入现有原生工程 -> 将WebApp导入现有原生工程 -> 5+SDK集成代码编写

安卓-webview集成方式:将5+SDK导入现有原生工程 -> 5+SDK集成代码编写

由此可知,widget集成方式需要将webApp代码导入到原生工程里,适合同一团队,不适合不同公司间合作;
而webview方式,看起来公司间合作可使用此方式

相关文档:

Android 平台5+SDK接口说明

Android平台以WebView方式集成HTML5+SDK方法

Android平台以Widget方式集成HTML5+SDK方法

IOS平台以WebView方式集成HTML5+SDK方法

IOS平台以Widget方式集成HTML5+SDK方法

HTML 5+ SDK 更新日志

他人经验分享:
安卓/IOS中集成HTML5+SDK:runtime方式和widget方式:
http://ask.dcloud.net.cn/ques...
http://ask.dcloud.net.cn/arti...

HTML5+与DCloud等的关系

HTML5中国产业联盟,是工信部下属单位,建于2013年

工信部信通院标准所是联盟的管理单位,W3C中国是联盟指导单位, DCloud是联盟秘书单位。

DCloud 是W3C会员、中国HTML5产业联盟发起单位,致力于推进HTML5发展,构建HTML5生态。

HBuilder / 5+Runtime / MUI / wap2app / 流应用是DCloud开发的产品

HTML5+规范是HTML5中国产业联盟的拓展规范,需5+Runtime支持运行

文档指引

HTML5中国产业联盟官网:http://www.html5plus.org/

mui官网:http://dev.dcloud.net.cn/mui/

DCloud官网:http://dcloud.io/index.html 通过首页可查看HBuilder/5+Runtime/mui/wap2app/流应用的介绍

通过官网导航“文档”可查看除mui外的文档目录(http://dcloud.io/doc.html)

除mui外其余文档内容均位于http://ask.dcloud.net.cn/docs/

DCloud社区: http://ask.dcloud.net.cn/explore/

DCloud产品案例:http://dcloud.io/case/#

小结

通过以上初步了解,下载HBuilder并创建HelloH5+ / HelloMUI模板项目、移动APP项目、web项目进行调试,对于开头提出的问题,初步回答如下:

使用web开发方式开发APP,可通过HBuilder建立【移动App项目】开发后,将H5+环境和项目代码一起打包为原生APP,打包方式分【离线打包】和【云打包】;

若是【web项目】,也可以打包为APP,但开发时其不能真机调试,其使用体验也比不上【移动App项目】打包的;

原生APP内嵌web应用:分别构建安卓和IOS的【H5+增强webview环境】,即【5+SDK集成后的环境】,在该环境中运行web应用或单个web页面,但使用widget集成方式,需要将web应用的代码放在原生APP的项目内,对于二者分属不同团队来说,这种方式不适应;若是直接通过链接在原生APP中访问web应用,看起来webview集成方式适用,其需求场景为:

原生APP中通过url访问一个Html5+应用;

原生APP代码和H5+项目代码不放在一起,分别由不同公司的团队维护;

Html5应用中需使用camera/gallery/audio/device等HTML5+ API

手机浏览器访问:暂时没有看到可行方案

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/60409.html

相关文章

  • MyBatis-Plus初步

    摘要:是最流行的关系型数据库管理系统之一,在应用方面,是最好的,关系数据库管理系统应用软件。是一种关系数据库管理系统,关系数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性。 本章主要是对MyBatis-Plus的初步介绍,包括一些背景知识、环境搭建、初步使用等知识和例子。对于背景知识,主要包含对MyBatis-Plus的特性介绍、为什么使用MyB...

    娣辩孩 评论0 收藏0
  • 移动前端不得不了解html5 head 头标签

    摘要:原文愚人码头移动前端不得不了解的头标签移动前端不得不了解的头标签本文主要内容来自一丝的常用的头部标签和百度的头标签。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,头部标签功能,特别是标签显得非常重要。 好干货,收藏着。原文 愚人码头 - 移动前端不得不了解的html5 head 头标签 移动前端不得不了解的html5 head 头标签 本文主要内容来自...

    luck 评论0 收藏0
  • Luxon 初步介绍(Moment 团队日期另一个类库)

    摘要:我不是的深度用户只是日常会遇到一些时间格式化的需求之前用的都是不过对的感到有些不舒服同事介绍过里边用不可变数据的风格设计的所以就试试上星星很多请放心食用是项目的某个维护者开发的按照他个人想法进行了改进除了不可变性使用的工具做了更新也尝试到时 我不是 Moment 的深度用户, 只是日常会遇到一些时间格式化的需求,之前用的都是 Moment, 不过对 Moment 的 mutable A...

    stormzhang 评论0 收藏0
  • JavaScript の MUI-APP 数据储存方法

    摘要:是手机端关系型数据库的最佳方案,各种手机都支持。但是目前手机端重量数据存储的唯一可商用方案。是里最新的数据存储规范,但不是基于,而是基于对象。与的标准相比,的扩展主要是为了跨域。有网友封装了一个框架,针对数据,在超过时自动切换到,参考。 总结HTML5+的离线本地存储的多种方案: [ √ ] HTML5标准方案:cookie、localstorage、sessionstorage、w...

    fancyLuo 评论0 收藏0
  • JavaScript の MUI-APP 数据储存方法

    摘要:是手机端关系型数据库的最佳方案,各种手机都支持。但是目前手机端重量数据存储的唯一可商用方案。是里最新的数据存储规范,但不是基于,而是基于对象。与的标准相比,的扩展主要是为了跨域。有网友封装了一个框架,针对数据,在超过时自动切换到,参考。 总结HTML5+的离线本地存储的多种方案: [ √ ] HTML5标准方案:cookie、localstorage、sessionstorage、w...

    wenshi11019 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<