需要扫码线的拿去

aTiger

最近公司开发，用到了扫码功能，就用了官方的FNScanner模块，发现没有扫码线，而boss说这个必须有，就自己捣鼓了个，想着一直老看别人的代码，蛮不好意思，今天也贴下自己的代码，希望能给大家带来帮助，废话不多少，直接贴代码。

显示扫码的html页面。
<body tapmode="">
<div id="wrap" class="bg">
      <div id="header" >

         <div class="aui-form"  style="padding-top:10px">
         <div class="aui-input-row">

         <input type="text" class="aui-input" placeholder="code" id="code"/>
         <label class="aui-input-addon btn" id="sub">提交</label>
        </div>
         </div>
      </div>
      <div id="main" class="">

      </div>

</div>
</body>

然后是扫码html页面对应的js页面

apiready = function(){
FNScanner = api.require('FNScanner');
openScanView();

};

//打开扫码区
function openScanView(){
var frameWidth = api.frameWidth;
var frameHeight = api.frameHeight;
FNScanner.openView({
rect:{
x:frameWidth/2-100,
y:frameHeight/2-100,
w:200,
h:200,
},
      autorotation: true,
},function( ret, err ){
      if( ret ){
         //alert( JSON.stringify( ret ) );
         if(ret.eventType=="show")
         {
            openscanline(frameWidth/2-100,frameHeight/2-100);
         }
         if(ret.eventType=="success")
         {
               var code=$api.byId("code");
            code.value=ret.content;
            //FNScanner.closeView();
            openScanView();
         }
      }else{
         alert( JSON.stringify( err ) );
      }
});
}
//打开扫码线页面
function openscanline(w,h){
api.openFrame({
      name: 'wxscanline',
      url: 'wxscanline.html',
      rect: {
      x:w,
      y:h,
      w:200,
      h:200
      },
});
}
//获取二维码的内容
function submit(){
var code=$api.byId("code");
var content=code.value;
if(content==''){
alert("二维码不能为空！");
}else{
code.value='';

}
}

最后是扫码线的页面，由于js比较少，就偷个懒，把js代码直接放html页面了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
html,body{
width:100%;
background:transparent;
}
#line{
width:200px;
height:20px;
background:transparent;
border-bottom:1px solid #0062CC;
}
#line:active{
height:100px;
}

</style>
</head>
<body tapmode=''>
<div id="line">

</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var h=0;
apiready = function(){

setInterval(moveline,20);

};
function moveline(){
var line=$api.byId('line');
if(h==200)
{
h=0;
}else{
h=h+1;
}
var hstr=h+'px';
//$api.attr(line,'height',hstr);
   document.getElementById('line').style.cssText="height:"+hstr;
//alert($api.attr(line,'height'));

}
</script>
</html>

欢迎拍砖指正。

WinnieT

这种方法打开扫描窗口可以将扫描窗口显示出来，但是如何做到将扫描框以外的部分也能像openScanner那样的效果？

caizhu

支持

aPathFinder

如何把扫描的线置顶在最上层呢

Madision

不会闪退？

深渊 · 回复于2016-10-11 16:13:00

非常感谢你的代码，给我很大的帮助。谢谢楼主

yuanxinxin · 回复于2016-11-16 14:49:39

WinnieT 发表于 2016-6-17 15:14
这种方法打开扫描窗口可以将扫描窗口显示出来，但是如何做到将扫描框以外的部分也能像openScanner那样的效 ...

同样想知道

小丁Oo

你好，我想问一下，你的程序闪退吗？
我用了openView后闪退。

APICloud--玲玲

感谢您的分享！有好的内容继续分享哦~

we123

第一次打开扫码器时扫码线不能出来，重新刷新页面才能正常显示。是什么问题？