Hbuilder打包app

Posted afly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Hbuilder打包app相关的知识,希望对你有一定的参考价值。

Hbuilder打包注意事项
1,选好图标、权限
2,不要去除 mui的css js 文件
3,选择安卓程序进行打包
现有的bug:只能在打开app后选择一次房间id(直播),之后再选择id就无效了,不能改变房间id还是原来的id,

  

index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" id="live">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">直播</span>
			</a>
			<a class="mui-tab-item" id=‘whtch‘>
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">观看</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-chatbubble"></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>

	</body>
	<script type="text/javascript">
		mui.init({
			subpages: [{
				url: ‘live.html‘, //一进入app就显示main页面
				id: ‘live.html‘,
				styles: {
					top: ‘0px‘, //mui标题栏默认高度为45px;
					bottom: ‘50px‘ //默认为0px,可不定义;
				},

			}],

		});


		document.getElementById(‘live‘).addEventListener(‘tap‘, function() {
			mui.openWindow({
				url: ‘live.html‘,
				id: ‘live.html‘,
				styles: {
					top: ‘0px‘, //mui标题栏默认高度为45px;
					bottom: ‘50px‘ //默认为0px,可不定义;
				}
			})

		});
		
		document.getElementById(‘whtch‘).addEventListener(‘tap‘, function() {
			mui.openWindow({
				url: ‘video.html‘,
				id: ‘video.html‘,
				styles: {
					top: ‘0px‘, //mui标题栏默认高度为45px;
					bottom: ‘50px‘ //默认为0px,可不定义;
				}
			})

		});
	</script>

</html>

  

live.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>我的直播间</title>
		<link rel="stylesheet" type="text/css" href="css/mui.css" />

		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body style="margin:0;padding:0;text-align:center;">
		我的直播
		<br/>
		<br/>
		<style type="text/css">
			#popover {
				height: 80px;
				width: 100px;
			}
		</style>
		<div id="popover" class="mui-popover">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<span onclick="chose_id(‘0001‘)">0001</span>

						</li>
						<li class="mui-table-view-cell">
							<span onclick="chose_id(‘0002‘)">0002</span>
						</li>
						<li class="mui-table-view-cell">
							<span onclick="chose_id(‘0003‘)">0003</span>
						</li>
						<li class="mui-table-view-cell">
							<span onclick="chose_id(‘0004‘)">0004</span>

					</ul>
				</div>
			</div>
		</div>
		<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary">选择房间id</a>
		<button onclick="preview()">开始</button>
		<button onclick="switchCamera()">切换摄像头</button>
		<button onclick="stopPreview()" id=‘end‘>结束直播</button>
		
		<br/>
		<br/>
		<br/>
		<span id=‘flag‘ style="float: left;margin-left:10px;">aaaa</span>
		<br/>
		

		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
	<script type="text/javascript">
		mui.init()
		var Sdata = null
		var live_id = null
		var pusher = null;
		mui.plusReady(function() {
			Sdata = plus.webview.currentWebview();
			console.log(JSON.stringify(Sdata));

			if(Sdata.home_id) {
				live_id = Sdata.home_id
			} else {
				live_id = ‘0001‘
			}
			document.getElementById("flag").innerText = ‘id:‘ + live_id //试了很多次只有这样才能解决js异步的问题

		})
		mui(‘.mui-scroll-wrapper‘).scroll()
		document.addEventListener(‘plusready‘, plusReady, false);
		// H5 plus事件处理
		function plusReady() {
			// 创建直播推流控件
			pusher = new plus.video.LivePusher(‘pusher‘, {
				url: ‘rtmp://www.perfey.top:1935/live/‘ + live_id
			});
		}
		// 预览
		function preview() {
			pusher.start();
			//			pusher.preview();
		}
		// 结束
		function stopPreview() {
			pusher.stop({
				preview: false
			});
			pusher.close()
		};

		// 切换摄像头
		function switchCamera() {
			pusher.switchCamera();
		}

		function chose_id(id) {
			mui.openWindow({
				url: ‘live.html‘,
				id: ‘live.html‘,
				styles: {
					top: ‘0px‘, //mui标题栏默认高度为45px;
					bottom: ‘50px‘ //默认为0px,可不定义;
				},
				extras: {
					"home_id": id
				},
				createNew: true
			})
		}

		//			console.log(id);
		//			live_id = id;
		//			document.getElementById("flag").innerText = ‘id:‘ + live_id;
		//			pusher.stop({
		//				preview: false
		//			});
		//			pusher.options.url = ‘rtmp://www.perfey.top:1935/live/‘ + live_id
		//			pusher = new plus.video.LivePusher(‘pusher‘, {
		//				url: ‘rtmp://www.perfey.top:1935/live/‘ + live_id
		//			});
		//			console.log(JSON.stringify(pusher))
		//			pusher.start();

		//		}
		//		document.getElementById("openPopover").onclick = function(){
		//			mui.post(‘http://127.0.0.1:8000/live/get_id/‘, {
		//			}, function(data) {
		//				
		//				alert(1111)
		//				console.log(data);
		//
		//			}, ‘json‘);
		//			
		//		}
	</script>

</html>

  

video.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>Video Example</title>
		<link rel="stylesheet" type="text/css" href="css/mui.css" />

	</head>

	<body style="margin:0;padding:0;text-align:center;">
		观看直播
		<br/><br/>
		<style type="text/css">
			#popover {
				height: 80px;
				width: 100px;
			}
		</style>
		<div id="popover" class="mui-popover">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<span onclick="chose_id(‘0001‘)">0001</span>

						</li>
						<li class="mui-table-view-cell">
							<span onclick="chose_id(‘0002‘)">0002</span>
						</li>
						<li class="mui-table-view-cell">
							<span onclick="chose_id(‘0003‘)">0003</span>
						</li>
						<li class="mui-table-view-cell">
							<span onclick="chose_id(‘0004‘)">0004</span>

					</ul>
				</div>
			</div>
		</div>
		<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary">选择直播间</a>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="closeVideo()">关闭视频</button>
		<br/>
		<span id=‘flag‘ style="float: left;margin-left:10px;"></span>
		<br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
	<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init()

		var Sdata = null
		var live_id = null
		mui.plusReady(function() {
			Sdata = plus.webview.currentWebview();
			console.log(JSON.stringify(Sdata));

			if(Sdata.home_id) {
				live_id = Sdata.home_id
			} else {
				live_id = ‘0001‘
			}
			document.getElementById("flag").innerText = ‘id:‘ + live_id //试了很多次只有这样才能解决js异步的问题

		})

		mui(‘.mui-scroll-wrapper‘).scroll()
		var video = null;
		// H5 plus事件处理
		function plusReady() {
			// 创建视频播放控件
			video = new plus.video.VideoPlayer(‘video‘, {
				//	src:‘http://www.perfey.top/media/video/1‘ 这个不行,地址发送的必须是mp4格式,我自己的是数据流,浏览器可以识别,这个却不行
				//src: ‘http://192.168.43.5:5000/myvideo‘ // 播放视频
				src: ‘rtmp://www.perfey.top/live/‘ + live_id //直播拉流,这个是可以的,123是直播间的房间id可以更改的,我这里没有设置防盗链,以后可以玩玩
				//src: ‘images/1.mp4‘ 
			});
		}
		document.addEventListener(‘plusready‘, plusReady, false);
		// 播放视频
		function playVideo() {
			video.play();
		};
		// 关闭视频
		function closeVideo() {
			video.close();
		}

		function chose_id(id) {
			mui.openWindow({
				url: ‘video.html‘,
				id: ‘video.html‘,
				styles: {
					top: ‘0px‘, //mui标题栏默认高度为45px;
					bottom: ‘50px‘ //默认为0px,可不定义;
				},
				extras: {
					"home_id": id
				},
				createNew: true
			})
		}
	</script>

</html>

  

以上是关于Hbuilder打包app的主要内容,如果未能解决你的问题,请参考以下文章

4.)介绍演示使用HBuilder打包出一个App的方法

简单把网站打包成APP– HBuilder

hbuilder怎么打包app

武汉第八十期如何使用HBuilder打包app?

自己如何把网站打包成APP – 利用HBuilder

hbuilder怎么打包ios的app