首页 >web前端 >H5教程 >分享一个HTML5Plus移动应用

分享一个HTML5Plus移动应用

小云云原创: 2018-02-10 14:18:003046浏览

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

简单一句就是，用开发 Web 的技术完成原生移动应用的开发。

5+App 与移动 Web

虽然 5+App 与移动 Web 开发，采用的相关技术大体一致，但是两者的区别还是很明显的。

5+App 是 C/S 的，Web 是 B/S 的。
5+App 是独立的客户端，应用资源通常只能是静态的文件。PHP、JSP 这些服务器模板，没有解析器去处理。
5+App 打包后是 apk 及 ipa 后缀的包，也就是原生的移动应用。
window.plus 扩展的 API，依赖 5+Runtime 引擎。普通浏览器没有集成这个引擎，Web 开发通常用不了这些 API。

准备工作

开发工具

HBuilder 内置了 5+App 的开发环境，因此需要先下载此 IDE。

注册账号

下载并解压 HBuilder 后，启动 IDE。首次使用需要注册一个账号，方便之后管理应用以及在社区活动。

设备

由于在下没有 iOS 设备以及 Mac OS 的机器，因此这个系列的分享都是以 Windows 系统下开发 Android 应用为例。

一台电脑，一部手机。手机最好是 Android 4.4 及以上的，不推荐用模拟器。USB 线也是必须的，当然 HBuilder 同样支持 WiFi 调试。

第一个 5+App

新建应用

启动 HBuilder，并且登录。
菜单 -> 文件 -> 新建 -> 移动 App
模板暂时不需要调整，输入应用名“HelloWorld”，点击完成即可。

index.html

应用的入口页面，概念和 Web 的入口页类似。默认是应用根目录下的 index.html，这个可以调整。

manifest.json

5+App 的配置文件，用于配置应用的信息。HBuilder 对此文件做了特殊处理，并提供了可视化的编辑界面。

应用信息

应用名称：就是你的应用在手机桌面上显示的名字。
appid：这个是 5+App 创建时分配的，不要修改。更不要和 iOS 的 AppID 或者其它第三方平台上的 appid 混淆。
版本号：应用版本号
页面入口：就是首页是哪个页面，可修改。
应用描述：简单说明一下应用的信息

图标配置

就是应用的 logo，按照提示做一张符合规格的图，然后一键生成替换。

启动图片

splash 图就是应用启动的时候那张占位的图片，QQ 是个企鹅，微信是那个月球。
启动选项：通常用默认的就行，根据需要调整。
图片设置：按照需要，制作相应尺寸的 png 图，选择配置即可。

SDK 配置

如果用到了一些第三方的 SDK 的功能，就需要配置相应的信息。
SDK 启用需填写的信息，去相应的第三方开放平台注册即可。

模块权限配置

某些模块的启用需要配置下权限

页面引用关系

不是特别懂，看说明书吧。

代码视图

配置的源代码部分，不是所有配置都提供了可视化编辑视图。

真机运行

将手机连上电脑，HBuilder 会自动检测到连接到电脑上的设备。菜单 -> 运行 -> 真机运行，选择你的设备即可。首次使用会安装一个调试基座 HBuilder，如果 HBuilder IDE 版本变化的话，真机运行会覆盖旧版本的 HBuilder 基座。

调试

页面的样式，推荐使用电脑的 Chrome 浏览器手机模式进行调试。
Android 真机运行时，每次修改完文件并保存，手机端的基座会同步代码。
Android 还是可以使用 Chrome RemoteDebugging 进行调试，但是需要是 Android 4.4 以上的设备并且首次需要翻墙。

调用 5+API

简单封装一下扩展 API 加载完成的事件回调

var plusReady = function(callback) {
  if(window.plus) {
    callback();
  } else {
    document.addEventListener('plusready', callback);
  }
};

然后，读取下当前设备连接的网络类型并输出到页面上。

plusReady(function() {
  var netType = plus.networkinfo.getCurrentType();
  document.write('当前网络类型为：' + netType);
});

真机运行，可以看到页面上的内容“当前网络类型为：3”，也就是 WiFi 网络环境。

打包

确认 manifest.json 中的信息无误
logo 及 splash 图不配置的话，会用默认的 HBuilder 相关图片。
菜单 -> 发行 -> 云打包-打原生安装包
勾选 Android，Android 的证书相对随意一些，用 DCloud 提供的现成的或者自己生成的都一样。
包名要严格遵循 Android 包名的格式规范，不要乱写。这里调整一下，改为 com.helo.html5plus。
如果配置信息有错误，会有提示，必须修改正确才能继续。
一切无误之后，点击“打包”，等待即可。
打包完成后，会自动下载到相应的目录下。

安装

将云打包下载下来的 apk 安装到手机上，启动应用就可以查看当前网络状态信息。那么，我们的第一个 5+App 就顺利制作完成了。