问题
开发 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 + 的 iOSAndroid 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 的 subViewHTML5+ SDK 将对应用进行管理
Widget 集成方式: 运行方式和独立运行方式类似, 开发者在集成时可在需要的位置启动 HTML5+ SDK, 显示指定的 HTML5 + 应用
Webview 集成方式: 用户可在任何页面将 HTML5+ SDK 的页面以 Webview 的形式独立显示, 显示的 Webview 页面
他人经验分享:
安卓 / IOS 中集成 HTML5+SDK:runtime 方式和 widget 方式:
- http://ask.dcloud.net.cn/ques...
- http://ask.dcloud.net.cn/arti...
文档: 安卓集成
文档: IOS 集成
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 开发后, 将 H5 + 环境和项目代码一起打包为原生 APP;
原生 APP 内嵌 web 应用: 分别构建安卓和 IOS 的 H5 + 增强 webview 环境, 在该环境中运行 web 应用或 web 页面, 但从他人分享的集成示例来看, 需要将 web 应用的代码放在原生 APP 的项目内, 对于二者分属不同团队来说, 这种方式不适应, 暂时不确定是否有直接通过链接在原生 APP 中访问 web 应用的方案;
需求场景:
原生 APP 中通过 url 访问一个 Html5 + 应用;
原生 APP 代码和 H5 + 项目代码不放在一起, 分别由不同公司的团队维护;
Html5 应用中需使用 camera/gallery/audio/device 等 HTML5+ API
那么, 可以用什么方案, 使得原生 APP 提供的 webview 支持 H5 + 应用?
手机浏览器访问: 暂时没有看到可行方案
来源: https://segmentfault.com/a/1190000013655578