【小程序】APICloud开发者进阶之路| FNScanner二维码接口openView自定义扫码Demo

• Z时代
• 2024-01-10
• 分类：技术分享

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

模块文档地址（点击即可跳转）

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

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

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

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

方案二完成页面截图

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

第一步：首先先打开openwin，然后再打开模块 ，然后延迟打开一个frm自定义一个扫码见面。大家上面看到扫码是这种思路的；

废话不多说上部分核心源码

`1.   var FNScanner, eHeader, headerH;

1.     apiready = function() {
2.         //应用全局FNScanner模块
3.         FNScanner = api.require('FNScanner');
4.         //定义根据id获取dom
5.         eHeader = $api.byId('header');
6.         //设置头部沉浸式
7.         $api.fixStatusBar(eHeader);
8.         //获取头部高度
9.         headerH = $api.offset(eHeader).h;
11.         //监听应用回到前台
12.         api.addEventListener({
13.             name: 'resume'
14.         }, function(ret, err) {
15.             FNScanner.onResume();
16.         });
18.         //监听应用回到后台
19.         api.addEventListener({
20.             name: 'pause'
21.         }, function(ret, err) {
22.             FNScanner.onPause();
23.         });
24.       
25.         fnOpenFNScanner();
26.     }
28.     function fnOpenFNScanner() {
29.         // 打开扫码模块
30.         FNScanner.openView({
31.             //autorotation: true,
32.             fixedOn: api.frameName,
33.             rect: {
34.                 x: 0,
35.                 y: headerH,
36.                 w: api.frameWidth,
37.                 h: api.frameHeight
38.             }
39.         }, function(ret, err) {
40.             if (ret) {
41.                 if (ret.eventType == 'success' && ret.content != '') {
42.                     // 扫码成功执行函数操作传值
43.                     fnOpenCouple(ret.content);
44.                     return;
45.                 }
46.                 if (ret.eventType == 'cameraError') {
47.                     api.toast({
48.                         msg: '请开启app访问手机摄像头权限',
49.                         duration: 2000,
50.                         location: 'bottom'
51.                     });
52.                     setTimeout(function() {
53.                         // 关闭扫码器  关闭扫码界面
54.                         back();
55.                     }, 300);
56.                     return;
57.                 }
58.                 if (ret.eventType == 'albumError') {
59.                     api.toast({
60.                         msg: '请开启app访问手机相册权限',
61.                         duration: 2000,
62.                         location: 'bottom'
63.                     });
64.                     setTimeout(function() {
65.                         back();
66.                     }, 300);
67.                     return;
68.                 }
69.                 if (ret.eventType == 'fail') {
70.                     api.toast({
71.                         msg: '扫码失败,请从新扫码',
72.                         duration: 2000,
73.                         location: 'bottom'
74.                     });
75.                     setTimeout(function() {
76.                         back();
77.                     }, 300);
78.                     return;
79.                 }
80.             } else {
81.                 api.toast({
82.                     msg: '扫码错误请稍后再试',
83.                     duration: 2000,
84.                     location: 'bottom'
85.                 });
86.                 setTimeout(function() {
87.                     back();
88.                 }, 300);
89.             }
90.         });
91.         setTimeout(function() {
92.             // 打开扫码动画frm页面
93.             api.openFrame({
94.                 name: 'add_frm',
95.                 url: './add_frm.html',
96.                 rect: {
97.                     marginTop: headerH,
98.                     marginLeft: 0,
99.                     marginRight: 0,
100.                     marginBottom: 0
101.                 },
102.                 bgColor: 'rgba(0,0,0,0)',
103.             });
104.         }, 300);
105.     }
107.     //返回
108.     function back() {
109.         // 关闭win页面
110.         api.closeWin();
111.         // 关闭扫码模块
112.         FNScanner.closeView();
113.     }
115.     //打开最后扫码得出的数值
116.     function fnOpenCouple(content) {
117.         console.warn(content);
118.         back(); //建议打开下一页我这块只是为了方便直接调用返回按钮   扫码成功之后必须关闭扫码模块  不然会出现多次扫码情况
119.     }
121.     var isSOff = true;
122.     // 打开闪光灯
123.     function fnOpenLamp() {
124.         if (isSOff) {
125.             FNScanner.switchLight({
126.                 status: 'on'
127.             });
128.             isSOff = false;
129.         } else {
130.             FNScanner.switchLight({
131.                 status: 'off'
132.             });
133.             isSOff = true;
134.         }
135.     }

_复制代码_`

以上是 【小程序】APICloud开发者进阶之路| FNScanner二维码接口openView自定义扫码Demo 的全部内容， 来源链接： utcz.com/a/103903.html