vue-cli-plugin-weex
Version:
weex plugin for vue-cli
122 lines (109 loc) • 6.02 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></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>
<script src="/assets/port.js"></script>
</head>
<body>
<!-- <header class="header center">
<h1 class="page-title">Weex 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="/" frameborder="0"></iframe>
</div>
<div class="home-btn"></div>
</div>
<div class="qrcode-box">
<a class="qrcode" id="qrcode" target="_blank"></a>
<div>weex bundle地址：<a class="qrcode-tips" id="urlPath" href="https://weex-project.io/playground.html"></a></div>
<div>web预览地址：<a class="qrcode-tips" id="webUrl" target="_blank" id="urlPath" href="https://weex-project.io/playground.html"></a></div>
<p class="qrcode-tips">Use <a target="_blank" href="https://weex-project.io/playground.html">Weex
playground app</a> to scan it.</p>
<div class="pages-box">
</div>
</div>
</main>
</div>
<script>
(function () {
const entrys = getUrlParam('entrys');
const ip = getUrlParam('ip');
var pageEntrys = decodeURI(entrys).replace('\\', '/').split('|');
const page = getUrlParam('page')||pageEntrys[0];
const weexPort = window.weexPort||'8092'
const webPort = window.webPort||'8089'
function getUrlParam(key) {
var reg = new RegExp('[?|&]' + key + '=([^&]+)')
var match = location.search.match(reg)
return match && match[1]
}
function createQRCode(url) {
var $QR = document.querySelector('#qrcode')
var $urlPath = document.querySelector('#urlPath')
$urlPath.innerHTML = url
$urlPath.setAttribute('href', url)
var QR = qrcode(0, 'L')
url += '?_wx_tpl=' + url
$QR.setAttribute('href', url)
QR.addData(url)
QR.make()
$QR.innerHTML = QR.createImgTag(6, 12)
}
function chagePage(page){
var pageHtml = page +'.html';
// 切换iframe
var $preview = document.querySelector('#preview')
var $webPageLink = document.querySelector('.web-page-link')
$preview.src = 'http://localhost:'+webPort+'/' + pageHtml;
$webPageLink.setAttribute('href', 'http://localhost:'+webPort+'/' + pageHtml);
//按钮
var $pages = document.querySelector('.pages-box');
var contents = '';
pageEntrys.forEach(function (entry) {
if (entry === page) {
// contents += '<div class="page-item active">' + entry + '</div>';
contents += '<a href="/preview.html?page=' + entry + '&entrys=' + entrys +
'&ip=' + ip + '" class="page-item active">' + entry + '</a>';
} else {
// contents += '<div class="page-item">' + entry + '</div>';
contents += '<a href="/preview.html?page=' + entry + '&entrys=' + entrys +
'&ip=' + ip + '" class="page-item">' + entry + '</a>';
}
})
$pages.innerHTML = contents;
createQRCode('http://'+ ip +':' + weexPort +'/' + page+'.weex.js');
// 显式的增加展示web地址
var $webUrlPath = document.querySelector('#webUrl')
var webUrl = 'http://localhost:'+webPort+'/' + pageHtml
$webUrlPath.innerHTML = webUrl
$webUrlPath.setAttribute('href', webUrl)
}
// 切换状态
chagePage(page);
})();
</script>
</body>
</html>