weex-30-如何使用掃碼功能

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中的對象

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末山橄,一起剝皮案震驚了整個濱河市焰盗,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌团搞,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡艾恼,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進店門麸锉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來钠绍,“玉大人,你說我怎么就攤上這事花沉×” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵碱屁,是天一觀的道長磷脯。 經(jīng)常有香客問我,道長娩脾,這世上最難降的妖魔是什么赵誓? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮晦雨,結(jié)果婚禮上架曹,老公的妹妹穿的比我還像新娘。我一直安慰自己闹瞧,他們只是感情好绑雄,可當我...
    茶點故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著奥邮,像睡著了一般万牺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上洽腺,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天脚粟,我揣著相機與錄音,去河邊找鬼蘸朋。 笑死核无,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的藕坯。 我是一名探鬼主播团南,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼炼彪!你這毒婦竟也來了吐根?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤辐马,失蹤者是張志新(化名)和其女友劉穎拷橘,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡冗疮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年萄唇,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赌厅。...
    茶點故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡穷绵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出特愿,到底是詐尸還是另有隱情仲墨,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布揍障,位于F島的核電站目养,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏毒嫡。R本人自食惡果不足惜癌蚁,卻給世界環(huán)境...
    茶點故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望兜畸。 院中可真熱鬧努释,春花似錦、人聲如沸咬摇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽肛鹏。三九已至逸邦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間在扰,已是汗流浹背缕减。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留芒珠,地道東北人桥狡。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像皱卓,于是被迫代替她去往敵國和親总放。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,930評論 2 361

推薦閱讀更多精彩內(nèi)容