A页面调用B页面
B页面是扫描页面
需要在A页面中引用mui.css 和 mui.js
A页面
<img src="../images/scanning.png" class="iconfont icon-scanning" id="turnTheLight" v-on:click="scans()"></img>
<input type="text" class="weui-input m-t2" placeholder="输入地址" id="url" v-model="result">
<script> var vm = new Vue({ el: '#box', data: { token: "", result: '' }, created: function () { var that = this that.token = localStorage.getItem('token') // alert(window.location.href) that.result = that.GetRequest() // alert(that.result) }, methods: { GetRequest: function () { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("="); var theRequest = strs[1] // alert(strs[1]) } return theRequest; $(".URL").css("display", "block") }, scans: function () { console.log(1) var that = this window.location.href = "scans.html?type=" + 4; } } }); </script>
B页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../css/layer.css" /> <link rel="stylesheet" href="../css/mui.min.css"></link> <script src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/layer.js"></script> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="../js/mui.min.js"></script> <script type="text/javascript" src="../js/common.js"></script> <title>扫码</title> <style type="text/css"> #bcid { 100%; height: 100%; position: absolute; background: #000000; } html, body, div { height: 100%; 100%; } .fbt { color: #0E76E1; 50%; background-color: #ffffff; float: left; line-height: 44px; text-align: center; } </style> </head> <body> <header class="mui-bar mui-bar-nav" style=""> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title" style="color: #0E76E1;">二维码扫描</h1> <span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span> </header> <div id="bcid"> <!--盛放扫描控件的div--> </div> <!-- <div class="mui-bar mui-bar-footer" style="padding: 0px;"> <div class="fbt" onclick="scanPicture();">从相册选择二维码</div> <div class="fbt mui-action-back">取 消</div> </div> --> <script type="text/javascript"> $(document).ready(function () { GetRequest()
// window.type接受不同页面传递的参数 这里接收到的参数是4 window.type = GetRequest() }) function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); var strs = str.split("="); var theRequest = strs[1] } return theRequest; } var height = window.innerHeight + 'px';//获取页面实际高度 var width = window.innerWidth + 'px'; document.getElementById("bcid").style.height = height; document.getElementById("bcid").style.width = width; scan = null;//扫描对象 mui.plusReady(function () { //通过mui初始化扫描 mui.init(); startRecognize(); }); function startRecognize() { //开启扫描 try { var filter; //自定义的扫描控件样式 var styles = { frameColor: "#29E52C", scanbarColor: "#29E52C", background: "" } //扫描控件构造 scan = new plus.barcode.Barcode('bcid', filter, styles); scan.onmarked = onmarked; scan.onerror = onerror; //扫描错误 scan.start(); //打开关闭闪光灯处理 var flag = false; document.getElementById("turnTheLight").addEventListener('tap', function () { if (flag == false) { scan.setFlash(true); flag = true; } else { scan.setFlash(false); flag = false; } }); } catch (e) { alert("出现错误啦: " + e); } }; function onerror(e) { //错误弹框 alert(e); }; function onmarked(type, result, file) { //这个是扫描二维码的回调函数，type是扫描二维码回调的类型 var text = ''; switch (type) { //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果 case plus.barcode.QR: text = 'QR: '; break; case plus.barcode.EAN13: text = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break; } //分析扫描结果：是URL就跳转 ，不是就提示 if (window.type == 1) { if (result == "") { plus.nativeUI.confirm(result, function (i) { if (i.index == 0) { // window.location.href = "addAContact.html?result=" + result window.location.href = "cashWithdrawal.html?result=" + result plus.runtime.openURL(result); // alert(result) } else { window.location.href = "cashWithdrawal.html?result=" + result // alert(result) } }, '', ['打开', '取消']); } else { window.location.href = "cashWithdrawal.html?result=" + result // plus.nativeUI.alert(result); // alert(result) scan.close(); } }else if(window.type == 2){ if (result == "") { plus.nativeUI.confirm(result, function (i) { if (i.index == 0) { // window.location.href = "addAContact.html?result=" + result window.location.href = "cashWithdrawalBTC.html?result=" + result plus.runtime.openURL(result); // alert(result) } else { window.location.href = "cashWithdrawalBTC.html?result=" + result // alert(result) } }, '', ['打开', '取消']); } else { window.location.href = "cashWithdrawalBTC.html?result=" + result // plus.nativeUI.alert(result); // alert(result) scan.close(); } }else if(window.type == 3){ if (result == "") { plus.nativeUI.confirm(result, function (i) { if (i.index == 0) { // window.location.href = "addAContact.html?result=" + result window.location.href = "cashWithdrawalETH.html?result=" + result plus.runtime.openURL(result); // alert(result) } else { window.location.href = "cashWithdrawalETH.html?result=" + result // alert(result) } }, '', ['打开', '取消']); } else { window.location.href = "cashWithdrawalETH.html?result=" + result // plus.nativeUI.alert(result); // alert(result) scan.close(); } }else if(window.type == 4){ if (result == "") { plus.nativeUI.confirm(result, function (i) { if (i.index == 0) { window.location.href = "addAContact.html?result=" + result plus.runtime.openURL(result); // alert(result) } else { window.location.href = "cashWithdrawal.html?result=" + result // alert(result) } }, '', ['打开', '取消']); } else { window.location.href = "addAContact.html?result=" + result // plus.nativeUI.alert(result); // alert(result) scan.close(); } } }; </script> </html>