简单一句就是,用开发 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.json5+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移动应用的详细内容。
