FNScanner二维码接口openView自定义扫码Demo

本文出自APICloud官方论坛
FNScanner 模块是一个二维码/条形码扫描器,是 scanner 模块的优化升级版。在 iOS 平台上本模块底层集成了 Zbar 和系统自带的条形码/二维码分析库,由于 IOS 系统平台在 IOS7.0 以上才开放了二维码/条码的相关接口,所以在 IOS6 上运行时模块会调用开源库 Zbar 去读取解析二维码/条码。只有在 IOS7 以上版本才会调用系统自带扫码功能。
模块文档地址:
docs.apicloud.com/Client-API/…
模块需要注意的地方:

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

本模块封装了两套扫码方案:
方案一
开发者通过调用 openScanner 接口直接打开自带默认 UI 效果的二维码/条形码扫描页面,本界面相当于打开一个 window 窗口,其界面内容不支持自定义。用户可在此界面实现功能如下:
打开关闭闪关灯
从系统相册选取二维码/条码图片进行解密操作
打开摄像头,自动对焦扫码想要解析的二维码/条码
方案二
通过 openView 接口打开一个自定义大小的扫描区域(本区域相当于打开一个 frame)进行扫描。开发者可自行 open 一个 frame 贴在模块上,从而实现自定义扫描界面的功能。然后配合使用 setFrame、closeView、switchLight 等接口实现开关闪光灯、重设扫描界面位置大小、图片解码、字符串编码等相关功能。详情请参考模块接口参数。
方案一我就不介绍,因为直接调取接口就能直接显示一个扫码ui界面,直接使用就可以,
楼主本帖分享的是方案一无法满足ui设计效果前提下,怎么实现ui自定义的效果;
方案二完成页面截图
/Users/Suthy/Desktop/1.jpg

方案二打开闪光灯效果界面截图
/Users/Suthy/Desktop/2.jpg

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

//监听应用回到前台
api.addEventListener({
name: ‘resume‘
}, function(ret, err) {
FNScanner.onResume();
});

//监听应用回到后台
api.addEventListener({
name: ‘pause‘
}, function(ret, err) {
FNScanner.onPause();
});

fnOpenFNScanner();
}

function fnOpenFNScanner() {
// 打开扫码模块
FNScanner.openView({
//autorotation: true,
fixedOn: api.frameName,
rect: {
x: 0,
y: headerH,
w: api.frameWidth,
h: api.frameHeight
}
}, function(ret, err) {
if (ret) {
if (ret.eventType == ‘success‘ && ret.content != ‘‘) {
// 扫码成功执行函数操作传值
fnOpenCouple(ret.content);
return;
}
if (ret.eventType == ‘cameraError‘) {
api.toast({
msg: ‘请开启app访问手机摄像头权限‘,
duration: 2000,
location: ‘bottom‘
});
setTimeout(function() {
// 关闭扫码器 关闭扫码界面
back();
}, 300);
return;
}
if (ret.eventType == ‘albumError‘) {
api.toast({
msg: ‘请开启app访问手机相册权限‘,
duration: 2000,
location: ‘bottom‘
});
setTimeout(function() {
back();
}, 300);
return;
}
if (ret.eventType == ‘fail‘) {
api.toast({
msg: ‘扫码失败,请从新扫码‘,
duration: 2000,
location: ‘bottom‘
});
setTimeout(function() {
back();
}, 300);
return;
}
} else {
api.toast({
msg: ‘扫码错误请稍后再试‘,
duration: 2000,
location: ‘bottom‘
});
setTimeout(function() {
back();
}, 300);
}
});
setTimeout(function() {
// 打开扫码动画frm页面
api.openFrame({
name: ‘add_frm‘,
url: ‘./add_frm.html‘,
rect: {
marginTop: headerH,
marginLeft: 0,
marginRight: 0,
marginBottom: 0
},
bgColor: ‘rgba(0,0,0,0)‘,
});
}, 300);
}

//返回
function back() {
// 关闭win页面
api.closeWin();
// 关闭扫码模块
FNScanner.closeView();
}

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

var isSOff = true;
// 打开闪光灯
function fnOpenLamp() {
if (isSOff) {
FNScanner.switchLight({
status: ‘on‘
});
isSOff = false;
} else {
FNScanner.switchLight({
status: ‘off‘
});
isSOff = true;
}
}
复制代码

原文地址:https://www.cnblogs.com/APICloud/p/11465055.html

时间: 2024-08-29 21:09:39

FNScanner二维码接口openView自定义扫码Demo的相关文章

借助云开发10行代码生成小程序码,可以微信扫码快速进入指定小程序页

最近老有同学问我,如何生成小程序二维码,让用户扫码后能快速进入指定页面.经过一番研究,发现用云开发的云调用来实现特别方便,基本上10行代码就可以快速的生成指定页面的二维码.这样我们在做一些线下业务时就能让用户方便快速的进入到指定页面了,比如我们的点餐小程序,我们可以在二维码里绑定桌号,这样用户用微信扫码二维码,就可以快速的进入点餐页面了,并且可以识别到用户当前所在的桌号. 注意事项 我们生成的小程序码指定的页面,必须是你小程序已经发布,如果小程序还没有发布,获取小程序码绑定的页面不存在,扫码后就

微信扫码登录asp微信扫码登陆代码

网站接入微信扫码登录并获取用户基本信息(完美绕过微信开放平台) 电脑版网站实现微信扫码登录,注册会员还要设密码太麻烦,会员也记不住密码,采用微信扫码登录网站更方便,会员无需设密码,用他的微信做为系统登录用户名,全程自动操作更方便.源码是用asp写的,mdb的数据库,微信扫描电脑网页上的二维码实现登录. 只需要用微信扫一下二维码,这个网站就可以展示你的微信昵称和头像,免去注册账号和输入密码登录的步骤,还免去设置头像和昵称的步骤,所以是挺方便的.我这个asp写好的代码和微信开放平台不同,微信开放平台

安卓实现二维码生成和扫描功能,扫描支持直接拍照扫码和相册图片扫码,还加了照明功能

最近在做二维码的生成和扫描,生成二维码相对而言较为简单,扫描相对复杂,遇到的问题较多,但是在实现二维码的生成和扫描之前最重要的一步 就是讲Zxing包导入,后面的内容大部分是使用包中的内容, 那我就从二维码的生成讲起吧! 二维码生成: 直接贴代码了 1 //要转换的地址或字符串,可以是中文,输入内容生成二维码 2 public Bitmap createQRImage(String string) { 3 try { 4 Hashtable<EncodeHintType, String> hi

微信公众号调用扫一扫,识别二位码,并将扫码结果保存,传递到另外的网页

注意!这是微信公众号调用.需要微信配置信息.需要引入前置JS.http协议网站引入"http://res.wx.qq.com/open/js/jweixin-1.0.0.js",https协议网站引入"https://res.wx.qq.com/open/js/jweixin-1.0.0.js". 有错误跟我说一声. <!DOCTYPE html> <html> <head lang="en"> <met

微信公众号 扫码支付 模式二 demo

扫码支付 本文附有代码,在下方,如果不熟悉场景的可以看看下面的场景介绍 场景介绍 官网介绍地址:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1 用户扫描商户展示在各种场景的二维码进行支付. 步骤1:商户根据微信支付的规则,为不同商品生成不同的二维码(如图6.1),展示在各种场景,用于用户扫描购买. 步骤2:用户使用微信"扫一扫"(如图6.2)扫描二维码后,获取商品支付信息,引导用户完成支付(如图6.3). 图6

微信扫码支付功能(1)---通过谷歌二维码工具生成付款码

生成付款二维码 一.微信网站扫码支付介绍 1.扫码支付文档 微信开发官方文档:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_5 有关微信支付的流程图微信官方已经说的很清楚了,这里也无需其它解释.这边采用微信支付扫码模式二(不依赖商户平台设置回调url),所以在生成二维码之前 要先调用微信统一下单支付接口,获得code_url,再通过谷歌二维码工具将code_url生成二维码图片. 2.名称理解 在微信扫码支付功能开发之前,

android Studio 二维码扫一扫 使用精简过的zxing

今天学习做个扫一扫  于是就上百度找找前人的作品,终于找到了,于是就开始搞 我使用的是 最新的android Studio Android Studio 3.1.2Build #AI-173.4720617, built on April 14, 2018JRE: 1.8.0_152-release-1024-b02 amd64JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.oWindows 10 10.0 想做的APP样子是:  A界面中有个按钮.

二维码扫码积分系统定制开发

微信积分系统 二维码扫码积分系统定制开发找丽姐[158.1816.6626/电微]二维码营销模式系统定制开发 微信扫二维码营销系统开发 扫码领积分系统开发 一.如何实现扫二维码领红包功能? 1.使用扫描二维码领取红包对活动进行设置,包括红包数量.红包金额.促销地区.中奖概率等. 2.将生成的二维码赋到商品上面并赋涂层,一方面可以起到保证二维码的一次性,另一方面也可以引起消费者的好奇心. 3.通过手机微信打开扫一扫,扫码商品二维码关注公众号并领取红包,如果参与分享还可以获得抽奖的机会. 二.微信扫

网页授权——扫二维码获取openid

最近做微信公众平台开发项目时遇到这样一个功能需求:生成一个特定url的二维码,用户扫描二维码后跳转到这个url指定的页面,并在这个页面获得用户的openid.这个功能主要涉及到两方面的技术:生成二维码,网页授权. 1. 生成二维码: 生成二维码比较简单的方法是直接使用phpqrcode程序包(可在网上下载得到). 若想获得ThinkPHP支持,需将程序包放在ThinkPHP/Extend/Vendor目录下,让后在程序中引用,代码如下: vendor("phpqrcode.phpqrcode&q