You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by 汤威 <tw...@qq.com> on 2018/02/28 03:51:14 UTC
回复：【Discussion】 More enhanced about component
Sorry, the email format is very poor, please check the format here.
https://yuque.com/tw93/weex/icefzu
------------------ 原始邮件 ------------------
发件人: "汤威"<tw...@qq.com>;
发送时间: 2018年2月28日(星期三) 中午11:37
收件人: "dev"<de...@weex.incubator.apache.org>;
抄送: "tw102972"<tw...@alibaba-inc.com>;
主题: 【Discussion】 More enhanced about <web> component
Hi, I'm Tw93 (侑夕) from Fliggy, I'd like to discuss the enhancements about component, let it take over where we can't implement through weex.
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.
My solution
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/f0c7d877fb6b0e9b661aa4f53a652793
Demo Bundle JS
Web End
Demo && Theory
Details
Support to send messages from Weex to a html in component.
Native：
- (void)notifyWebview:(NSDictionary *) data { NSString *json = [WXUtility JSONString:data]; NSString *code = [NSString stringWithFormat:@"(function(){var evt=null;var data=%@;if(typeof CustomEvent==='function'){evt=new CustomEvent('notify',{detail:data})}else{evt=document.createEvent('CustomEvent');evt.initCustomEvent('notify',true,true,data)}document.dispatchEvent(evt)}())", json]; [_jsContext evaluateScript:code]; }
How to use：
// Weex const webview = weex.requireModule('webview'); webview.notifyWebview(this.$refs.webview, "message"); // Web document.addEventListener('notify',function(e){ console.log(e.detail) },false)
Support to send messages from a html in component to Weex.
Native：
_jsContext[@"postMessage"] = ^(JSValue *data){ [weakSelf fireEvent:@"notify" params:[data toDictionary]]; };
How to use：
// Weex <web @notify="onMessage"></web> // Web window.postMessage(message, targetOrigin, false);
Support to render html source.
Native:
[_webview loadHTMLString:_source baseURL:nil];
How to use:
<web source='<p style="text-align: center;">Any HTML you want to add.</p>'></web>
Welcome to put forward any suggestion about the solution or other requirements for the component.
After that, I'm going to submit a pr. Thanks！
回复： 【Discussion】 More enhanced about component
Posted by 汤威 <tw...@qq.com>.
so sad..
You can see it here.
https://gist.github.com/tw93/fc9d9c403234495c2b74e480cfc11bc4
------------------ 原始邮件 ------------------
发件人: "acton"<zh...@gmail.com>;
发送时间: 2018年2月28日(星期三) 中午11:57
收件人: "dev"<de...@weex.incubator.apache.org>;
主题: Re: 【Discussion】 More enhanced about <web> component
hi Tw93, yuque.com needs to login or register, may be
https://gist.github.com/ would be a better choice
2018-02-28 11:51 GMT+08:00 汤威 <tw...@qq.com>:
> Sorry, the email format is very poor, please check the format here.
> https://yuque.com/tw93/weex/icefzu
>
>
> ------------------ 原始邮件 ------------------
> 发件人: "汤威"<tw...@qq.com>;
> 发送时间: 2018年2月28日(星期三) 中午11:37
> 收件人: "dev"<de...@weex.incubator.apache.org>;
> 抄送: "tw102972"<tw...@alibaba-inc.com>;
> 主题: 【Discussion】 More enhanced about <web> component
>
>
>
> Hi, I'm Tw93 (侑夕) from Fliggy, I'd like to discuss the enhancements about
> component, let it take over where we can't implement through weex.
>
>
> 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.
>
>
> My solution
>
>
> 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/f0c7d877fb6b0e9b661aa4f53a652793
>
>
> Demo Bundle JS
>
>
> Web End
>
>
>
>
> Demo && Theory
>
>
>
>
>
>
>
> Details
>
>
> Support to send messages from Weex to a html in component.
>
> Native：
>
> - (void)notifyWebview:(NSDictionary *) data { NSString *json =
> [WXUtility JSONString:data]; NSString *code = [NSString
> stringWithFormat:@"(function(){var evt=null;var data=%@;if(typeof
> CustomEvent==='function'){evt=new CustomEvent('notify',{detail:
> data})}else{evt=document.createEvent('CustomEvent');
> evt.initCustomEvent('notify',true,true,data)}document.dispatchEvent(evt)}())",
> json]; [_jsContext evaluateScript:code]; }
>
> How to use：
>
> // Weex const webview = weex.requireModule('webview');
> webview.notifyWebview(this.$refs.webview, "message"); // Web
> document.addEventListener('notify',function(e){ console.log(e.detail)
> },false)
>
>
> Support to send messages from a html in component to Weex.
>
>
> Native：
>
> _jsContext[@"postMessage"] = ^(JSValue *data){ [weakSelf fireEvent:@"notify"
> params:[data toDictionary]]; };
>
> How to use：
>
> // Weex <web @notify="onMessage"></web> // Web
> window.postMessage(message, targetOrigin, false);
>
>
> Support to render html source.
>
>
> Native:
>
> [_webview loadHTMLString:_source baseURL:nil];
>
> How to use:
>
> <web source='<p style="text-align: center;">Any HTML you want to
> add.</p>'></web>
>
> Welcome to put forward any suggestion about the solution or other
> requirements for the component.
>
> After that, I'm going to submit a pr. Thanks！
>
Re: 【Discussion】 More enhanced about component
Posted by acton <zh...@gmail.com>.
hi Tw93, yuque.com needs to login or register, may be
https://gist.github.com/ would be a better choice
2018-02-28 11:51 GMT+08:00 汤威 <tw...@qq.com>:
> Sorry, the email format is very poor, please check the format here.
> https://yuque.com/tw93/weex/icefzu
>
>
> ------------------ 原始邮件 ------------------
> 发件人: "汤威"<tw...@qq.com>;
> 发送时间: 2018年2月28日(星期三) 中午11:37
> 收件人: "dev"<de...@weex.incubator.apache.org>;
> 抄送: "tw102972"<tw...@alibaba-inc.com>;
> 主题: 【Discussion】 More enhanced about <web> component
>
>
>
> Hi, I'm Tw93 (侑夕) from Fliggy, I'd like to discuss the enhancements about
> component, let it take over where we can't implement through weex.
>
>
> 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.
>
>
> My solution
>
>
> 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/f0c7d877fb6b0e9b661aa4f53a652793
>
>
> Demo Bundle JS
>
>
> Web End
>
>
>
>
> Demo && Theory
>
>
>
>
>
>
>
> Details
>
>
> Support to send messages from Weex to a html in component.
>
> Native：
>
> - (void)notifyWebview:(NSDictionary *) data { NSString *json =
> [WXUtility JSONString:data]; NSString *code = [NSString
> stringWithFormat:@"(function(){var evt=null;var data=%@;if(typeof
> CustomEvent==='function'){evt=new CustomEvent('notify',{detail:
> data})}else{evt=document.createEvent('CustomEvent');
> evt.initCustomEvent('notify',true,true,data)}document.dispatchEvent(evt)}())",
> json]; [_jsContext evaluateScript:code]; }
>
> How to use：
>
> // Weex const webview = weex.requireModule('webview');
> webview.notifyWebview(this.$refs.webview, "message"); // Web
> document.addEventListener('notify',function(e){ console.log(e.detail)
> },false)
>
>
> Support to send messages from a html in component to Weex.
>
>
> Native：
>
> _jsContext[@"postMessage"] = ^(JSValue *data){ [weakSelf fireEvent:@"notify"
> params:[data toDictionary]]; };
>
> How to use：
>
> // Weex <web @notify="onMessage"></web> // Web
> window.postMessage(message, targetOrigin, false);
>
>
> Support to render html source.
>
>
> Native:
>
> [_webview loadHTMLString:_source baseURL:nil];
>
> How to use:
>
> <web source='<p style="text-align: center;">Any HTML you want to
> add.</p>'></web>
>
> Welcome to put forward any suggestion about the solution or other
> requirements for the component.
>
> After that, I'm going to submit a pr. Thanks！
>