minix-template
Version:
minix template
89 lines (87 loc) • 4.41 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Minix Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="format-detection" content="telephone=no, email=no">
<link rel="stylesheet" href="./assets/preview.css">
<script src="./assets/qrcode.js"></script>
</head>
<body>
<header class="header center">
<h1 class="page-title">Minix Preview</h1>
</header>
<div class="content center">
<main class="main">
<div class="mock-phone">
<div class="camera"></div>
<div class="earpiece"></div>
<div class="inner">
<a class="web-page-link" href="" target="_blank" title="Open on new tab">
<svg t="1526896599773" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2499" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M466 146c41.6 0 82.1 7.9 120.4 23.4 39.7 16.1 75.3 39.7 105.8 70.3 58.2 58.3 91.5 135.7 93.6 218 2.1 82-26.8 160.7-81.4 221.6l-11.9 13.3-13.3 11.9C620.7 757 544.9 786 465.9 786c-41.6 0-82.1-7.9-120.4-23.4-39.7-16.1-75.3-39.7-105.8-70.3-30.6-30.6-54.2-66.2-70.3-105.8-15.6-38.4-23.4-79-23.4-120.5 0-41.6 7.9-82.1 23.4-120.4 16.1-39.7 39.7-75.3 70.3-105.8 30.6-30.6 66.2-54.2 105.8-70.3C383.9 153.8 424.4 146 466 146m0-40c-92.1 0-184.3 35.1-254.6 105.4-140.6 140.6-140.6 368.5 0 509.1C281.7 790.8 373.8 826 465.9 826c85.9 0 171.8-30.6 240-91.7L889.8 918l28.3-28.3L734.3 706C861 564.7 856.4 347.3 720.5 211.4 650.2 141.1 558.1 106 466 106z" fill="" p-id="2500"></path></svg>
</a>
<iframe id="preview" src="./default.html" frameborder="0"></iframe>
</div>
<div class="home-btn"></div>
</div>
<div class="qrcode-box">
<a class="qrcode" id="qrcode" target="_blank"></a>
<p class="qrcode-tips">Use <a target="_blank" href="https://weex-project.io/playground.html">Minix playground app</a> to scan it.</p>
<div class="pages-box">
</div>
</div>
</main>
</div>
<script>
(function(){
const page = getUrlParam('page');
const entrys = getUrlParam('entrys');
const cate_name = getUrlParam('projectName') || 'default'
function getUrlParam (key) {
var reg = new RegExp('[?|&]' + key + '=([^&]+)')
var match = location.search.match(reg)
return match && match[1]
}
function createQRCode (url,link) {
var $QR = document.querySelector('#qrcode')
var QR = qrcode(0, 'L')
url += '?_mx_tpl=' + url
$QR.setAttribute('href', link)
QR.addData(url)
QR.make()
$QR.innerHTML = QR.createImgTag(6, 12)
}
if (page) {
var $preview = document.querySelector('#preview')
var $webPageLink = document.querySelector('.web-page-link')
// $preview.src = `/${page.replace('.js', '.html')}`;
// $webPageLink.setAttribute('href', `/${page.replace('.js', '.html')}`);
}
if (entrys) {
var pageEntrys = decodeURI(entrys).replace('\\', '/').split('|');
var $pages = document.querySelector('.pages-box');
var contents = '';
pageEntrys.forEach(function(entry){
if (entry === getUrlParam('page').replace('.js', '')) {
contents += `<a href="?page=${entry}.js&entrys=${entrys}&cate_name=${cate_name}" class="page-item active">${entry}</a>`
}
else {
contents += `<a href="?page=${entry}.js&entrys=${entrys}&cate_name=${cate_name}" class="page-item">${entry}</a>`
}
})
$pages.innerHTML = contents;
}
var domain = window.location.href.match(/(.*)\/web\/preview.html.*/)[1];
const QRURL = `${domain}/${page === 'app.js' ? page.replace('.js', '') : `pages/${page.replace('.js','')}/${page.replace('.js','')}` || 'app'}`
const LINKURL = `${domain}/${page === 'app.js' ? page : `pages/${page.replace('.js','')}/${page}` || 'app.js'}`
createQRCode(QRURL,LINKURL)
console.log('扫码地址：'+ QRURL)
})();
</script>
</body>
<!-- Webpack Dev Server reload -->
</html>