[
https://issues.apache.org/jira/browse/WEEX-233?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel=16394754#comment-16394754
]
ASF GitHub Bot commented on WEEX-233:
-
Github user asfgit closed the pull request at:
https://github.com/apache/incubator-weex/pull/1047
> More enhanced about component
> ---
>
> Key: WEEX-233
> URL: https://issues.apache.org/jira/browse/WEEX-233
> Project: Weex
> Issue Type: Improvement
> Components: Android, iOS
>Reporter: TangWei
>Assignee: Adam Feng
>Priority: Major
> Labels: features, newbie
> Original Estimate: 72h
> Remaining Estimate: 72h
>
> ~0301 Modified version~
> ~0302 Modified version~
> _0307 Modified version_
> Hi, I'm Tw93(侑夕) from [Fliggy|https://www.fliggy.com/], I'd like to discuss
> the enhancements about component, let it take over where we can't implement
> through weex.
> h2. Target
> {{}} is used to display web content that specified by src attribute in
> weex page,We also can use webview module to control WebView behavior such as
> goBack, goForward and reload.
> But it's not enough in most businesses，I think a more enhanced web component
> should have the following:
> * Support to send messages from Weex to a html in component.
> * Support to send messages from a html in component to Weex.
> * Support to render html source.
> Previously, component was an island that only rendered a remote url, but
> enabled it to communicate through the context native to the webView. Then I'm
> going to describe the solution that I came up with.
> h2. My solution
> h3. Code
> * Weex iOS:
> **
> [WXWebComponent.m|https://github.com/tw93/incubator-weex/blob/ios-feature-enhanced-web/ios/sdk/WeexSDK/Sources/Component/WXWebComponent.m]
> **
> [WXWebComponent.h|https://github.com/tw93/incubator-weex/blob/ios-feature-enhanced-web/ios/sdk/WeexSDK/Sources/Component/WXWebComponent.h]
> **
> [WXWebViewModule.m|https://github.com/tw93/incubator-weex/blob/ios-feature-enhanced-web/ios/sdk/WeexSDK/Sources/Module/WXWebViewModule.m]
> * Weex Vue Demo:
> ** [http://dotwe.org/vue/3576ed477d21dc020e63bf57dc414fff]
> ** [Demo Bundle
> JS|http://dotwe.org/raw/dist/3576ed477d21dc020e63bf57dc414fff.bundle.wx]
> ** [Web End|http://h5.m.taobao.com/trip/wx-detection-demo/web.html]
> h3.
> [Demo|https://gw.alipayobjects.com/zos/rmsportal/sBfTGamezxaBCGPshyXT.gif] &&
> [Theory|https://img.alicdn.com/tfs/TB1hEhXbxGYBuNjy0FnXXX5lpXa-1872-1208.png]
> |!https://gw.alipayobjects.com/zos/rmsportal/sBfTGamezxaBCGPshyXT.gif|width=240!|!https://img.alicdn.com/tfs/TB1hEhXbxGYBuNjy0FnXXX5lpXa-1872-1208.png|width=600!|
> h3. Details
> h4. Support to send messages from Weex to a html in component.
> * Native：(W3c
> [MessageEvent|https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent])
> // Weex postMessage to web
> * -(void)postMessage:(NSDictionary *)data
> Unknown macro: \{WXSDKInstance *instance = [WXSDKEngine topInstance];
> NSMutableString *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}
> ())", json];
> [_jsContext evaluateScript:code];
> }
> * How to use：
> // Weex
> const webview = weex.requireModule('webview');
> // recommend
> this.$refs['wxc-web'].postMessage(\{ detail: "a message" });
> //not recommend
> //webview.postMessage(this.$refs.webview, \{detail:"a message"});
>
> // Web
> window.addEventListener('message',function(e) \{
> console.log(e.data,e.type,e.origin); // \{ detail: "a message" }
> ,"message","*"
> },false)
> h4. Support to send messages from a html in component to Weex.
> * Native：(W3c
> [MessageEvent|https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent])
>
>
> //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];
> };
>
> * How to use：
> // Weex
>
>
> onMessage (e) \{ console.log(e.data,e.type,e.origin); // \{ detail: "a
> message" }
> ,"message","*"
> },
>
> // Web iframe
> window.parent.postMessage(\{ detail: "a message" }, '*');
> h4. Support to render html source.
> *
