注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

沉默蜂B4A安卓编程

国内资料最全的B4A资料库

 
 
 

日志

 
 

HTML5Plus应用开发指南  

2015-09-03 12:49:17|  分类: HTML5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

HTML5plus移动App开发入门
(v0.3)
更新时间:2014年8月4日  



HTML5Plus应用概述

通过HTML5开发移动App时,会发现HTML5很多能力不具备。为弥补HTML5能力的不足,在W3C中国的指导下成立了www.html5plus.org组织,推出HTML5+规范。

HTML5+规范是一个开放规范,允许三方浏览器厂商或其他手机runtime制造商实现。HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

HBuilder的手机原生能力调用分2个层面:
a)跨手机平台的能力调用都在HTML5+规范里,比如二维码、语音输入,使用plus.barcode和plus.speech。编写一次,可跨平台运行。

b)Native.js是另一项创新技术。手机OS的原生API有四十多万,大量的API无法被HTML5使用。Native.js把几十万原生API封装成了js对象,通过js可以直接调ios和android的原生API。这部分就不再跨平台,写法分别是plus.ios和plus.android,比如调iosgamecenter,或在android手机桌面创建快捷方式。

Native.js的用法示例,varobj=plus.android.import("android.content.Intent");,将一个原生对象android.content.Intent映射为js对象obj,然后在js里操作obj对象的方法属性就可以了。

Native.js的详细教程可以参考:http://download.dcloud.net.cn/HTML5%2B应用开发-Native.js.pdf

HTML5+App
使用HTML5+开发的移动App并非mobileweb页面。这是新手最容易混淆的地方。mobileweb的文件存放在web服务器上,而移动App的文件存放在手机本地,编写移动App的html、js、css文件被打包到ipa或apk等原生安装包,在手机客户端运行。
当然这些移动App里某些页面也可以继续从服务器端以网页方式下行。
所以mobileweb,在HBuilder里新建项目时,属于web项目。不要放置到移动App项目下。mobileweb项目也不能真机联调和打包。

举几个例子。
例1:一个mobileweb项目,想打包成移动App。
a)在HBuilder里新建一个web项目,把mobileweb代码放进去。b)在HBuilder里新建移动App

c)在新建的移动App下找到manifest.json,将其中的入口页面配置为mobileweb的网
络地址。

d)然后点发行打包,就得到一个移动App的安装包。除了可发行到Appstore和桌面有个快捷方式外,与浏览器的体验不会有其他区别。

e)另外其实mobileweb的代码,也可以判断自己运行的环境,如果UA里包含“Html5Plus”,也可以写plus对象来调用原生能力。
例子2:正规的移动App(没有网页进度条)
a)在HBuilder里新建移动App项目
b)在移动App里编写html、Js、css文件,本地js通过ajax方式请求服务器数据,通过plus.net对象避开跨域限制。
c)移动App里的js可以通过plus对象调用手机原生能力d)编写好的移动App点打包变成安装包。例子3:混合型移动App
这里的混合型移动App,所指并非是原生和HTML5的hybridApp,而是指一部分页面是本地的HTML,通过ajax与服务器交互,另一部分页面是从服务器下行的mobileweb页面。

a)分别新建一个web项目和一个移动App项目
b)在移动App里的某个html里通过<ahref=或者location.href=指定mobileweb的页面地址。

....


  评论这张
 
阅读(95)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017