Lei's Blog

Weex自定义Module

面试之家只是为了学习和交流使用Weex,题库等内容不可用于商业项目

Weex开发中,使用自定义Module的方式,来扩展Weex的能力,官方教程在这里,这里我以自定义分享模块来举例

第一步

先创建一个继承与NSObject的基类UM_WeexModule,然后引入头文件#import <WeexSDK.h>,并继承WXModuleProtocol协议。

第二步

实现方法并暴露给JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
- (void)shareEvent:(NSDictionary *)parames callback:(WXModuleKeepAliveCallback)callback {
if (![parames isKindOfClass:NSClassFromString(@"NSDictionary")]) {
[SVProgressHUD showErrorWithStatus:@"非法传参"];
return;
}
[UMSocialUIManager showShareMenuViewInWindowWithPlatformSelectionBlock:^(UMSocialPlatformType platformType, NSDictionary *userInfo) {
switch (platformType) {
case UMSocialPlatformType_Sina: {
if (![[UMSocialManager defaultManager]isInstall:UMSocialPlatformType_Sina]) {
[SVProgressHUD showErrorWithStatus:@"未安装新浪客户端"];
return ;
}
}
break;
case UMSocialPlatformType_WechatSession: {
if (![[UMSocialManager defaultManager]isInstall:UMSocialPlatformType_WechatSession]) {
[SVProgressHUD showErrorWithStatus:@"未安装微信客户端"];
return ;
}
}
break;
case UMSocialPlatformType_WechatTimeLine: {
if (![[UMSocialManager defaultManager]isInstall:UMSocialPlatformType_WechatTimeLine]) {
[SVProgressHUD showErrorWithStatus:@"未安装微信客户端"];
return ;
}
}
break;
case UMSocialPlatformType_QQ: {
if (![[UMSocialManager defaultManager]isInstall:UMSocialPlatformType_QQ]) {
[SVProgressHUD showErrorWithStatus:@"未安装QQ客户端"];
return ;
}
}
break;
case UMSocialPlatformType_Qzone: {
if (![[UMSocialManager defaultManager]isInstall:UMSocialPlatformType_Qzone]) {
[SVProgressHUD showErrorWithStatus:@"未安装QQ客户端"];
return ;
}
}
break;
default:
break;
}
NSString *type = parames[@"type"];
NSString *title = parames[@"title"];
NSString *des =parames[@"des"];
NSString *picUrl = parames[@"picUrl"];
NSString *linkUrl = parames[@"linkUrl"];
//创建分享消息对象
UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
if ([type isEqualToString:@"link"]) {
//创建网页内容对象
UMShareWebpageObject *shareObject = [UMShareWebpageObject shareObjectWithTitle:title descr:des thumImage:picUrl];
//设置网页地址
shareObject.webpageUrl = linkUrl;
//分享消息对象设置分享内容对象
messageObject.shareObject = shareObject;
} else if ([type isEqualToString:@"pic"]) {
//创建图片内容对象
UMShareImageObject *shareObject = [[UMShareImageObject alloc] init];
[shareObject setShareImage:picUrl];
//分享消息对象设置分享内容对象
messageObject.shareObject = shareObject;
} else if ([type isEqualToString:@"richText"]) {
//设置文本
messageObject.text = title;
//创建图片内容对象
UMShareImageObject *shareObject = [[UMShareImageObject alloc] init];
//如果有缩略图,则设置缩略图
shareObject.thumbImage = [UIImage imageNamed:@"icon"];
[shareObject setShareImage:picUrl];
//分享消息对象设置分享内容对象
messageObject.shareObject = shareObject;
}
[[UMSocialManager defaultManager] shareToPlatform:platformType messageObject:messageObject currentViewController:nil completion:^(id data, NSError *error) {
if (error) {
callback(error.userInfo[@"message"],false);
}else{
[SVProgressHUD showSuccessWithStatus:@"分享成功"];
callback(@"1",false);
}
}];
}];
}
- (void)setalias:(NSDictionary *)params {
[UMessage addAlias:[NSString stringWithFormat:@"%@",params[@"userID"]] type:params[@"type"] response:^(id _Nonnull responseObject, NSError * _Nonnull error) {
}];
}

第三步

将方法抛出给JS

1
2
WX_EXPORT_METHOD(@selector(shareEvent: callback:))
WX_EXPORT_METHOD(@selector(setalias:))

第四步

初始化时注册到WeexSDK

1
[WXSDKEngine registerModule:@"UM_Event" withClass:NSClassFromString(@"UM_WeexModule")];

第五步

JS调用

1
2
3
4
5
6
7
8
var um_share = weex.requireModule('UM_Event');
um_share.shareEvent({
type:'pic',
title:'title',
picUrl:'https://mianshizhijia.oss-cn-hangzhou.aliyuncs.com/resourse_image/%E5%88%86%E4%BA%AB.jpg',
}, callback => {
});

结语

本篇文章旨在分享如何通过自定义Module来扩展Weex的能力,由于最近在忙于找工作,所以写的不是很深入,等过段时间稳定之后,会在继续分享Weex实现原理,以及从注册方法到可以被JS调用中间的实现过程。