zoukankan      html  css  js  c++  java
  • HTML5+ App开发入门

    HTML5 Plus应用概述

    HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。

    HTML5 Plus规范

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

    HTML5+规范是一个开放规范,允许三方浏览器厂商或其他手机runtime制造商实现。

    HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

    HBuilder的手机原生能力调用分2个层面:

    - 跨手机平台的能力调用都在HTML5+规范里,比如二维码、语音输入,使用plus.barcode和plus.speech。编写一次,可跨平台运行。
    - Native.js是另一项创新技术。手机OS的原生API有四十多万,大量的API无法被HTML5使用。Native.js把几十万原生API封装成了js对象,通过js可以直接调ios和android的原生API。这部分就不再跨平台,写法分别是plus.ios和plus.android,比如调ios game center,或在android手机桌面创建快捷方式。

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

    HTML5+ App

    使用HTML5+开发的移动App并非mobile web页面。这是新手最容易混淆的地方。mobile web的文件存放在web服务器上,而移动App的文件存放在手机本地,编写移动App的html、js、css文件被打包到ipa或apk等原生安装包,在手机客户端运行。

    用个更形象的列子,web app仍然是b/s结构,而移动App是c/s结构甚至是完全脱线的单机应用。
    这或许有点超过一些人的想象,他们认为HTML就是web、就是b/s,事实上javascript早已可通过nodejs等技术运行在服务器侧,而在HBuilder的移动App里,HTML、JS等文件也可以被打包成原生安装包。

    当然这些移动App里某些页面也可以继续从服务器端以网页方式下行,就像任何原生应用(如微信)都可以内嵌网页一样。

    所以mobile web,在HBuilder里新建项目时,属于web项目。不要放置到移动App项目下。mobile web项目也不能真机联调和打包。

    举几个例子说明mobile web和移动App的区别。
    例1:把一个mobile web项目,打包成移动App。

    1. 在HBuilder里新建一个web项目,把mobile web代码放进去。
    2. 在HBuilder里新建移动App
    3. 在新建的移动App下找到manifest.json,将其中的入口页面配置为mobile web的网络地址。
    4. 然后点发行打包,就得到一个移动App的安装包。除了有个安装包和桌面有个快捷方式外,与浏览器的体验不会有其他区别。
    5. 不过注意,这样的移动App体验很差,它在页面跳转时会像浏览器那样切换并且白屏,它完全无法脱线使用,没有网络时点开这个app只能看到一片白板。这样的app在Apple的Appstore审核时是无法通过的,其他大的安卓市场也不会允许发行。

    例子2:正规的移动App

    1. 在HBuilder里新建移动App项目
    2. 在移动App里编写html、Js、css文件,本地js通过ajax方式请求服务器数据,通过plus.net对象避开跨域限制
    3. 移动App里的js可以通过plus对象调用手机原生能力
    4. 编写好的移动App点打包变成安装包,这才是一个体验良好的、可上线的移动App。

    例子3:混合型移动App

    这里的混合型移动App,所指并非是原生和HTML5的hybrid App,而是指一部分页面是本地的HTML,通过ajax与服务器交互,另一部分页面是从服务器下行的mobile web页面。
    1. 分别新建一个web项目和一个移动App项目
    2. 在移动App里的某个html里通过<a href= 或者location.href=或者webview对象的loadURL方法指定mobile web的页面地址。
    3. 在服务器下行的mobile web页面中,一样可以通过js调用本地HTML5Plus api对硬件层进行访问。类似微信JS SDK。

    HTML5+ 应用架构

    HTML5+ 应用架构图

    HTML5+ 规范 API 及demo示例

    最新规范请参考http://www.html5plus.org/#specification
    手机端体验各个API的实现效果,ios手机在Appstore搜索Hello H5+,Android手机下载地址
    在HBuilder中新建移动App,选Hello H5+,即可看到这个demo的源代码。

    建议:在进行开发之前先把DCloud公司提供的实例都运行一遍,这样能够利用许多现有的功能模块,省去很多开发时间和成本。

    开发环境HBuilder

    HBuilder内置HTML5+ APP开发环境,提供一套完整的移动应用开发解决方案。内置HTML5+ API语法提示,提高开发效率;集成真机运行环境,方便开发后即时在真机上查看运行效果;集成应用云端打包系统,不用部署xcode和Android sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。
    下载地址:http://www.dcloud.io/

    平台支持

    • iOS 5.0及以上
    • Android 2.3及以上
  • 相关阅读:
    收藏随笔
    Jquery根据元素ID判断该元素是否存在
    DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异
    css3 boxsizing属性
    常见CSS属性及值
    Pycharm学习记录注释
    python之reload用法
    python之sorted用法
    android studio目录结构浅析
    纪念开通博客
  • 原文地址:https://www.cnblogs.com/sMKing/p/6717846.html
Copyright © 2011-2022 走看看