作者：至高吾尚

概述

很多APP應(yīng)用中會(huì)用到二維碼掃描功能，對(duì)于APP開發(fā)者來說，有時(shí)會(huì)遇到客戶對(duì)二維碼掃描頁面的樣式有所要求，本文講述如何使用APICloud 模塊技術(shù)進(jìn)行二維碼掃描功能的開發(fā)。本文提供兩種二維碼實(shí)現(xiàn)方式，一種是使用FNScanner模塊封裝好的二維碼掃描頁面，另一種是使用HTML代碼自定義掃描頁面的樣式。

可在GitHub上下載本項(xiàng)目DEMO源碼 URL地址：https://github.com/IT-SDJ/QRCodeDEMO

開發(fā)流程

在APICloud 的控制臺(tái)新建一個(gè)Native應(yīng)用

在模塊Store 將 FNScanner 模塊添加到新建的應(yīng)用

FNScanner 模塊是一個(gè)二維碼/條形碼掃描器。在 iOS 平臺(tái)上本模塊底層集成了系統(tǒng)自帶掃碼功能。

下載代碼到本地

編寫二維碼功能代碼

同步代碼到云端

云編譯

掃描二維碼安裝APP,體驗(yàn)開發(fā)效果

二維碼功能核心代碼

二維碼功能主頁面代碼

開啟應(yīng)用進(jìn)入后臺(tái)和恢復(fù)前臺(tái)的監(jiān)聽邏輯，防止進(jìn)入后臺(tái)出現(xiàn)顯示錯(cuò)誤

    var FNScanner;  // 二維碼模塊對(duì)象
    apiready = function() {
        var eHeader = $api.byId('header');
        $api.fixStatusBar(eHeader); // 頂部header的沉浸式修復(fù)


        FNScanner = api.require('FNScanner');
        api.addEventListener({ // 通知當(dāng)前本模塊app進(jìn)入后臺(tái)。此時(shí)模塊會(huì)進(jìn)行一些資源的暫停存儲(chǔ)操作，防止照相機(jī)回來之后黑屏
            name:'pause'
        }, function(ret, err){
            FNScanner.onPause();
        });


        api.addEventListener({ //通知當(dāng)前本模塊app進(jìn)入回到前臺(tái)。此時(shí)模塊會(huì)進(jìn)行一些資源的恢復(fù)操作，防止照相機(jī)回來之后黑屏
            name:'resume'
        }, function(ret, err){
            FNScanner.onResume();
        });
    };

初始化FNScanner模塊

如果是使用FNScanner模塊封裝的掃描方式


 function fnOpenNormalQRCode() {  // 打開默認(rèn)的二維碼模塊
  FNScanner.openScanner({
      autorotation: true
  }, function(ret, err) {
      if (ret) {
          if(ret.eventType == "success") { // 模塊掃描成功事件
              api.alert({
                  title: '掃描結(jié)果',
                  msg: ret.content,
              }, function(ret, err){

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

- 如果是使用自定義樣式的掃描頁面

function fnOpenCustomQRCode() { // 打開自定義樣式的二維碼功能模塊

FNScanner.openView({ // 打開二維碼頁面 rect: { //掃描器的位置及尺寸，在安卓平臺(tái)寬高比須跟屏幕寬高比一致，否則攝像頭可視區(qū)域的圖像可能出現(xiàn)少許變形；w和h屬性最好使用api.winWidth和api.winHeight,這樣不會(huì)導(dǎo)致變形，也不會(huì)出現(xiàn)手機(jī)必須要在一定的距離上才能掃描出來的現(xiàn)象 x: 0, y: 0, w: 'auto', h: 'auto' }, rectOfInterest: { // （可選項(xiàng)）在掃碼區(qū)域上的掃碼識(shí)別區(qū)域，僅在iOS平臺(tái)有效 x: (api.winWidth-250)/2, y: (api.winHeight-250)/2, w: 250, h: 250 }, sound: 'widget://res/qrcode.wav' // 自定義設(shè)置掃描后的聲音 }, function(ret, err) { if (ret) { if ('show' == ret.eventType) { //模塊加載展現(xiàn)事件

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

api.alert({ title: '掃描結(jié)果', msg: ret.content, }, function(ret, err){

});

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

//調(diào)用打開自定義的frame頁面方法 setTimeout(function(){ fnOpenSubFrame(); },500); }

3. 打開二維碼自定義樣式的 Frame頁面的方法

function fnOpenSubFrame() { // 打開二維碼自定義的frame樣式框頁面
    api.openFrame({
        name: 'qrcode_frm',
        url: './html/qrcode_frm.html',
        rect: {  // 采用 margin相對(duì)布局
            marginTop: 0,
            h: 'auto',
            w: 'auto'
        },
        bounces: false,
        bgColor: 'rgba(0,0,0,0)',
    });
}
```

關(guān)閉自定義頁面的方法封裝

function fnOpenSubFrame() { // 打開二維碼自定義的frame樣式框頁面
        api.openFrame({
            name: 'qrcode_frm',
            url: './html/qrcode_frm.html',
            rect: {  // 采用 margin相對(duì)布局
                marginTop: 0,
                h: 'auto',
                w: 'auto'
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0)',
        });
    }

二維碼自定義樣式的 Frame頁面的相關(guān)代碼使用HTML+CSS+JS 開發(fā)一個(gè)帶自動(dòng)上下移動(dòng)橫線的掃描方框

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;
        }
        /*二維碼上下移動(dòng)的掃描橫線*/


        @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() { // 根據(jù)屏幕實(shí)際寬度修正二維碼掃描框的位置并加載顯示
        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>

二維碼掃描功能的實(shí)現(xiàn)[自定義掃描樣式]

概述

開發(fā)流程

二維碼功能核心代碼