HTML5 plus初步了解

问题

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

HTML5 plus是什么

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

HTML5中国产业联盟:

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

附:

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方式,看起来公司间合作可使用此方式

相关文档:

他人经验分享:
安卓/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支持运行

文档指引

小结

通过以上初步了解,下载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
  • 手机浏览器访问:暂时没有看到可行方案

相关推荐