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

[ASF GitHub Bot (JIRA)]

    [ 
https://issues.apache.org/jira/browse/WEEX-233?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16385999#comment-16385999
 ] 

ASF GitHub Bot commented on WEEX-233:
-------------------------------------

GitHub user tw93 opened a pull request:

    https://github.com/apache/incubator-weex/pull/1047

    [WEEX-233][iOS] More enhanced about <web> component

    First of all, thank you for your contribution! 
    
    Please makes sure that these checkboxes are checked before submitting your 
PR, thank you!
    
    
    
    CheckList:
    
    *isNewFeature* **:**
    
      * [ ] Update API docs for the component.
      * [ ] Update/Add demo to demonstrate new feature.
      * [ ] Update test scripts for the feature.
      * [ ] Add unit tests for the feature.

You can merge this pull request into a Git repository by running:

    $ git pull https://github.com/tw93/incubator-weex ios-feature-enhanced-web

Alternatively you can review and apply these changes as the patch at:

    https://github.com/apache/incubator-weex/pull/1047.patch

To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:

    This closes #1047
    
----
commit a052c9f934899b8a0f83ee3d5ff2ba5dc3b13c60
Author: Tw93 <tw93@...>
Date:   2018-02-27T10:47:26Z

    + [ios] more enhanced about web

commit e33353a794ed56033305d40692d876fdc58736f9
Author: Tw93 <tw93@...>
Date:   2018-03-01T09:07:42Z

    + [ios] change to postmessage

commit 900426be26bf5ec08d32304d003f691932f61180
Author: Tw93 <tw93@...>
Date:   2018-03-05T11:39:28Z

    + [ios] Code Style Guidelines

----


> 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. 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://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. 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！



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