作者：至高吾尚

概述

很多APP应用中会用到二维码扫描功能，对于APP开发者来说，有时会遇到客户对二维码扫描页面的样式有所要求，本文讲述如何使用APICloud 模块技术进行二维码扫描功能的开发。本文提供两种二维码实现方式，一种是使用FNScanner模块封装好的二维码扫描页面，另一种是使用HTML代码自定义扫描页面的样式。

可在GitHub上下载本项目DEMO源码 URL地址：https://github.com/IT-SDJ/QRCodeDEMO

开发流程

在APICloud 的控制台新建一个Native应用

在模块Store 将 FNScanner 模块添加到新建的应用

FNScanner 模块是一个二维码/条形码扫描器。在 iOS 平台上本模块底层集成了系统自带扫码功能。

下载代码到本地

编写二维码功能代码

同步代码到云端

云编译

扫描二维码安装APP,体验开发效果

二维码功能核心代码

二维码功能主页面代码

开启应用进入后台和恢复前台的监听逻辑，防止进入后台出现显示错误

    var FNScanner;  // 二维码模块对象
    apiready = function() {
        var eHeader = $api.byId('header');
        $api.fixStatusBar(eHeader); // 顶部header的沉浸式修复


        FNScanner = api.require('FNScanner');
        api.addEventListener({ // 通知当前本模块app进入后台。此时模块会进行一些资源的暂停存储操作，防止照相机回来之后黑屏
            name:'pause'
        }, function(ret, err){
            FNScanner.onPause();
        });


        api.addEventListener({ //通知当前本模块app进入回到前台。此时模块会进行一些资源的恢复操作，防止照相机回来之后黑屏
            name:'resume'
        }, function(ret, err){
            FNScanner.onResume();
        });
    };

初始化FNScanner模块

如果是使用FNScanner模块封装的扫描方式


 function fnOpenNormalQRCode() {  // 打开默认的二维码模块
  FNScanner.openScanner({
      autorotation: true
  }, function(ret, err) {
      if (ret) {
          if(ret.eventType == "success") { // 模块扫描成功事件
              api.alert({
                  title: '扫描结果',
                  msg: ret.content,
              }, function(ret, err){

}); } } else { alert(JSON.stringify(err)); } }); }

- 如果是使用自定义样式的扫描页面

function fnOpenCustomQRCode() { // 打开自定义样式的二维码功能模块

FNScanner.openView({ // 打开二维码页面 rect: { //扫描器的位置及尺寸，在安卓平台宽高比须跟屏幕宽高比一致，否则摄像头可视区域的图像可能出现少许变形；w和h属性最好使用api.winWidth和api.winHeight,这样不会导致变形，也不会出现手机必须要在一定的距离上才能扫描出来的现象 x: 0, y: 0, w: 'auto', h: 'auto' }, rectOfInterest: { // （可选项）在扫码区域上的扫码识别区域，仅在iOS平台有效 x: (api.winWidth-250)/2, y: (api.winHeight-250)/2, w: 250, h: 250 }, sound: 'widget://res/qrcode.wav' // 自定义设置扫描后的声音 }, function(ret, err) { if (ret) { if ('show' == ret.eventType) { //模块加载展现事件

} else if(ret.eventType == "success") { // 模块扫描成功事件 fnCloseCustomQRCode();

api.alert({ title: '扫描结果', msg: ret.content, }, function(ret, err){

});

} else { alert(JSON.stringify(err)); } } })

//调用打开自定义的frame页面方法 setTimeout(function(){ fnOpenSubFrame(); },500); }

3. 打开二维码自定义样式的 Frame页面的方法

function fnOpenSubFrame() { // 打开二维码自定义的frame样式框页面
    api.openFrame({
        name: 'qrcode_frm',
        url: './html/qrcode_frm.html',
        rect: {  // 采用 margin相对布局
            marginTop: 0,
            h: 'auto',
            w: 'auto'
        },
        bounces: false,
        bgColor: 'rgba(0,0,0,0)',
    });
}
```

关闭自定义页面的方法封装

function fnOpenSubFrame() { // 打开二维码自定义的frame样式框页面
        api.openFrame({
            name: 'qrcode_frm',
            url: './html/qrcode_frm.html',
            rect: {  // 采用 margin相对布局
                marginTop: 0,
                h: 'auto',
                w: 'auto'
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0)',
        });
    }

二维码自定义样式的 Frame页面的相关代码使用HTML+CSS+JS 开发一个带自动上下移动横线的扫描方框

CSS 样式代码

    <style>
        html,
        body {
            height: 100%;
            background-color: rgba(0,0,0,0);
        }
        .qrcode-box {
            width: 250px;
            height: 250px;
            position: absolute;
        }


        .qrcode-box:after {
            -webkit-animation: rotateAnim linear 3.68s infinite;
            animation: rotateAnim linear 3.68s infinite;
            content: '';
            position: absolute;
            display: block;
            width: 100%;
            height: 2px;
            background-color: #d8be26;
        }
        /*二维码上下移动的扫描横线*/


        @keyframes rotateAnim {
            from {
                top: 0;
            }
            to {
                top: 100%;
            }
        }


        @-webkit-keyframes rotateAnim {
            from {
                top: 0;
            }
            to {
                top: 100%;
            }
        }
        /*二维码扫描框的四角*/


        .qrcode-box span {
            width: 14px;
            height: 14px;
            position: absolute;
            border: 2px solid #1fa2ff;
        }


        .qrcode-box span:nth-child( 1) {
            left: 0;
            top: 0;
            border-width: 2px 0 0 2px;
        }


        .qrcode-box span:nth-child( 2) {
            right: 0;
            top: 0;
            border-width: 2px 2px 0 0;
        }


        .qrcode-box span:nth-child( 3) {
            right: 0;
            bottom: 0;
            border-width: 0 2px 2px 0;
        }


        .qrcode-box span:nth-child( 4) {
            left: 0;
            bottom: 0;
            border-width: 0 0 2px 2px;
        }
    </style>

HTML Body部分代码

<body>
    <!-- 二维码扫描框 -->
    <div id="qrcode-box" class="qrcode-box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

JavaScript部分定位扫描方框元素位置的代码

<script type="text/javascript">


    apiready = function() {


        fnShowQRScannerBox();
    }


    function fnShowQRScannerBox() { // 根据屏幕实际宽度修正二维码扫描框的位置并加载显示
        var eQRCodeBox = $api.byId('qrcode-box');
        var top = (api.winHeight - 250)/2;
        var left = (api.winWidth - 250)/2;
        $api.css(eQRCodeBox, 'top: '+top+'px;left:'+left+'px;display:block;');
    }
</script>

二维码扫描功能的实现[自定义扫描样式]

概述

开发流程

二维码功能核心代码