You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by "Adam Feng (JIRA)" <ji...@apache.org> on 2018/05/14 13:13:00 UTC
[jira] [Resolved] (WEEX-233) More enhanced about component
[ 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)