yarn 打包html html打包成app

转载

mob6454cc6d3e23 2024-05-16 09:49:03

文章标签 yarn 打包html ico android 分屏 文章分类 Yarn 大数据

实习时，独立负责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。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。