weex开发之与web交互

在做weex开发中遇到一个需要与web交互的需求。
看了下weexSDK,在0.20以上的版本中是有与web交互的api的。所以先升级sdk，iOS和Android都通用！

原生sdk代码

查看sdk代码：

// Weex postMessage to web
- (void)postMessage:(NSDictionary *)data {
    WXSDKInstance *instance = [WXSDKEngine topInstance];

    NSString *bundleUrlOrigin = @"";

    if (instance.pageName) {
        NSString *bundleUrl = [instance.scriptURL absoluteString];
        NSURL *url = [NSURL URLWithString:bundleUrl];
        bundleUrlOrigin = [NSString stringWithFormat:@"%@://%@%@", url.scheme, url.host, url.port ? [NSString stringWithFormat:@":%@", url.port] : @""];
    }

    NSDictionary *initDic = @{
        @"type" : @"message",
        @"data" : data,
        @"origin" : bundleUrlOrigin
    };

    NSString *json = [WXUtility JSONString:initDic];

    NSString *code = [NSString stringWithFormat:@"(function (){window.dispatchEvent(new MessageEvent('message', %@));}())", json];
    [_jsContext evaluateScript:code];
}

这个是发送数据给web的方法，上面注释很清楚了。
这里则有个postMessage方法是文档中没有的！

在WXWebViewModule中是有个API的

WX_EXPORT_METHOD(@selector(postMessage:data:))
对应的方法：
- (void)postMessage:(NSString *)elemRef data:(NSDictionary *)data {
    [self performBlockWithWebView:elemRef block:^void (WXWebComponent *webview) {
        [webview postMessage:data];
    }];
}

//Weex catch postMessage event from web
    _jsContext[@"postMessage"] = ^() {

        NSArray *args = [JSContext currentArguments];

        if (args && args.count < 2) {
            return;
        }

        NSDictionary *data = [args[0] toDictionary];
        NSString *origin = [args[1] toString];

        if (data == nil) {
            return;
        }

        NSDictionary *initDic = @{ @"type" : @"message",
                                   @"data" : data,
                                   @"origin" : origin
        };

        [weakSelf fireEvent:@"message" params:initDic];
    };

看注释，监听来自web的数据。这里有个message方法是文档中没有的！
那么在weex和在html端怎么使用？

weex端使用

html端使用

    
    
    
    
    
    
    
    



    向weex发送数据