实习时,独立负责WebApp,不知不觉一年过去了。在新的公司,WebApp仍然有难以抵挡的魅力。
已经开发了一套Web系统,使用MUI和HBuilder可以将网页移植到APP上。HBuilder云打包,可以使用程序包的内置浏览器打开网页。在网页内可以加入前进、后退提升用户体验。
将Web移植到APP,可以大幅缩减开发和维护成本。而且伴随H5、MUI、手机CPU等硬件的发展,WebAPP的性能已经媲美原生Android和IOS。而且,HBuilder可以轻松将网页打包成Android和IOS,不用Android和IOS两个开发团队。配合Node-Webkit进行网页的桌面打包,HTML可以在Web、PC、APP三端部署。配合Spring Boot或者WebService可以前后台分离。
Hbuilder(已经有Hbuilder X了,但博主还是习惯Hbuilder,就是如此傲娇!)中新建WebApp,勾选MUI框架。
核心只有两个文件:
index.html、index.js(已经加入横屏设置,更利于网页浏览)如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
mui.init({
beforeback: function() {
}
});
mui.plusReady(function() {
var WV = plus.webview.create('http://www.baidu.com/', 'hao', {
top: "0px",
bottom: "0px",
left:"0px",
right:"0px"
});
plus.webview.currentWebview().append(WV);
plus.screen.lockOrientation("landscape-primary"); //强制横屏
});
双击manifest.json:
应用名称(APP图标下的文本)、页面入口等:在应用信息中
APP图标:在图标配置中。
启动图片(启动APP后首先浏览的界面,如进入今日头条后的广告页,如果和博主一样喜欢横屏,注意启动图片的宽高需和推荐的宽高调换一下):启动图标(splash)配置。
权限配置:可以增删权限,默认有很多权限加入。
全屏(无顶部状态栏)和沉浸式顶部状态栏(二选一)、应用名称(APP图标下的文本)等:在代码视图下可以修改。
{
"@platforms": [
"android",
"iPhone",
"iPad"
],
"id": "H5DD391D2",/*应用的标识,创建应用时自动生成,勿手动修改*/
"fullscreen":true,/* 应用全屏 */
"name": "浩然浩世的平台",/*应用名称,程序桌面图标名称*/
"version": {
"name": "1.0.0",/*应用版本名称*/
"code": "83"
},
"description": "",/*应用描述信息*/
"icons": {
"72": "icon.png"
},
"launch_path": "index.html",/*应用的入口页面,默认为根目录下的index.html;支持网络地址,必须以http://或https://开头*/
"developer": {
"name": "",/*开发者名称*/
"email": "",/*开发者邮箱地址*/
"url": "http://www.dcloud.io"
},
"permissions": {
"Cache": {
"description": "管理应用缓存"
},
"Console": {
"description": "跟踪调试输出日志"
},
"Events": {
"description": "应用扩展事件"
}
},
"plus": {
"splashscreen": {
"autoclose": true,/*是否自动关闭程序启动界面,true表示应用加载应用入口页面后自动关闭;false则需调plus.navigator.closeSplashscreen()关闭*/
"waiting": true
},
/*"statusbar":{
"immersed":"true" // 沉浸式状态栏
},*/
"runmode": "liberate",/*应用的首次启动运行模式,可取liberate或normal,liberate模式在第一次启动时将解压应用资源(Android平台File API才可正常访问_www目录)*/
"signature": "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==",/*可选,保留给应用签名,暂不使用*/
"distribute": {
"apple": {
"appid": "",/*iOS应用标识,苹果开发网站申请的appid,如io.dcloud.HelloH5*/
"mobileprovision": "",/*iOS应用打包配置文件*/
"password": "",/*iOS应用打包个人证书导入密码*/
"p12": "",/*iOS应用打包个人证书,打包配置文件关联的个人证书*/
"devices": "universal",/*iOS应用支持的设备类型,可取值iphone/ipad/universal*/
"frameworks": []
},
"google": {
"packagename": "",/*Android应用包名,如io.dcloud.HelloH5*/
"keystore": "",/*Android应用打包使用的密钥库文件*/
"password": "",/*Android应用打包使用密钥库中证书的密码*/
"aliasname": "",/*Android应用打包使用密钥库中证书的别名*/
"permissions": ["<uses-permission android:name=\"com.android.launcher.permission.INSTALL_SHORTCUT\"/>","<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"com.android.launcher.permission.UNINSTALL_SHORTCUT\"/>"]
},
"orientation": [
"landscape-primary",
"landscape-secondary"
],/*应用支持的方向,portrait-primary:竖屏正方向;portrait-secondary:竖屏反方向;landscape-primary:横屏正方向;landscape-secondary:横屏反方向*/
"icons": {
"ios": {
"prerendered": true, /*应用图标是否已经高亮处理,在iOS6及以下设备上有效*/
/*应用图标,分辨率:512x512,用于自动生成各种尺寸程序图标*/
"iphone": {
"normal": "",/*iPhone普通屏幕程序图标,分辨率:57x57*/
"retina": "",/*iPhone高分屏程序图标,分辨率:114x114*/
/*iPhone iOS7高分屏程序图标,分辨率:120x120*/
"spotlight-normal": "", /*iPhone Spotlight搜索程序图标,分辨率:29x29*/
"spotlight-retina": "", /*iPhone高分屏Spotlight搜索程序图标,分辨率:58x58*/
/*iPhone iOS7高分屏Spotlight搜索程序图标,分辨率:80x80*/
"settings-normal": "", /*iPhone设置页面程序图标,分辨率:29x29*/
"app@2x": "unpackage/res/icons/120x120.png",
"app@3x": "unpackage/res/icons/180x180.png",
"settings@3x": "unpackage/res/icons/87x87.png",
"settings@2x": "unpackage/res/icons/58x58.png",
"spotlight@2x": "unpackage/res/icons/80x80.png",
"spotlight@3x": "unpackage/res/icons/120x120.png",
"notification@3x": "unpackage/res/icons/60x60.png",
"notification@2x": "unpackage/res/icons/40x40.png"
},
"ipad": {
"normal": "", /*iPad普通屏幕程序图标,分辨率:72x72*/
"retina": "", /*iPad高分屏程序图标,分辨率:144x144*/
/*iPad iOS7程序图标,分辨率:76x76*/
/*iPad iOS7高分屏程序图标,分辨率:152x152*/
"spotlight-normal": "", /*iPad Spotlight搜索程序图标,分辨率:50x50*/
"spotlight-retina": "", /*iPad高分屏Spotlight搜索程序图标,分辨率:100x100*/
/*iPad iOS7 Spotlight搜索程序图标,分辨率:40x40*/
/*iPad iOS7高分屏Spotlight搜索程序图标,分辨率:80x80*/
/*iPad设置页面程序图标,分辨率:29x29*/
"app": "unpackage/res/icons/76x76.png",
"app@2x": "unpackage/res/icons/152x152.png",
"settings": "unpackage/res/icons/29x29.png",
"proapp@2x": "unpackage/res/icons/167x167.png",
"spotlight": "unpackage/res/icons/40x40.png",
"settings@2x": "unpackage/res/icons/58x58.png",
"spotlight@2x": "unpackage/res/icons/80x80.png",
"notification": "unpackage/res/icons/20x20.png",
"notification@2x": "unpackage/res/icons/40x40.png"
},
"appstore": "unpackage/res/icons/1024x1024.png"
},
"android": {
"mdpi": "unpackage/res/icons/48x48.png", /*普通屏程序图标,分辨率:48x48*/
"ldpi": "unpackage/res/icons/48x48.png", /*大屏程序图标,分辨率:48x48*/
"hdpi": "unpackage/res/icons/72x72.png", /*高分屏程序图标,分辨率:72x72*/
"xhdpi": "unpackage/res/icons/96x96.png",/*720P高分屏程序图标,分辨率:96x96*/
"xxhdpi": "unpackage/res/icons/144x144.png",
"xxxhdpi": "unpackage/res/icons/192x192.png"
}
},
"splashscreen": {
"ios": {
"iphone": {
"default": "", /*iPhone3启动图片选,分辨率:320x480*/
"retina35": "",/*3.5英寸设备(iPhone4)启动图片,分辨率:640x960*/
"retina40": ""
},
"ipad": {
"portrait": "", /*iPad竖屏启动图片,分辨率:768x1004*/
"portrait-retina": "",/*iPad高分屏竖屏图片,分辨率:1536x2008*/
"landscape": "", /*iPad横屏启动图片,分辨率:1024x748*/
"landscape-retina": "", /*iPad高分屏横屏启动图片,分辨率:2048x1496*/
"portrait7": "", /*iPad iOS7竖屏启动图片,分辨率:768x1024*/
"portrait-retina7": "",/*iPad iOS7高分屏竖屏图片,分辨率:1536x2048*/
"landscape7": "", /*iPad iOS7横屏启动图片,分辨率:1024x768*/
"landscape-retina7": ""
}
},
"android": {
"mdpi": "", /*普通屏启动图片,分辨率:240x282*/
"ldpi": "", /*大屏启动图片,分辨率:320x442*/
"hdpi": "C:/Users/hao/Desktop/preload1.png", /*高分屏启动图片,分辨率:480x762*/
"xhdpi": "C:/Users/hao/Desktop/preload2.png", /*720P高分屏启动图片,分辨率:720x1242*/
"xxhdpi": "C:/Users/hao/Desktop/preload3.png"
}
}
}
}
}
可以真机运行,USB线连接,打开手机的开发者选项,允许USB调试。菜单栏运行——真机运行——选择Hbuilder调试基座即可。光标放在控制台,按下Ctrl+R快捷键,可以在停止运行和运行中切换。
菜单栏发行——云打包——打原生安装包,选择Android,提交到云端,打包后即可下载APK。
第一次打开可能会慢,以后就不会了,如果用户名密码登陆,在Cookie中选择记住密码,以后就会直接登陆进入下一页,打包后的浏览器内核支持SVG。