[jira] [Resolved] (WEEX-233) More enhanced about component

[Adam Feng (JIRA)]

     [ 
https://issues.apache.org/jira/browse/WEEX-233?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
 ]

Adam Feng resolved WEEX-233.
----------------------------
    Resolution: Fixed

> More enhanced about <web> 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
> {{<web>}} 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
>  <web @message="onMessage"></web>
>   
>  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.
>  * Native:
>  [_webview loadHTMLString:_source baseURL:nil];
>   
>  * How to use:
>  <web source='<p style="text-align: center;"><img align="absmiddle" 
> src="http://img03.taobaocdn.com/imgextra/i3/1124701655/TB2zmmIcpXXXXbIXpXXXXXXXXXX_!!1124701655.jpg"/></p>'></web>
> Welcome to put forward any suggestion about the solution or other 
> requirements for the component, Thanks！



--
This message was sent by Atlassian JIRA
(v7.6.3#76005)