You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by "TangWei (JIRA)" <ji...@apache.org> on 2018/03/05 11:53:00 UTC

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

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

TangWei updated WEEX-233:
-------------------------
    Description: 
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. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#target]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. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#my-solution]My solution
h3. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#code]Code
 * Weex iOS:
 ** [https://github.com/tw93/incubator-weex/blob/ios-feature-enhanced-web/ios/sdk/WeexSDK/Sources/Component/WXWebComponent.m]
 * Weex Vue Demo:
 ** [http://dotwe.org/vue/8847473f8f596573dadb66a344edfce2]
 ** [Demo Bundle JS|http://dotwe.org/raw/dist/b1f6d242760945d4b674c4f5913a39e4.bundle.wx]
 ** [Web End|http://h5.m.taobao.com/trip/wx-detection-demo/web.html]

h3. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#demo--theory] [Demo|https://gw.alipayobjects.com/zos/rmsportal/sBfTGamezxaBCGPshyXT.gif] && [Theory|https://img.alicdn.com/tfs/TB1hEhXbxGYBuNjy0FnXXX5lpXa-1872-1208.png]
|[!https://camo.githubusercontent.com/4c7a7b69d686b8127a0bdc89962c1aceac912083/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f7342665447616d657a78614243475073687958542e676966|width=240!|https://camo.githubusercontent.com/4c7a7b69d686b8127a0bdc89962c1aceac912083/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f7342665447616d657a78614243475073687958542e676966]|[!https://camo.githubusercontent.com/b1ed3e13b070b8302c2cecb067346a8da051207c/68747470733a2f2f696d672e616c6963646e2e636f6d2f7466732f544231684568586278475942754e6a7930466e585858356c7058612d313837322d313230382e706e67|width=600!|https://camo.githubusercontent.com/b1ed3e13b070b8302c2cecb067346a8da051207c/68747470733a2f2f696d672e616c6963646e2e636f6d2f7466732f544231684568586278475942754e6a7930466e585858356c7058612d313837322d313230382e706e67]|
h3. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#details]Details
h4. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#support-to-send-messages-from-weex-to-a-html-in--component]Support to send messages from Weex to a html in component.
 * Native:
{{- (void)postMessage:(NSDictionary *)data \{ NSDictionary *eventDict = @{ @"data" : data }; NSString *json = [WXUtility JSONString:eventDict]; NSString *code = [NSString stringWithFormat:@"(function ()\{document.dispatchEvent(new MessageEvent('message', %@));}())",json]; [_jsContext evaluateScript:code]; } }}
 * How to use:
{{// Weex const webview = weex.requireModule('webview'); webview.postMessage(this.$refs.webview, \{detail:"message"}); // Web document.addEventListener('message',function(e)\{ console.log(e.data.detail) },false) }}

h4. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#support-to-send-messages-from-a-html-in--component-to-weex]Support to send messages from a html in component to Weex.
 * Native:
{{_jsContext[@"postMessage"] = ^(JSValue *data)\{ [weakSelf fireEvent:@"message" params:[data toDictionary]]; }; }}
 * How to use:
{{// Weex <web @message="onMessage"></web> // Web window.postMessage(message, targetOrigin, false); }}

h4. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#support-to-render-html-source]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:
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:
 ** 
[https://github.com/tw93/incubator-weex/blob/ios-feature-enhanced-web/ios/sdk/WeexSDK/Sources/Component/WXWebComponent.m]
 * 
Weex Vue Demo:
 ** 
[http://dotwe.org/vue/8847473f8f596573dadb66a344edfce2]
 ** 
[Demo Bundle JS|http://dotwe.org/raw/dist/b1f6d242760945d4b674c4f5913a39e4.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:
 {{- (void)postMessage:(NSDictionary *)data \{ NSDictionary *eventDict = @{ @"data" : data }; NSString *json = [WXUtility JSONString:eventDict]; NSString *code = [NSString stringWithFormat:@"(function ()\{document.dispatchEvent(new MessageEvent('message', %@));}())",json]; [_jsContext evaluateScript:code]; }}}
 * 
How to use:
 {{// Weex const webview = weex.requireModule('webview'); webview.postMessage(this.$refs.webview, \{detail:"message"}); // Web document.addEventListener('message',function(e)\{ console.log(e.data.detail) },false)}}

 
h4. Support to send messages from a html in component to Weex.
  * 
Native:
 {{_jsContext[@"postMessage"] = ^(JSValue *data)\{ [weakSelf fireEvent:@"message" params:[data toDictionary]]; };}}

 
 * 
How to use:
 {{// Weex <web @message="onMessage"></web> // Web window.postMessage(message, targetOrigin, false);}}

 
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
>
> 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. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#target]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. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#my-solution]My solution
> h3. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#code]Code
>  * Weex iOS:
>  ** [https://github.com/tw93/incubator-weex/blob/ios-feature-enhanced-web/ios/sdk/WeexSDK/Sources/Component/WXWebComponent.m]
>  * Weex Vue Demo:
>  ** [http://dotwe.org/vue/8847473f8f596573dadb66a344edfce2]
>  ** [Demo Bundle JS|http://dotwe.org/raw/dist/b1f6d242760945d4b674c4f5913a39e4.bundle.wx]
>  ** [Web End|http://h5.m.taobao.com/trip/wx-detection-demo/web.html]
> h3. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#demo--theory] [Demo|https://gw.alipayobjects.com/zos/rmsportal/sBfTGamezxaBCGPshyXT.gif] && [Theory|https://img.alicdn.com/tfs/TB1hEhXbxGYBuNjy0FnXXX5lpXa-1872-1208.png]
> |[!https://camo.githubusercontent.com/4c7a7b69d686b8127a0bdc89962c1aceac912083/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f7342665447616d657a78614243475073687958542e676966|width=240!|https://camo.githubusercontent.com/4c7a7b69d686b8127a0bdc89962c1aceac912083/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f7342665447616d657a78614243475073687958542e676966]|[!https://camo.githubusercontent.com/b1ed3e13b070b8302c2cecb067346a8da051207c/68747470733a2f2f696d672e616c6963646e2e636f6d2f7466732f544231684568586278475942754e6a7930466e585858356c7058612d313837322d313230382e706e67|width=600!|https://camo.githubusercontent.com/b1ed3e13b070b8302c2cecb067346a8da051207c/68747470733a2f2f696d672e616c6963646e2e636f6d2f7466732f544231684568586278475942754e6a7930466e585858356c7058612d313837322d313230382e706e67]|
> h3. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#details]Details
> h4. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#support-to-send-messages-from-weex-to-a-html-in--component]Support to send messages from Weex to a html in component.
>  * Native:
> {{- (void)postMessage:(NSDictionary *)data \{ NSDictionary *eventDict = @{ @"data" : data }; NSString *json = [WXUtility JSONString:eventDict]; NSString *code = [NSString stringWithFormat:@"(function ()\{document.dispatchEvent(new MessageEvent('message', %@));}())",json]; [_jsContext evaluateScript:code]; } }}
>  * How to use:
> {{// Weex const webview = weex.requireModule('webview'); webview.postMessage(this.$refs.webview, \{detail:"message"}); // Web document.addEventListener('message',function(e)\{ console.log(e.data.detail) },false) }}
> h4. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#support-to-send-messages-from-a-html-in--component-to-weex]Support to send messages from a html in component to Weex.
>  * Native:
> {{_jsContext[@"postMessage"] = ^(JSValue *data)\{ [weakSelf fireEvent:@"message" params:[data toDictionary]]; }; }}
>  * How to use:
> {{// Weex <web @message="onMessage"></web> // Web window.postMessage(message, targetOrigin, false); }}
> h4. [|https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4#support-to-render-html-source]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)