897C5481-C48E-4CC2-BF3D-313857B9BCC5.png
截止2017-5-8 號,weex框架沒有提供掃描二維碼的模塊,所以就有了本節(jié)的內(nèi)容
本節(jié)學習目標
- 自定義一個掃描二維碼模塊
先看一下如何使用這個模塊
- 第一步引入這個模塊
var camera = weex.requireModule('camera')
- 調(diào)用打開照相機模塊方法
API
scanCode(callback)
參數(shù)
callback 回調(diào)函數(shù),參數(shù)res是一個對象,包含下面兩個鍵名
res.result 值為success,fail
res.data 掃碼識別出來的二維碼 值為string 類型
示例如下
camera.scanCode(res=>{
if(res.result){
this.show(res.data,1)
}
})
介紹完了模塊的使用方法,下面就開始自定這個模塊
大體步驟分為兩步
- 第一步 定義模塊
- 第二步 注冊模塊
下面我們正式開始
第一步 定義一個模塊(以iOS 為例)
1.創(chuàng)建一個類名為WXCameraModule
75D547FF-93F3-41EB-9B69-7A97234527A0.png
78D002E9-7708-41A0-B582-EFA67E3657E3.png
2.導入框架 <WeexSDK/WeexSDK.h>,然后讓WXCameraModule 實現(xiàn)代理WXModuleProtocol
#import "WXEventModule.h"
#import <WeexSDK/WeexSDK.h>
#import "WXCustomModule.h"
typedef void (^CallBlock)(NSDictionary*); // 定義回調(diào)函數(shù)
@interface WXCameraModule :NSObject<WXModuleProtocol>
@end
WXCameraModule.m文件中實現(xiàn)代理
#import "WXCameraModule.h"
#import "XJScanViewController.h"
@implementation WXCameraModule
@synthesize weexInstance; // 這個必須實現(xiàn)
// 把scanCode 方法暴露給weex,這部一定要做,否則weex將無法解析到j(luò)s文件中的 camera 模塊的scanCode 方法
WX_EXPORT_METHOD(@selector(scanCode:))
-(void)scanCode:(CallBlock)callback{
// 下面這個是我定義的掃描二維碼的原生類
XJScanViewController *scanVC= [[XJScanViewController alloc]init];
// 將回調(diào)函數(shù)傳遞給scanVC 視圖控制器,如果掃描到二維碼將值傳遞給此閉包函數(shù)
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中調(diào)用照相機掃描二維碼了
下面是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];
}
不知道大家沒有注意到回調(diào)函數(shù)我傳的參數(shù)是一個NSDictionary 對象
self.callback(@{@"result":@"true",@"data":metadataObject.stringValue});
它會被weex自定轉(zhuǎn)換為js中的對象
