h5移动app开发-移动app用什么开发
通过 HTML5 开发移动 App 时,会发现 HTML5 很多能力不具备。为弥补 HTML5 能力 的不足,在 W3C 中国的指导下成立了www.HTML5Plus.org组织,推出 HTML5+规范。
HTML5+扩展了对象 plus,使得 js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。
HBuilder 的手机原生能力调用分 2 个层面:
a) 跨手机平台的能力调用都在 HTML5+规范里,比如二维码、语音输入,使用
plus.barcode 和plus.speech。编写一次,可跨平台运行。
b) JS Bridge是另一项创新技术h5移动app开发,通过 js 可以直接调iOS和Android的原生 API,这部 分就不再跨平台,比如调 ios game center,或在 android 手机桌面创建快捷方式。 JSB 的用法是h5移动app开发,var obj= plus.android.import("android.content.Intent");,将一个原生对 象 android.content.Intent 映射为 js 对象 obj,然后在 js 里操作 obj对象的方法属性就可以了。
使用 HTML5+开发的移动 App 并非 mobileweb 页面。这是新手最容易混淆的地方。 mobileweb 的文件存放在 web 服务器上,而移动 App 的文件存放在手机本地,编写移动 App 的 html、js、css文件被打包到 ipa 或 apk 等原生安装包,在手机客户端运行。
当然这些移动 App 里某些页面也可以继续从服务器端以网页方式下行。
所以 mobile web,在 HBuilder 里新建项目时,属于 web 项目。不要放置到移动 App 项 目下。mobile web 项目也不能真机联调和打包。
举几个例子。
例 1:一个 mobile web 项目,想打包成移动 App。
a) 在HBuilder 里新建一个web 项目,把mobile web 代码放进去。
b) 在HBuilder 里新建移动App
c) 在新建的移动 App 下找到 manifest.json,将其中的入口页面配置为 mobileweb 的网 络地址。
d) 然后点发行打包,就得到一个移动 App 的安装包。除了可发行到 Appstore 和桌面 有个快捷方式外,与浏览器的体验不会有其他区别。
e) 另外其实 mobile web 的代码,也可以判断自己运行的环境,如果 UA 里包含 “Html5Plus”,也可以写 plus 对象来调用原生能力。
===========以上内容来自:来源
以下是我个人问题。本人对手机应用的概念不是特别熟悉,所以产生了以下的一些疑问
1,h5+的plus对象使得JS可以调用原生接口,那么以webview形式存在的页面和普通H5页面之间的区别有哪些?
H5页面之间都是通过访问的形式来进行跳转的。
而webview则更类似于 场景转换,那么实际上 H5+是以什么形式访问不同页面的。
正如上面内容所说,移动APP并非mobile Web ,他的页面都是在本地的。是否说明,在打开APP的时候。所有页面已经“准备好了”,
答:移动APP将所有页面打包,所以用户加载页面会比mobile WEB快,页面无需从服务器加载,只需要加载数据的时候才会和服务器交互,或者访问在服务器上的web时需要加载。所以移动APP比那些以应用框架为外表的H5应用(混合APP)要好。
那么,如果用H5+MUI不打包成APP,在手机浏览器中运用是否也可以调用plus对象从而调用原生的接口?
答:
为解决HTML5在低端Android机上的性能缺陷,mui引入了原生加速,其中最关键的就是webview控件,因此mui若要发挥其全部能力,需和5+ App配合适用,若脱离5+ App,mui功能会受限,主要涉及三个部分:
一、webview窗口相关
涉及webview的,除了5+App,其它所有手机浏览器及PC浏览器均无法使用,涉及功能点包括:
webview模式窗体动画
创建子窗口(除了为解决区域滚动的常见双webview场景,还涉及webview模式的选项卡等多webview场景)
webview模式的侧滑菜单(也有div方式侧滑菜单)
webview模式的tab选项卡(也有div方式选项卡)
nativeUI,如原生的警告框、确认框、popover、actionsheet、toast。这些也有HTML5的实现。
预加载
自定义事件
二、第三方扩展插件
涉及webview的,除了5+App,其它所有手机浏览器及PC浏览器均无法使用,目前主要包括:语音输入;
三、Touch事件相关(注意pc浏览器没有touch事件)
Touch事件相关的,手机端浏览器均可使用、pc端chrome模拟手机浏览器也可以正常使用。
但普通PC端浏览器因为没有touch事件,可以显示控件但滑动操作功能会受限;涉及功能点包括:
手势事件
mui封装的tap相关处理业务:折叠面板、二级列表、二级选项卡;
mui封装的swipe、drag相关处理业务:图片轮播、可左右滑动的图文表格、可左右滑动的9宫格、滑动触发列表项菜单、可拖动式侧滑菜单、下拉刷新和上拉加载、可拖动式选项卡
【备注】:在PC端,大家将tap替换成click,将HTML5默认的Drag事件替换mui 的swipe和drag,就可以解决如上两个问题。而MUI.init();是否就是“准备”的关键。
如果没有使用init初始化,会怎样?
答:init并非是移动APP访问某页面的必备条件,它只是作为调用该页面某些需要提前准备的功能的函数。
webview又是什么概念?它是指移动APP里面的所有页面都属于webview还是通过创建子页面或者打开子页面才会产生webview对象?
解决:所有的页面都属于webview,可以通过
mui.plusReady(function(){
var w = plus.webview.currentWebview().getURL();
console.log(w);
});
获取当前webview的信息
这些关于plus的操作需要在plusReady里面实现。