[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=16389487#comment-16389487
 ] 

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

Github user acton393 commented on a diff in the pull request:

    https://github.com/apache/incubator-weex/pull/1047#discussion_r172826404
  
    --- Diff: ios/sdk/WeexSDK/Sources/Component/WXWebComponent.m ---
    @@ -69,6 +71,11 @@ - (instancetype)initWithRef:(NSString *)ref 
type:(NSString *)type styles:(NSDict
     {
         if (self = [super initWithRef:ref type:type styles:styles 
attributes:attributes events:events weexInstance:weexInstance]) {
             self.url = attributes[@"src"];
    +        
    +        if(attributes[@"source"]){
    +            self.source = attributes[@"source"];
    --- End diff --
    
    the init method is executed in background thread named component method and 
 `self.source` will call [self setSource:""], 
    the method for `setSource` called view operation which is only for main 
thread.
    
    A better way is that define another member for source to save the variable 
during  this initialization,  and call  self.source in component hook lifeCycle 
like  `viewDidLoad`.



> 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)