quickgame-server
Version:
quickgame server
75 lines (70 loc) • 2.16 kB
HTML
<html>
<head>
<meta charset="UTF-8" >
<title>调试器</title>
<style>
*{ padding:0;margin:0 }
body{background-color: #eee;text-align: center;line-height: 1.5;}
.hide{display: none}
.mod-qrcode{ width:500px; margin:0 auto;margin-top:60px;}
.mod-qrcode .q-img{width:350px;margin-top: 20px;}
.mod-qrcode .section{margin-top: 20px;text-align:left;background-color:#fcf8e3;padding:15px}
</style>
</head>
<body>
<div class="mod-qrcode">
<h2>快应用网页调试</h2>
<img class="q-img" src="">
<div class="section">
<p>1. 扫码安装rpk包</p>
<p>2. 在手机的调试器上点击<span>【开始调试】</span>，启动调试界面</p>
</div>
<div class="debug section hide"></div>
<div class="update section hide"></div>
</div>
<script src="./socket.io.js"></script>
<script>
(function(){
const $ = (selector) => {
return document.querySelector(selector)
}
function genQrcode(){
$('.q-img').src = `/qrcode?t=${(new Date-0)}`
}
function bindEvents () {
const socket = io.connect(location.origin) // eslint-disable-line no-undef
socket.on('appRegistered', (data) => {
console.info(`on receiving appRegistered message: ${JSON.stringify(data)}`)
appRegistered(data)
})
.on('informUpdate', () => {
console.info('on receiving informUpdate')
informUpdate()
})
}
function appRegistered(data){
const ele = $('.debug')
const value = data.inspectorUrl ? 'block':'none'
const tpl = `
<span>当前调试的应用是：${data.application}</span>
<a target='_blank' href="${data.inspectorUrl}">进入调试页面</a>
`
ele.innerHTML = tpl
ele.style.display = value
}
function informUpdate(){
const ele = $('.update')
const tpl = `
调试器已有重要更新，请
<a href="https://www.quickapp.cn/docCenter/post/69">更新调试器</a>
`
ele.innerHTML = tpl;
ele.style.display = 'block'
}
genQrcode();
bindEvents();
}())
</script>
</body>
</html>