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

TangWei updated WEEX-233:
-------------------------
    Description: 
~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!

  was:
~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 {
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:initDic];
 
NSString *code = [NSString stringWithFormat:@"(function 
()\{document.dispatchEvent(new MessageEvent('message', %@));}())", 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!


> More enhanced about <web> component
> -----------------------------------
>
>                 Key: WEEX-233
>                 URL: https://issues.apache.org/jira/browse/WEEX-233
>             Project: Weex
>          Issue Type: Improvement
>          Components: 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)

Reply via email to