首页 > H5教程 > 正文

分享一个HTML5Plus移动应用

原创 2018-02-10 14:18:00 0 348
什么是 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 就顺利制作完成了。

相关推荐:

HTML5Plus移动开发入门学习

HTML5plus移动应用的开发实例分享

HTML5仿微信聊天界面和朋友圈代码

以上就是分享一个HTML5Plus移动应用的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:HTML5plus h5 应用
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 如何利用input事件来监听移动端的输入_html5教程技巧
  • 深入解析HTML5 Canvas控制图形矩阵变换的方法_html5教程技巧
  • 实例讲解使用SVG制作loading加载动画的方法_html5教程技巧
  • 实例讲解利用HTML5 Canvas API操作图形旋转的方法_html5教程技巧
  • 分享一个HTML5Plus移动应用
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    • PeterZhu
    • 2017-03-20 22:47:17
    • 点击数(110029)

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    • PeterZhu
    • 2017-05-16 12:03:57
    • 点击数(107841)

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    • PeterZhu
    • 2017-03-13 10:15:11
    • 点击数(82836)

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • PeterZhu
    • 2017-07-24 16:48:56
    • 点击数(82069)

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    • 小云云

      全栈工程师

    • 想不好签名了...
    • 5865篇
      文章总数
    • 348
      文章总浏览数

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节