Hbuilder打包app _hbuilder

恢弘志士之气，不宜妄自菲薄。这篇文章主要讲述Hbuilder打包app相关的知识，希望能为你提供帮助。

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

【Hbuilder打包app】
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="https://www.songbingjia.com/android/js/mui.min.js"> < /script> < link href="https://www.songbingjia.com/android/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="https://www.songbingjia.com/android/css/mui.css" /> < script src="https://www.songbingjia.com/android/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="https://www.songbingjia.com/android/#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 = https://www.songbingjia.com/android/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="https://www.songbingjia.com/android/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="https://www.songbingjia.com/android/#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="https://www.songbingjia.com/android/js/mui.js" type="text/javascript" charset="utf-8"> < /script> < script type="text/javascript"> mui.init()var Sdata = https://www.songbingjia.com/android/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>