apicloud apicloud

注册
查看: 2046|回复: 61

[模块教程] 【官方版主分享】FNScanner二维码接口openView自定义扫码Demo

主题:
39
帖子:
9164
云币:
9975

端午节社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

[模块教程] 【官方版主分享】FNScanner二维码接口openView自定义扫码Demo

2046 61 | 发表于 2019-5-30 13:27:56 |阅读模式 | |
本帖最后由 Mr.ZhouHeng 于 2019-10-22 09:36 编辑

FNScanner 模块是一个二维码/条形码扫描器,是 scanner 模块的优化升级版。在 iOS 平台上本模块底层集成了 Zbar 和系统自带的条形码/二维码分析库,由于 IOS 系统平台在 IOS7.0 以上才开放了二维码/条码的相关接口,所以在 IOS6 上运行时模块会调用开源库 Zbar 去读取解析二维码/条码。只有在 IOS7 以上版本才会调用系统自带扫码功能。

模块文档地址:
https://docs.apicloud.com/Client-API/Func-Ext/FNScanner

模块需要注意的地方:

1. 注意:使用本模块前,需在云编译页面勾选添加访问摄像头权限,若要访问相册也需勾选申请访问相册权限
2.  不能同时使用的模块:wwprint

本模块封装了两套扫码方案:

方案一

开发者通过调用 openScanner 接口直接打开自带默认 UI 效果的二维码/条形码扫描页面,本界面相当于打开一个 window 窗口,其界面内容不支持自定义。用户可在此界面实现功能如下:
打开关闭闪关灯
从系统相册选取二维码/条码图片进行解密操作
打开摄像头,自动对焦扫码想要解析的二维码/条码

方案二
通过 openView 接口打开一个自定义大小的扫描区域(本区域相当于打开一个 frame)进行扫描。开发者可自行 open 一个 frame 贴在模块上,从而实现自定义扫描界面的功能。然后配合使用 setFrame、closeView、switchLight 等接口实现开关闪光灯、重设扫描界面位置大小、图片解码、字符串编码等相关功能。详情请参考模块接口参数。


方案一我就不介绍,因为直接调取接口就能直接显示一个扫码ui界面,直接使用就可以,
楼主本帖分享的是方案一无法满足ui设计效果前提下,怎么实现ui自定义的效果;

方案二完成页面截图

方案二打开闪光灯效果界面截图




第一步:首先先打开openwin,然后再打开模块 ,然后延迟打开一个frm自定义一个扫码见面。大家上面看到扫码是这种思路的;
废话不多说上部分核心源码
  1.     var FNScanner, eHeader, headerH;
  2.     apiready = function() {
  3.         //应用全局FNScanner模块
  4.         FNScanner = api.require('FNScanner');
  5.         //定义根据id获取dom
  6.         eHeader = $api.byId('header');
  7.         //设置头部沉浸式
  8.         $api.fixStatusBar(eHeader);
  9.         //获取头部高度
  10.         headerH = $api.offset(eHeader).h;

  11.         //监听应用回到前台
  12.         api.addEventListener({
  13.             name: 'resume'
  14.         }, function(ret, err) {
  15.             FNScanner.onResume();
  16.         });

  17.         //监听应用回到后台
  18.         api.addEventListener({
  19.             name: 'pause'
  20.         }, function(ret, err) {
  21.             FNScanner.onPause();
  22.         });
  23.       
  24.         fnOpenFNScanner();
  25.     }

  26.     function fnOpenFNScanner() {
  27.         // 打开扫码模块
  28.         FNScanner.openView({
  29.             //autorotation: true,
  30.             fixedOn: api.frameName,
  31.             rect: {
  32.                 x: 0,
  33.                 y: headerH,
  34.                 w: api.frameWidth,
  35.                 h: api.frameHeight
  36.             }
  37.         }, function(ret, err) {
  38.             if (ret) {
  39.                 if (ret.eventType == 'success' && ret.content != '') {
  40.                     // 扫码成功执行函数操作传值
  41.                     fnOpenCouple(ret.content);
  42.                     return;
  43.                 }
  44.                 if (ret.eventType == 'cameraError') {
  45.                     api.toast({
  46.                         msg: '请开启app访问手机摄像头权限',
  47.                         duration: 2000,
  48.                         location: 'bottom'
  49.                     });
  50.                     setTimeout(function() {
  51.                         // 关闭扫码器  关闭扫码界面
  52.                         back();
  53.                     }, 300);
  54.                     return;
  55.                 }
  56.                 if (ret.eventType == 'albumError') {
  57.                     api.toast({
  58.                         msg: '请开启app访问手机相册权限',
  59.                         duration: 2000,
  60.                         location: 'bottom'
  61.                     });
  62.                     setTimeout(function() {
  63.                         back();
  64.                     }, 300);
  65.                     return;
  66.                 }
  67.                 if (ret.eventType == 'fail') {
  68.                     api.toast({
  69.                         msg: '扫码失败,请从新扫码',
  70.                         duration: 2000,
  71.                         location: 'bottom'
  72.                     });
  73.                     setTimeout(function() {
  74.                         back();
  75.                     }, 300);
  76.                     return;
  77.                 }
  78.             } else {
  79.                 api.toast({
  80.                     msg: '扫码错误请稍后再试',
  81.                     duration: 2000,
  82.                     location: 'bottom'
  83.                 });
  84.                 setTimeout(function() {
  85.                     back();
  86.                 }, 300);
  87.             }
  88.         });
  89.         setTimeout(function() {
  90.             // 打开扫码动画frm页面
  91.             api.openFrame({
  92.                 name: 'add_frm',
  93.                 url: './add_frm.html',
  94.                 rect: {
  95.                     marginTop: headerH,
  96.                     marginLeft: 0,
  97.                     marginRight: 0,
  98.                     marginBottom: 0
  99.                 },
  100.                 bgColor: 'rgba(0,0,0,0)',
  101.             });
  102.         }, 300);
  103.     }

  104.     //返回
  105.     function back() {
  106.         // 关闭win页面
  107.         api.closeWin();
  108.         // 关闭扫码模块
  109.         FNScanner.closeView();
  110.     }

  111.     //打开最后扫码得出的数值
  112.     function fnOpenCouple(content) {
  113.         console.warn(content);
  114.         back(); //建议打开下一页我这块只是为了方便直接调用返回按钮   扫码成功之后必须关闭扫码模块  不然会出现多次扫码情况
  115.     }

  116.     var isSOff = true;
  117.     // 打开闪光灯
  118.     function fnOpenLamp() {
  119.         if (isSOff) {
  120.             FNScanner.switchLight({
  121.                 status: 'on'
  122.             });
  123.             isSOff = false;
  124.         } else {
  125.             FNScanner.switchLight({
  126.                 status: 'off'
  127.             });
  128.             isSOff = true;
  129.         }
  130.     }
复制代码


FNScanner超级进化版


本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ455600672

版主

UID:546828

主题:
32
帖子:
3682
云币:
39067

端午节圣诞节捣蛋鬼APICloud五岁啦

发表于 2019-5-30 13:52:36 |
沙发
易大侠:社区美少女,论坛彭于晏,在社区已经连续11个月表现优异。
【2019年度最佳版主评选】给版主投票即可奖励50云币,截止至12月31日---我是10号版主,点击去投票

版主

UID:146856

主题:
22
帖子:
1821
云币:
1751

APICloud五岁啦

发表于 2019-5-30 13:59:00 |
板凳
飞翔的翔:社区优秀版主,在社区已经连续8个月表现优异
【2019年度最佳版主评选】给版主投票即可奖励50云币,截止至12月31日---我是6号版主,点击去投票

主题:
39
帖子:
9164
云币:
9975

端午节社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2019-5-30 15:16:27 |

已发完  请各大大版主批评指教
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ455600672

业余车手

UID:591860

主题:
283
帖子:
992
云币:
1200

端午节

发表于 2019-6-6 09:01:18 |
mark                  

驾校小白

UID:686339

主题:
2
帖子:
6
云币:
7
发表于 2019-6-26 09:37:21 |
可以不打开扫描界面直接上传图片吗

主题:
39
帖子:
9164
云币:
9975

端午节社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2019-6-26 10:10:09 |
建发 发表于 2019-6-26 09:37
可以不打开扫描界面直接上传图片吗

直接上传图片是什么梗??
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ455600672

新手上路

UID:774220

主题:
18
帖子:
80
云币:
90
发表于 2019-6-27 15:47:22 |
不能扫描相册里的图片吗

主题:
39
帖子:
9164
云币:
9975

端午节社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2019-6-27 17:42:02 |
됩 ꥧ 发表于 2019-6-27 15:47
不能扫描相册里的图片吗

可以自己增加 然后调用decodeImg接口
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ455600672

驾校小白

UID:712328

主题:
1
帖子:
14
云币:
11
发表于 2019-7-11 11:16:50 |
666
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表