专栏首页每日一篇技术文章weex-30-如何使用扫码功能

weex-30-如何使用扫码功能

897C5481-C48E-4CC2-BF3D-313857B9BCC5.png

截止2017-5-8 号,weex框架没有提供扫描二维码的模块,所以就有了本节的内容

本节学习目标

  • 自定义一个扫描二维码模块

先看一下如何使用这个模块

  • 第一步引入这个模块
var camera = weex.requireModule('camera')
  • 调用打开照相机模块方法

API scanCode(callback)

参数

callback 回调函数,参数res是一个对象,包含下面两个键名 res.result 值为success,fail res.data 扫码识别出来的二维码 值为string 类型

示例如下

camera.scanCode(res=>{
    if(res.result){
        this.show(res.data,1)
    }
})

介绍完了模块的使用方法,下面就开始自定这个模块

大体步骤分为两步

  • 第一步 定义模块
  • 第二步 注册模块

下面我们正式开始

第一步 定义一个模块(以iOS 为例)

1.创建一个类名为WXCameraModule

75D547FF-93F3-41EB-9B69-7A97234527A0.png

78D002E9-7708-41A0-B582-EFA67E3657E3.png

2.导入框架 <WeexSDK/WeexSDK.h>,然后让WXCameraModule 实现代理WXModuleProtocol

#import "WXEventModule.h"
#import <WeexSDK/WeexSDK.h>
#import "WXCustomModule.h"
typedef   void (^CallBlock)(NSDictionary*); // 定义回调函数
@interface WXCameraModule :NSObject<WXModuleProtocol>
@end

WXCameraModule.m文件中实现代理

 #import "WXCameraModule.h"
 #import "XJScanViewController.h"
  @implementation WXCameraModule
  @synthesize weexInstance; // 这个必须实现
// 把scanCode 方法暴露给weex,这部一定要做,否则weex将无法解析到js文件中的 camera 模块的scanCode 方法
WX_EXPORT_METHOD(@selector(scanCode:))

-(void)scanCode:(CallBlock)callback{
  // 下面这个是我定义的扫描二维码的原生类
  XJScanViewController *scanVC= [[XJScanViewController alloc]init];
// 将回调函数传递给scanVC 视图控制器,如果扫描到二维码将值传递给此闭包函数
 scanVC.callback = callback;
 [self.weexInstance.viewController.navigationController     presentViewController:scanVC animated:true completion:nil];
}
@end

第二步 在weex中注册这个模块

 WXSDKEngine.registerModule("camera", with: WXCameraModule.self)

这个是swift 语法,因为的我的项目是swift和oc汇编的,以上两部完成后,就可以在js中调用照相机扫描二维码了


下面是XJScanViewController.m 源码,供大家参考

#import "XJScanViewController.h"
#import <AVFoundation/AVFoundation.h>

@interface XJScanViewController ()     <AVCaptureMetadataOutputObjectsDelegate>
@property (nonatomic, strong) AVCaptureSession * session;
@property (nonatomic, strong) AVCaptureVideoPreviewLayer *captureLayer;
@property (nonatomic, strong) UIView *sanFrameView;
@end

@implementation XJScanViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setup];
}

-(void)setup{
  #if !(TARGET_IPHONE_SIMULATOR)
    self.session = [[AVCaptureSession alloc]init];
    [_session setSessionPreset:AVCaptureSessionPresetHigh];
    AVCaptureDevice * device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];
    AVCaptureDeviceInput * input = [AVCaptureDeviceInput deviceInputWithDevice:device error:nil];
    AVCaptureMetadataOutput * output = [[AVCaptureMetadataOutput alloc]init];
if (output && input && device) {
    [output setMetadataObjectsDelegate:self queue:dispatch_get_main_queue()];
    [_session addInput:input];
    [_session addOutput:output];            
output.metadataObjectTypes=@[AVMetadataObjectTypeQRCode,AVMetadataObjectTypeEAN13Code, AVMetadataObjectTypeEAN8Code, AVMetadataObjectTypeCode128Code];
}

_captureLayer = [AVCaptureVideoPreviewLayer layerWithSession:_session];
_captureLayer.videoGravity=AVLayerVideoGravityResizeAspectFill;
_captureLayer.frame=self.view.layer.bounds;
#endif

 [self.view.layer addSublayer:_captureLayer];
 UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(self.view.bounds.size.width/2-25, self.view.bounds.size.height-100, 50, 50)];
[button setBackgroundImage:[UIImage imageNamed:@"cancle.png"] forState:UIControlStateNormal];
[button addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button];
}

-(void)back{
   [self dismissViewControllerAnimated:true completion:nil];
}
- (void)captureOutput:(AVCaptureOutput *)captureOutput     didOutputMetadataObjects:(NSArray *)metadataObjects     fromConnection:(AVCaptureConnection *)connection
{
    [_captureLayer removeFromSuperlayer];
    [_session stopRunning];
    AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
    if (metadataObjects.count > 0) {
        AVMetadataMachineReadableCodeObject * metadataObject = [metadataObjects objectAtIndex : 0 ];
        self.callback(@{@"result":@"true",@"data":metadataObject.stringValue});
        [self dismissViewControllerAnimated:true completion:nil];
    }
}
-(void)viewWillAppear:(BOOL)animated{
    [_session startRunning];
}
- (void)dealloc {
    [_captureLayer removeFromSuperlayer];
}

不知道大家没有注意到回调函数我传的参数是一个NSDictionary 对象 self.callback(@{@"result":@"true",@"data":metadataObject.stringValue}); 它会被weex自定转换为js中的对象

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 声音功能让儿童编程更有创造性

    导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

    一石匠人
  • 天干地支五行八卦的对应关系

    一石匠人
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

    儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

    一石匠人
  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人
  • 【系统设置】CentOS 修改机器名

    ken.io
  • 一张图理清《梅花易数》梗概

    学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

    一石匠人
  • 我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

    事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

    一石匠人
  • 什么样的人生才是有意义的人生——没有标准的标准答案

    【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

    一石匠人

扫码关注云+社区

领取腾讯云代金券