You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2018/03/23 09:44:24 UTC
[01/12] incubator-weex-site git commit: *[doc] add component module
and handler concept
Repository: incubator-weex-site
Updated Branches:
refs/heads/master da4a81e4d -> 38839e787
*[doc] add component module and handler concept
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/cb0422b5
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/cb0422b5
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/cb0422b5
Branch: refs/heads/master
Commit: cb0422b52d4a1f7dacc471f0811f46685fdb3768
Parents: 53d91f8
Author: acton393 <zh...@gmail.com>
Authored: Tue Mar 13 15:43:45 2018 +0800
Committer: acton393 <zh...@gmail.com>
Committed: Tue Mar 13 15:43:45 2018 +0800
----------------------------------------------------------------------
source/cn/wiki/component-introduction.md | 11 ++++++
source/cn/wiki/handler-introduction.md | 51 +++++++++++++++++++++++++++
source/cn/wiki/module-introduction.md | 31 ++++++++++++++++
3 files changed, 93 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/cb0422b5/source/cn/wiki/component-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/component-introduction.md b/source/cn/wiki/component-introduction.md
new file mode 100644
index 0000000..33c6f32
--- /dev/null
+++ b/source/cn/wiki/component-introduction.md
@@ -0,0 +1,11 @@
+---
+title: component
+type: wiki
+group: 概念
+order: 4.3
+version: 2.1
+---
+
+### 什么是 component
+ 简单来讲，`component` 就类似 `Weex` 渲染引擎上的 `Widget`, 符合一定的规则的 `Widget`, 可以被 Weex engine 在初始化的时候正确的加载，开发者在 `DSL` 书写对应的标签名字(在注册的时提供的注册名字)， 比如内置的一些组件 `div`，`image` 和 `text`。它可以读取特定的属性，展示用户数据，承载和触发事件。
+
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/cb0422b5/source/cn/wiki/handler-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/handler-introduction.md b/source/cn/wiki/handler-introduction.md
new file mode 100644
index 0000000..21de59e
--- /dev/null
+++ b/source/cn/wiki/handler-introduction.md
@@ -0,0 +1,51 @@
+---
+title: handler
+type: wiki
+group: 概念
+order: 4.3
+version: 2.1
+---
+
+### 什么是 handler
+ hanlder(Android 中称为 adapter，以下称 handler) 是 WeexSDK engine 中一个 service 的概念，它可以被 component、module 和其他的 handler 实现中调用。
+
+### handler 调用细节
+
+ handler 提供了不同 App 和客户端解耦的能力，上层通过 interface(Android) 和 protocol(iOS) 约束方法，handler 的实现者，只需要实现该 handler 对应的接口声明的方法即可，调用者不关注 handler 具体的实现，只通过接口获得需要的数据或者调用对应的 handler 方法，每个 protocol(interface) 对应的 handler 在 app 生命周期期间只有一个实例。
+
+### handler 和 module 的区别
+
+- 在应用中的位置
+
+ 
+ 上图假设当前APP 中已经打开了三个 Weex 的页面，三个页面中都已经调用过 fetch module 的方法，每个页面都会动态的产生一个 fetch module class 的 Object，随着页面的销毁，页面持有的 module 也会被销毁。handler class 对应的 Object 只会有一个。
+
+- 开发者使用
+ handler 更多的是针对 native 开发同学来开发和使用，在其他的 component 和 module 中被调用。module 是由 native 开发同学完成之后提供给前端同学使用，可以暴露一些操作方法来实现一定的功能。
+
+### 内置 handler
+WeexSDK 内部的一些 handler 场景描述
+ - navigationHandler
+
+ WeexSDK 内部提供了一个默认的 navigation 的 handler，该 handler 是在 navigation Module 中调用 push 和 pop 的一些操作时候被调用。
+ SDK 中提供了默认的导航操作Handler
+
+ - imageLoaderHandler
+
+ WeexSDK 图片组件需要从一个固定的 URI 中加载资源，这个加载行为也被封装到 image 的 handler 中，所以在接入 WeexSDK 时候，一定得提供图片 load 的handler。
+ SDK 中未提供 load 图片 Handler
+
+ - AppMonitorHandler
+
+ 该 handler 是 WeexSDK 在渲染过程中性能统计，module 调用统计时候会将数据同步到该 handler 中，可以实现该 handler 将对应的数据上传到监控平台做性能的监控。
+ SDK 未提供 监控 Handler
+
+ - JSEXceptionHandler
+
+ JavaScript 在 runtime 可能会发生一些错误，首先由 JavaScript Engine 捕捉，然后抛出到 WeexSDK， WeexSDK 会通过 JSExceptionHandler 通知到外部调用。
+ SDK 中未提供默认接受 JSException 的 Handler
+
+ - URLRewriteHandler
+
+ image、video、web组件都在加载 URL 的时候会进行 URL 的重写，重写的规则就是由 URLRewriteHandler 提供，在这里 Handler 里面，可以将特定的 URL，重写为本地 URL 或者其他路径。了解更多默认重写规则 [path](../guide/advanced/path.html)
+ WeexSDK 默认提供重写规则
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/cb0422b5/source/cn/wiki/module-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/module-introduction.md b/source/cn/wiki/module-introduction.md
new file mode 100644
index 0000000..d3f6507
--- /dev/null
+++ b/source/cn/wiki/module-introduction.md
@@ -0,0 +1,31 @@
+---
+title: module
+type: wiki
+group: 概念
+order: 4.3
+version: 2.1
+---
+## 什么是 module
+ moudle 是完成一个操作的方法集合，在 Weex 的页面中，允许开发者 `require` 引入，调用 `module` 中的方法，WeexSDK 在启动时候，已经注册了一些内置的 module。
+
+## module 注册过程
+ native 端注册moudle 的流程如下图:
+ 
+
+## 内置 module
+`stream` module, 开发者可以利用它给服务端发送网络请求，接受数据返回，开发者可以在 Weex 的页面中执行如下代码：
+ ```javaScript
+ var stream = weex.requireModule('stream');
+ stream.fetch({
+ method: 'GET',
+ url: 'http://httpbin.org/get',
+ type:'jsonp'
+ }, function(ret) {
+ console.log('in completion')
+ },function(response){
+ console.log('in progress')
+ });
+ ```
+ 查看 [stream](../references/modules/stream.html) 完整文档
+
+## module 和 [handler](./handler-introduction.html) 区别
\ No newline at end of file
[09/12] incubator-weex-site git commit: [doc] update document
Posted by ha...@apache.org.
[doc] update document
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/8581b68e
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/8581b68e
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/8581b68e
Branch: refs/heads/master
Commit: 8581b68e6d1e8915d161070bfbe978d12348727e
Parents: 8f7d262
Author: acton393 <zh...@gmail.com>
Authored: Fri Mar 23 17:34:56 2018 +0800
Committer: acton393 <zh...@gmail.com>
Committed: Fri Mar 23 17:34:56 2018 +0800
----------------------------------------------------------------------
source/cn/guide/extend-module-using-swift.md | 2 +-
source/cn/wiki/component-introduction.md | 2 +-
source/cn/wiki/handler-introduction.md | 2 +-
source/cn/wiki/module-introduction.md | 2 +-
source/guide/extend-module-using-swift.md | 2 +-
source/wiki/component-introduction.md | 2 +-
source/wiki/handler-introduction.md | 2 +-
source/wiki/module-introduction.md | 2 +-
8 files changed, 8 insertions(+), 8 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8581b68e/source/cn/guide/extend-module-using-swift.md
----------------------------------------------------------------------
diff --git a/source/cn/guide/extend-module-using-swift.md b/source/cn/guide/extend-module-using-swift.md
index 20234d9..95fee06 100644
--- a/source/cn/guide/extend-module-using-swift.md
+++ b/source/cn/guide/extend-module-using-swift.md
@@ -1,5 +1,5 @@
---
-title: 使用 swift 扩展 Weex
+title: 使用 swift 扩展 iOS 的功能
type: guide
group: 扩展
order: 6.4
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8581b68e/source/cn/wiki/component-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/component-introduction.md b/source/cn/wiki/component-introduction.md
index 1ffd629..7c2b36d 100644
--- a/source/cn/wiki/component-introduction.md
+++ b/source/cn/wiki/component-introduction.md
@@ -1,5 +1,5 @@
---
-title: component
+title: Component
type: wiki
group: 概念
order: 5.3
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8581b68e/source/cn/wiki/handler-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/handler-introduction.md b/source/cn/wiki/handler-introduction.md
index a22c1e4..3f60541 100644
--- a/source/cn/wiki/handler-introduction.md
+++ b/source/cn/wiki/handler-introduction.md
@@ -1,5 +1,5 @@
---
-title: handler
+title: Handler
type: wiki
group: 概念
order: 5.2
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8581b68e/source/cn/wiki/module-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/module-introduction.md b/source/cn/wiki/module-introduction.md
index a867d02..f222b89 100644
--- a/source/cn/wiki/module-introduction.md
+++ b/source/cn/wiki/module-introduction.md
@@ -1,5 +1,5 @@
---
-title: module
+title: Module
type: wiki
group: 概念
order: 5.1
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8581b68e/source/guide/extend-module-using-swift.md
----------------------------------------------------------------------
diff --git a/source/guide/extend-module-using-swift.md b/source/guide/extend-module-using-swift.md
index c9047ed..5d39a9f 100644
--- a/source/guide/extend-module-using-swift.md
+++ b/source/guide/extend-module-using-swift.md
@@ -1,5 +1,5 @@
---
-title: Extend weex using swift
+title: Extend iOS with swift
type: guide
group: Extend
order: 6.4
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8581b68e/source/wiki/component-introduction.md
----------------------------------------------------------------------
diff --git a/source/wiki/component-introduction.md b/source/wiki/component-introduction.md
index f6c9e84..ffa4567 100644
--- a/source/wiki/component-introduction.md
+++ b/source/wiki/component-introduction.md
@@ -1,5 +1,5 @@
---
-title: component
+title: Component
type: wiki
group: concept
order: 5.1
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8581b68e/source/wiki/handler-introduction.md
----------------------------------------------------------------------
diff --git a/source/wiki/handler-introduction.md b/source/wiki/handler-introduction.md
index ac985fb..22d0e28 100644
--- a/source/wiki/handler-introduction.md
+++ b/source/wiki/handler-introduction.md
@@ -1,5 +1,5 @@
---
-title: handler
+title: Handler
type: wiki
group: concept
order: 5.2
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8581b68e/source/wiki/module-introduction.md
----------------------------------------------------------------------
diff --git a/source/wiki/module-introduction.md b/source/wiki/module-introduction.md
index 76c4696..268c532 100644
--- a/source/wiki/module-introduction.md
+++ b/source/wiki/module-introduction.md
@@ -1,5 +1,5 @@
---
-title: module
+title: Module
type: wiki
group: concept
order: 5.3
[06/12] incubator-weex-site git commit: [doc] update documentation
for extend ios
Posted by ha...@apache.org.
[doc] update documentation for extend ios
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/78182898
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/78182898
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/78182898
Branch: refs/heads/master
Commit: 781828980352f37f1381d56857e5892422532f47
Parents: 7500fee
Author: acton393 <zh...@gmail.com>
Authored: Mon Mar 19 18:34:09 2018 +0800
Committer: acton393 <zh...@gmail.com>
Committed: Mon Mar 19 18:34:09 2018 +0800
----------------------------------------------------------------------
source/cn/guide/extend-ios.md | 8 +-
source/cn/guide/extend-module-using-swift.md | 9 +-
source/guide/extend-ios.md | 464 ++++++++++------------
source/guide/extend-module-using-swift.md | 114 ++++++
source/wiki/component-introduction.md | 28 ++
source/wiki/handler-introduction.md | 55 +++
source/wiki/module-introduction.md | 34 ++
7 files changed, 454 insertions(+), 258 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/78182898/source/cn/guide/extend-ios.md
----------------------------------------------------------------------
diff --git a/source/cn/guide/extend-ios.md b/source/cn/guide/extend-ios.md
index b525910..c947e67 100644
--- a/source/cn/guide/extend-ios.md
+++ b/source/cn/guide/extend-ios.md
@@ -63,7 +63,7 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
- 覆盖 `WXComponent` 中的生命周期方法
- `loadView`
- 一个 component 默认对应于一个 view ， 如果未覆盖 `loadView` 提供自定义 `view`, 会使用 `WXComponent` 基类中的 `WXView`, `WXView` 是继承自 UIView 的一个派生 view。
+ 一个 component 默认对应于一个 view，如果未覆盖 `loadView` 提供自定义 `view`, 会使用 `WXComponent` 基类中的 `WXView`, `WXView` 是继承自 UIView 的一个派生 view。
要实现地图功能，我们需要对应的地图 view, 比如系统的 `MKMapView`
```
@@ -115,7 +115,7 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
}
</script>
```
- 给当前组件添加 `BOOL` 成员 mapLoaded,记录当前事件是否被添加
+ 给当前组件添加 `BOOL` 成员 mapLoaded,记录当前事件是否被添加，当地图加载完成时候，我们可以根据这个判断是否应该发送事件。
- 覆盖组件生命周期方法添加和移除事件
@@ -137,7 +137,8 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
```
- 在适宜的时间发事件通知
- 在 MKMapView 加载完成的 delegate 方法中，发事件通知自定义事件
+ 在 MKMapView 加载完成的 delegate 方法中，发事件通知自定义事件
+ > 不要忘记设置 MKMapView 的 delegate.
```object-c
- (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView {
@@ -268,6 +269,7 @@ WeexSDK 0.9.5 之后支持了在 js 中直接调用 component 的方法，自定
开发者也可以定义自己的 `protocol` 和对应的实现来使用 `handler` 机制
- 新建基类为 NSObject 的 class 实现 `WXImgLoaderProtocol` 协议， 实现 `WXImgLoaderProtocol` 的方法
+> 下面加载图片的逻辑需要依赖 SDWebImage，你也可以不依赖 SDWebimage 使用自己的方式加载对应 URL 图片。
```object-c
@implementation WXImgLoaderDefaultImpl
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/78182898/source/cn/guide/extend-module-using-swift.md
----------------------------------------------------------------------
diff --git a/source/cn/guide/extend-module-using-swift.md b/source/cn/guide/extend-module-using-swift.md
index 3ac4a9f..20234d9 100644
--- a/source/cn/guide/extend-module-using-swift.md
+++ b/source/cn/guide/extend-module-using-swift.md
@@ -89,7 +89,7 @@ version: 2.1
[WXSDKEngine registerModule:@"swifter" withClass:[WXSwiftTestModule class]];
```
- - we 文件中使用
+ - 前端脚本中用法
```
<template>
@@ -97,14 +97,9 @@ version: 2.1
</template>
<script>
- require('weex-components');
-
module.exports = {
- data: {
-
- },
ready: function() {
- var swifter = require('@weex-module/swifter');
+ var swifter = weex.require('swifter');
swifter.printSome("https://www.taobao.com",function(param){
nativeLog(param);
});
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/78182898/source/guide/extend-ios.md
----------------------------------------------------------------------
diff --git a/source/guide/extend-ios.md b/source/guide/extend-ios.md
index b897ee5..90176b2 100644
--- a/source/guide/extend-ios.md
+++ b/source/guide/extend-ios.md
@@ -12,294 +12,212 @@ version: 2.1
>
> **If you are extending your custom modules/components, be sure NOT to export the ability of Objective-C runtime, be sure NOT to export dynamic and uncontrolled methods such as `dlopen()`, `dlsym()`, `respondsToSelector:`, `performSelector:`, `method_exchangeImplementations()`, be sure NOT to export any private methods. **
-### Module extend
+Weex SDK provides only rendering capabilities, rather than have other capabilities. There are some internal [components](../wiki/component-introduction.html), [modules](../wiki/module-introduction.html) and [handlers](../wiki/handler-introduction.html). If you want these features which weexSDK doesn't provide, you can to extend.
+> The following section we will extend iOS using Objective-C and here is [swift](./extend-module-using-swift.html).
-Weex SDK provides only rendering capabilities, rather than have other capabilities, such as network, picture, and URL redirection. If you want these features, you need to implement it.
+### extend custom module
-For example: If you want to implement an address jumping function, you can achieve a Module following the steps below.
+ To extend your custom weex modules in iOS, you must make your class conform to `WXModuleProtocol` protocol, and then exports your method to javaScript using macro `WX_EXPORT_METHOD`,finally register your module with your class and a self-define module name.
-#### Step to customize a module
+- basic
+ we will custom a module to print params that javaScript give.
-1. Module
- customized must implement WXModuleProtocol
-2. A macro named `WX_EXPORT_METHOD` must be added, as it is the only way to export methods to JavaScript.
-3. The weexInstance should be synthesized. Each module object is bind to a specific instance.
-4. Module methods will be invoked in UI thread, so do not put time consuming operation there. If you want to execute the whole module methods in other thread, please implement the method `- (NSThread *)targetExecuteThread` in protocol. In the way, tasks distributed to this module will be executed in targetExecuteThread.
-5. Weex params can be String or Map.
-6. Module supports to return results to Javascript in callback. This callback is type of `WXModuleCallback`, the params of which can be String or Map.
+ 1. new a class derived from `NSObject` conforming `WXModuleProtocol` protocol
+
+ 
-```objective-c
-@implementation WXEventModule
+ 2. add your module method and then exports using macro `WX_EXPORT_METHOD`
-@synthesize weexInstance;
-WX_EXPORT_METHOD(@selector(openURL:callback:))
+ 
-- (void)openURL:(NSString *)url callback:(WXModuleCallback)callback
-{
- NSString *newURL = url;
- if ([url hasPrefix:@"//"]) {
- newURL = [NSString stringWithFormat:@"http:%@", url];
- } else if (![url hasPrefix:@"http"]) {
- newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;
- }
+ 3. register module after WeexSDK's initialization
- UIViewController *controller = [[WXDemoViewController alloc] init];
- ((WXDemoViewController *)controller).url = [NSURL URLWithString:newURL];
+ 
- [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
- callback(@{@"result":@"success"});
-}
+ by far, we've finished a basic custom module, and you may understand how to custom a weex module in iOS using Objective-C.
-@end
-```
+ We can use it in javaScript code like this:
-#### export synchronous methods <span class="api-version">v0.10+</span>
+ ```javaScript
+ weex.requireModule("event").showParams("hello Weex)
+ ```
-If you want to export synchronous methods which could make Javascript receive return values from natvie, you can use `WX_EXPORT_METHOD_SYNC` macro.
+- advanced extendibility
-native code:
+ you must understand more in `WXModuleProtocol` protocol, we'll talk more about blueprint methods and properties in this protocol.
-```objective-c
-@implementation WXEventModule
+ 1. `weexInstance`
+ The instance of `WXSDKInstance` holds the references of all modules created in a single page. if you add `@synthesize weexInstance` in your module class, your module will hold a reference to the instance of `WXSDKInstance` who create and initialize your module, or you get nothing. You can get more details by `weexInstance` such as pageName.
-WX_EXPORT_METHOD_SYNC(@selector(getString))
+ 2. `targetExecuteThread`
+ We will schedule your module method to main thread(UI thread), we highly recommend that you can not do much works here, if must, you can add implementation for this method. You can provide a thread so that we can schedule to.
-- (NSString *)getString
-{
- return @"testString";
-}
+ 3. `WXModuleKeepAliveCallback`
+ Sometimes you can return your result to your caller, callback is important in this scene,the params for callback can be string or dictionary. You must specify a second params to keep your callback function id in js after used. We'll create a new function id every time callback, `NO` will be a better choice for memory.
-@end
-```
+ 4. `WX_EXPORT_METHOD_SYNC`
+ > This feature only works on WeexSDK 0.10 and later. Synchronous method only works in JavaScript thread, you cannot do much works here.
+ exports asynchronous method using `WX_EXPORT_METHOD`, you may get result in callback function.
+ `WX_EXPORT_METHOD_SYNC` to export synchronous method. You can get result on the left of operand `=`.
-js code:
+### extend custom component
-```javascript
-const eventModule = weex.requireModule('event')
-const returnString = syncTest.getString() // return "testString"
-```
+- new a class derived from `WXComponent` class
+ if we do nothing in this class and then register to WeexSDK engine, its functionality is just like `div`.
-You can alse return number/array/dictionary except string.
+- override the lifecycle of `WXComponent`
-`notice:` the exported synchronous native method **can only be called on JS thread**. **Do not** do heavy work which will block js execution.
+ - `loadView`
+ We will load a view for a component default, if you didn't override this method, supperclass will provide a `WXView` derived from `UIView`. If we want to load html or just to show a map, override `loadView` and provide a custom view is a good choice.
-`notice:` Vue 2.0 has not supported this feature yet. It will be supported in version 0.12 at the soonest.
+ ```
+ - (UIView *)loadView {
+ return [MKMapView new];
+ }
+ ```
+ - `viewDidLoad`
+ If you want to make some configurations for your custom view like set delegate, you can finish here.
+ You don't need to set frame for your custom view if it doesn't has any subview, weexSDK will set it's frame according to style.
-#### Register the module
+ ```
+ - (void)viewDidLoad {
+ ((MKMapView*)self.view).delegate = self;
+ }
+ ```
+- register component
-You can register the customized module by calling the method `registerModule:withClass` in WXSDKEngine.
+ ```
+ [WXSDKEngine registerComponent:@"map" withClass:[WXMapComponent class]];
+ ```
-```objective-c
-WXSDKEngine.h
-/**
-* @abstract Registers a module for a given name
-* @param name The module name to register
-* @param clazz The module class to register
-**/
-+ (void)registerModule:(NSString *)name withClass:(Class)clazz;
+ by far you can use your custom component in front-end
-[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
+ ```html
+ <template>
+ <div>
+ <map style="width:200px;height:200px"></map>
+ </div>
+ </template>
```
-### Handler extend
-
-Weex SDK doesn't have capabilitis, such as image download 、navigator operation，please implement these protocols by yourself.
-
-#### WXImgLoaderProtocol
-<font color="gray">
-Weex SDK has no image download capability, you need to implement `WXImgLoaderProtocol`. Refer to the following examples.
-
-```objective-c
-WXImageLoaderProtocol.h
-@protocol WXImgLoaderProtocol <WXModuleProtocol>
-
-/**
- * @abstract Creates a image download handler with a given URL
- * @param imageUrl The URL of the image to download
- * @param imageFrame The frame of the image you want to set
- * @param options : The options to be used for this download
- * @param completedBlock : A block called once the download is completed.
- image : the image which has been download to local.
- error : the error which has happened in download.
- finished : a Boolean value indicating whether download action has finished.
- */
- -(id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;
- @end
-```
-
-Implement above protocol as follows.
-
-
-```objective-c
-@implementation WXImgLoaderDefaultImpl
-#pragma mark -
-#pragma mark WXImgLoaderProtocol
-
-- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
-{
- if ([url hasPrefix:@"//"]) {
- url = [@"http:" stringByAppendingString:url];
- }
- return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
- } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
- if (completedBlock) {
- completedBlock(image, error, finished);
+Weex engine has done some works to support common events and other attributes, if you want support your own attributes, let's continue.
+
+- custom events for your component
+ Our target is that support `mapLoaded` event for the component we just implement, and then we can use in front-end directyly. The front-end code can be like this.
+
+ ```html
+ <template>
+ <div>
+ <map style="width:200px;height:200px" @mapLoaded="onMapLoaded"></map>
+ </div>
+ </template>
+
+ <script>
+ export default {
+ methods: {
+ onMapLoaded:function(e) {
+ console.log("map loaded"+JSON.stringify(e))
+ }
+ }
}
- }];
-}
-@end
+ </script>
```
-
-#### Register the handler
-
-You can register the handler which implements the protocol by calling `registerHandler:withProtocol` in WXSDKEngine.
-
-```objective-c
-WXSDKEngine.h
-/**
-* @abstract Registers a handler for a given handler instance and specific protocol
-* @param handler The handler instance to register
-* @param protocol The protocol to confirm
-*/
-+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
-
-[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];
-```
-
-## Custom Native Components for iOS
-
-### Component extend
-
-There are a lot of native components ready to be used in the Weex SDK, but users always have their own use cases. You might have written an awesome native UI widget in your previous work and just want to wrap up it and export to Weex. So we provide a way to enable developers to create their own custom fully-native components.
-
-This guide will use the implementation of existing component `image` to show you how to build a native component. It will also assume that you are familiar with iOS programming.
-
-#### Registration
-
-Defining a custom native component is simple. Just call `[WXSDKEngine registerComponent:withClass:]` with the component's tag name as first argument.
-
-```objective-c
-[WXSDKEngine registerComponent:@"image" withClass:[WXImageComponent class]];
-```
-
-Then you can create a `WXImageComponent` class to represent the implementation of image component.
-
-Now you can use `<image>` wherever you want in the template.
+we must save status for event added or not, so we add a `BOOL` member named `mapLoaded` for the component class to make it record, and when event map loaded, we can fire event according to this record.
+
+- custom event
+ - override method add/remove event
+
+ ```Objective-C
+ - (void)addEvent:(NSString *)eventName {
+ if ([eventName isEqualToString:@"mapLoaded"]) {
+ _mapLoaded = YES;
+ }
+ }
+
+ - (void)removeEvent:(NSString *)eventName
+ {
+ if ([eventName isEqualToString:@"mapLoaded"]) {
+ _mapLoaded = NO;
+ }
+ }
+ ```
+ - fire event to front-end
+ we'll fire `mapLoaded` event when map loaded finish according to our record.
+ > do not forget to set delegate for MKMapView.
+
+ ```object-c
+ - (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView {
+ if (_mapLoaded) {
+ [self fireEvent:@"mapLoaded" params:@{@"customKey":@"customValue"} domChanges:nil]
+ }
+ }
+ ```
+
+We have finish our custom event, so what about custom attributes? this is the same important as custom events.
+
+- custom attributes
+ The next target is that we add a custom attribute `showTraffic`, we can display real time traffic or not according to this attribute. The front-end code can be like the following.
```html
-<image></image>
-```
-
-#### Adding Properties
-
-The next thing we can do is to extend some native properties to make the component more powerful. As an image, let's say we should have a `src` attribute as image's remote source and a `resize` attribute as image's resize mode(contain/cover/stretch).
-
-```objective-c
-@interface WXImageComponent ()
-
-@property (nonatomic, strong) NSString *imageSrc;
-@property (nonatomic, assign) UIViewContentMode resizeMode;
-
-@end
+ <template>
+ <div>
+ <map style="width:200px;height:200px" showTraffic="true"></map>
+ </div>
+ </template>
```
-All of the styles, attributes and events will be passed to the component's initialization method, so here you can store the properties which you are interested in.
-
-```objective-c
-@implementation WXImageComponent
-
-- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
-{
- if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
- _imageSrc = [WXConvert NSString:attributes[@"src"]];
- _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
+ - override component init method `initWithRef...`
+ add a `BOOL` member `showsTraffic` to make the status whether front-end user use the attribute or not record. We can get all the attribute for this component by override init method of component.
+
+ ```object-c
+ - (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance {
+ if(self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
+
+ if (attributes[@"showsTraffic"]) {
+ _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
+ }
+ }
+ return self;
}
-
- return self;
-}
-
-@end
-```
-
-The properties getted in the attributes are of `id` type, so we have to convert them to the type we want using a conversion function. Basic conversion functions can be found in the `WXConvert` file, or you can just add your own conversion function.
-
-
-#### Hooking Render Life Cycle
+ ```
+ - set property for custom view.
+ ```object-c
+ - (void)viewDidLoad {
+ ((MKMapView*)self.view).showsTraffic = _showsTraffic;
+ }
+ ```
+ - support attribute updates
+
+ ```object-c
+ - (void)updateAttributes:(NSDictionary *)attributes
+ {
+ if (attributes[@"showsTraffic"]) {
+ _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
+ ((MKMapView*)self.view).showsTraffic = _showsTraffic;
+ }
+ }
+ ```
+- more life cycle for component
A Native Component has a life cycle managed by Weex. Weex creates it, layout it, renders it and destroys it.
Weex offers component life cycle hooks that give you visibility into these key moments and the ability to act when they occur.
-| method | description |
-| :------------------: | ---------------------------------------- |
-| initWithRef:type:... | Initializes a new component using the specified properties. |
-| layoutDidFinish | Called when the component has just laid out. |
-| loadView | Creates the view that the component manages. |
-| viewWillLoad | Called before the load of component's view . |
-| viewDidLoad | Called after the component's view is loaded and set. |
-| viewWillUnload | Called just before releasing the component's view. |
-| viewDidUnload | Called when the component's view is released. |
-| updateStyles: | Called when component's style are updated. |
-| updateAttributes: | Called when component's attributes are updated. |
-| addEvent: | Called when adding an event to the component. |
-| removeEvent: | Called when removing an event frome the component. |
-
-
-As in the image component example, if we need to use our own image view, we can override the `loadView` method.
-
-
-```objective-c
-- (UIView *)loadView
-{
- return [[WXImageView alloc] init];
-}
-```
-
-Now Weex will use `WXImageView` to render the `image` component.
-
-As an image component, we will need to fetch the remote image and set it to the image view. This can be done in `viewDidLoad` method when the view is created and loaded. `viewDidLoad` is also the best time to perform additional initialization for your view， such as content mode changing.
-
-
-```objective-c
-- (void)viewDidLoad
-{
- UIImageView *imageView = (UIImageView *)self.view;
- imageView.contentMode = _resizeMode;
- imageView.userInteractionEnabled = YES;
- imageView.clipsToBounds = YES;
- imageView.exclusiveTouch = YES;
-
- // Do your image fetching and updating logic
-}
-```
-
-If image's remote source can be changed, you can also hook the `updateAttributes:` method to perform your attributes changing logic. Component's view always has been loaded while `updateAttributes:` or `updateStyles:` is called.
-
-
-```objective-c
-- (void)updateAttributes:(NSDictionary *)attributes
-{
- if (attributes[@"src"]) {
- _imageSrc = [WXConvert NSString:attributes[@"src"]];
- // Do your image updating logic
- }
-
- if (attributes[@"resize"]) {
- _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
- self.view.contentMode = _resizeMode;
- }
-}
-```
-
-Maybe there is even more life cycle hooks you might need to consider, such as `layoutDidFinish` while layout computing is finished. If you want to go deeper, check out the `WXComponent.h` file in the source code.
-
-Now you can use `<image>` and its attributes wherever you want in the template.
-
-```html
-<image style="your-custom-style" src="image-remote-source" resize="contain/cover/stretch"></image>
-```
-
-#### Component Method
+ | method | description |
+ | :------------------: | ---------------------------------------- |
+ | initWithRef:type:... | Initializes a new component using the specified properties. |
+ | layoutDidFinish | Called when the component has just laid out. |
+ | loadView | Creates the view that the component manages. |
+ | viewWillLoad | Called before the load of component's view . |
+ | viewDidLoad | Called after the component's view is loaded and set. |
+ | viewWillUnload | Called just before releasing the component's view. |
+ | viewDidUnload | Called when the component's view is released. |
+ | updateStyles: | Called when component's style are updated. |
+ | updateAttributes: | Called when component's attributes are updated. |
+ | addEvent: | Called when adding an event to the component. |
+ | removeEvent: | Called when removing an event frome the component. |
+
+### Component Method
from WeexSDK `0.9.5`, you can define your component method by macro `WX_EXPORT_METHOD`
for example:
@@ -338,3 +256,53 @@ after your registration for your own custom component, now you can call it in yo
}
</script>
```
+
+### custom your handlers
+
+We don't provide functionality for downloading image but defines a blueprint of methods in `WXImgLoaderProtocol` for loading image, and image component get image content from these methods. You must implement methods in `WXImgLoaderProtocol` except the `optional` methods to display image from specified url.
+You can also define your own `protocol` and implement its handler.
+
+- new a class derived from `NSObject` conforming `WXImgLoaderProtocol` and then add implementation for methods in `WXImgLoaderProtocol`.
+
+> the flowing code may require SDWebImage as dependency, you can download remote url image by your own way without SDWebImage.
+
+ ```object-c
+ @implementation WXImgLoaderDefaultImpl
+ - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
+ {
+ if ([url hasPrefix:@"//"]) {
+ url = [@"http:" stringByAppendingString:url];
+ }
+ return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
+ } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
+ if (completedBlock) {
+ completedBlock(image, error, finished);
+ }
+ }];
+ }
+ @end
+```
+- register handler
+ register handler by the method `registerHandler:withProtocol` in WXSDKEngine
+
+ ```object-c
+ WXSDKEngine.h
+ /**
+ * @abstract Registers a handler for a given handler instance and specific protocol
+ * @param handler The handler instance to register
+ * @param protocol The protocol to confirm
+ */
+ + (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
+
+ [WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]
+
+ ```
+- use handler
+ you can use your handle in any native code including `component`, `module` and other `handlers`
+ ```object-c
+ id<WXImgLoaderProtocol> imageLoader = [WXSDKEngine handlerForProtocol:@protocol(WXImgLoaderProtocol)];
+ [iamgeLoader downloadImageWithURL:imageURl imageFrame:frame userInfo:customParam completed:^(UIImage *image, NSError *error, BOOL finished){
+ }];
+ ```
+
+
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/78182898/source/guide/extend-module-using-swift.md
----------------------------------------------------------------------
diff --git a/source/guide/extend-module-using-swift.md b/source/guide/extend-module-using-swift.md
new file mode 100644
index 0000000..c9047ed
--- /dev/null
+++ b/source/guide/extend-module-using-swift.md
@@ -0,0 +1,114 @@
+---
+title: Extend weex using swift
+type: guide
+group: Extend
+order: 6.4
+version: 2.1
+---
+
+## Swift In Weex
+
+[Swift and Objective-C](https://developer.apple.com/library/ios/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html#//apple_ref/doc/uid/TP40014216-CH10-ID122) mix-up
+
+a complete [demo](https://github.com/acton393/WeexSwiftSample.git)
+
+### extend module using swift
+
+ As we export moudle method using macro and calling in runtime, so we can extend module using swift by `extension` `bjective-C` class.
+ > You can also finish extending module by write an category for swift class in Objective-C class.
+
+- new `WXSwiftTestModule.h/m` and `WXSwiftTestModule.swift` file ，you will get a tip as follow during the creation
+ 
+ choose `Create Bridging Header`, as we need to access method in `Objective-C` in swift file, and the `Bridging header` can help us. And the format name of the header file is `yourTarget-Bridging-Header.h`, and mine is `WeexDemo-Bridging-Header.h`.
+
+- implementation in `WXSwiftTestModule.h/m`
+ - WXSwiftTestModule.h
+
+ ```
+ #import <Foundation/Foundation.h>
+ #import <WeexSDK/WeexSDK.h>
+
+ @interface WXSwiftTestModule : NSObject <WXModuleProtocol>
+
+ @end
+
+ ```
+ - WXSwiftTestModule.m
+
+ you can search WeexDemo-Swift.h after building your project, Xcode will generate this file for us.
+
+ for simulator the file path may be:
+ ```
+ weex/ios/playground/DerivedData/WeexDemo/Build/Intermediates/WeexDemo.build/Debug-iphonesimulator/WeexDemo.build/DerivedSources/WeexDemo-Swift.h
+ ```
+ export method define in swift file.
+ ```
+ #import "WXSwiftTestModule.h"
+ #import "WeexDemo-Swift.h" // you need to import the header to make Objective-C code recognize the method defined in swift file.
+
+ @implementation WXSwiftTestModule
+ #pragma clang diagnostic push //forbid unknow selector warrning
+ #pragma clang diagnostic ignored "-Wundeclared-selector"
+
+ WX_EXPORT_METHOD(@selector(printSome:callback:)) //method name in Swift, you can get the final method name in `WeexDemo-Swift.h` as the convert of Xcode.
+
+ #pragma clang diagnostic pop
+
+ @end
+
+ ```
+- in Swift
+ make an extension for Objective-C class `WXSwiftTestModule`, add a method, and then export it in Objective-C, then we can use it in javaScript.
+
+ - WXSwiftTestModule.swift
+
+ ```
+ import Foundation
+ public extension WXSwiftTestModule {
+ public func printSome(someThing:String, callback:WXModuleCallback) {
+ print(someThing)
+ callback(someThing)
+ }
+ }
+ ```
+
+ we need to expose `WXSwiftTestModule` `WXModuleCallback` in `WeexDemo-Bridging-Header` as our `Objective-C` need to access them
+
+ - WeexDemo-Bridging-Header.h
+
+ ```
+ //
+ // Use this file to import your target's public headers that you would like to expose to Swift.
+ //
+ #import "WXSwiftTestModule.h"
+ #import "WeexSDK.h"
+ ```
+
+ by far we have finished our module using swift.
+
+ ### module usage
+ - register module to WeexSDK
+
+ ```
+ [WXSDKEngine registerModule:@"swifter" withClass:[WXSwiftTestModule class]];
+
+ ```
+ - front-end usage
+
+ ```
+ <template>
+ <text>Swift Module</text>
+ </template>
+
+ <script>
+ module.exports = {
+ ready: function() {
+ var swifter = weex.require('swifter');
+ swifter.printSome("https://www.taobao.com",function(param){
+ nativeLog(param);
+ });
+ }
+
+ };
+ </script>
+ ```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/78182898/source/wiki/component-introduction.md
----------------------------------------------------------------------
diff --git a/source/wiki/component-introduction.md b/source/wiki/component-introduction.md
new file mode 100644
index 0000000..f6c9e84
--- /dev/null
+++ b/source/wiki/component-introduction.md
@@ -0,0 +1,28 @@
+---
+title: component
+type: wiki
+group: concept
+order: 5.1
+version: 2.1
+---
+
+### what's component
+ Generally，`component` is a entity `Widget` in Weex engine, and it can be loaded if confirm to some details rules whlile the Weex engine init. It can display some detail contents, receive touch or other custom events, custom attributes. There are some internal components registered such as `div`, `image` and `text`, you can custom your own component if these can not meet your needs.
+
+
+### component method
+
+ you can call custom methods for a entity component after adding `ref` attributes, for example:
+
+ ```html
+ <template>
+ <mycomponent ref='mycomponent'></mycomponent>
+ </template>
+ <script>
+ module.exports = {
+ created:function() {
+ this.$refs.mycomponent.focus();
+ }
+ }
+ </script>
+ ```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/78182898/source/wiki/handler-introduction.md
----------------------------------------------------------------------
diff --git a/source/wiki/handler-introduction.md b/source/wiki/handler-introduction.md
new file mode 100644
index 0000000..c86da9a
--- /dev/null
+++ b/source/wiki/handler-introduction.md
@@ -0,0 +1,55 @@
+---
+title: handler
+type: wiki
+group: concept
+order: 4.3
+version: 2.1
+---
+
+### what's handler
+ handler(adapter) is just like service in WeexSDK engine, it can service for component and module, you can use it directly in component、module and other native code.
+
+### handler caller
+
+handler decouples the interface implementation and its interface. You don't need to care more details about the implementation as a handler user, this can be done by the handler developer and the instance of handler will be only one during the lifecycle of application. You can define your own handler interface(protocol in iOS) and use it in any native code.
+
+### the difference between module and handler
+
+- position in app
+
+ 
+ Assume that we have three weex page(WeexSDK instance) in navigation stacks, and they all use fetch module method during the render of page. There will be an instance of fetch module class in every page(WeexSDK instance) destroyed with page destroyed, but there will be only one for the instance of handler class.
+
+- usage
+
+ handler can be called in any native code including weex native component, module and other handlers, it cannot be used in javaScript directly.
+ module can export some methods by native developers to front-end developers, it can be used in javaScript code.
+
+### introduction to internal handler
+
+ - navigationHandler
+
+ There is a default implementation for navigation insterface(protocol), this handler can be used in navigation module methods which complete pop and push operations.
+
+ - imageLoaderHandler
+
+ The image component is a container for image, you can specify url to load image, the logic for download image is in the imageLoaderHandler handler, image component only display image contents.
+
+ WeexSDK doesn't provide default loader for image handler.
+
+ - AppMonitorHandler
+
+ There are some metrics collected during the render progress, and module caller frequency also collect, you can got these metrics by implementing `AppMonitorHandler` handler.
+ WeexSDK doesn't provide default handler for `AppMonitorHandler`.
+
+ - JSExceptionHandler
+
+ There are some runtime exceptions during the execution of javaScript code, JSExceptionHandler provide the monitor for javaScript exception, WeexSDK will invoke this handler while exceptions occurs.
+
+ WeexSDK doesn't provide default handler for `JSExceptionHandler`.
+
+ - URLRewriteHandler
+
+ image、video and web load content from specified url by adopting this rewrite rules, you can define your own rules for custom path.
+
+ WeexSDK provide default handler for `URLRewriteHandler`. Get more details about the default [rewrite rules](../guide/advanced/path.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/78182898/source/wiki/module-introduction.md
----------------------------------------------------------------------
diff --git a/source/wiki/module-introduction.md b/source/wiki/module-introduction.md
new file mode 100644
index 0000000..76c4696
--- /dev/null
+++ b/source/wiki/module-introduction.md
@@ -0,0 +1,34 @@
+---
+title: module
+type: wiki
+group: concept
+order: 5.3
+version: 2.1
+---
+## what's module
+ module is a set of method operation, you can `require` it and call method in it. During the initialization of WeexSDK, some internal modules has been registered to the engine.
+
+## native module process of module registration
+ 
+
+## internal module
+
+`stream` module: it provide a method called `fetch` which can invoke a network request to specified server, you can get more details [here](../references/modules/stream.html).
+
+for example:
+
+ ```javaScript
+ var stream = weex.requireModule('stream');
+ stream.fetch({
+ method: 'GET',
+ url: 'http://httpbin.org/get',
+ type:'jsonp'
+ }, function(ret) {
+ console.log('in completion')
+ },function(response){
+ console.log('in progress')
+ });
+ ```
+
+## differnce between module method and component method
+ For module method you can call after require the target module and it doesn't rely on any component instance. For component method you must get the ref for component first and then call the [component method](./component-introduction.html)
\ No newline at end of file
[07/12] incubator-weex-site git commit: update document for reference
Posted by ha...@apache.org.
update document for reference
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/8f7d2628
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/8f7d2628
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/8f7d2628
Branch: refs/heads/master
Commit: 8f7d2628d9ddcc184dd291add674c9596d651684
Parents: 7818289
Author: acton393 <zh...@gmail.com>
Authored: Mon Mar 19 21:03:48 2018 +0800
Committer: acton393 <zh...@gmail.com>
Committed: Mon Mar 19 21:03:48 2018 +0800
----------------------------------------------------------------------
source/cn/references/modules/globalevent.md | 2 +-
source/cn/wiki/gestures.md | 2 +-
source/wiki/handler-introduction.md | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8f7d2628/source/cn/references/modules/globalevent.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/globalevent.md b/source/cn/references/modules/globalevent.md
index c83c764..0e94dcb 100644
--- a/source/cn/references/modules/globalevent.md
+++ b/source/cn/references/modules/globalevent.md
@@ -106,5 +106,5 @@ globalEvent.addEventListener("WXApplicationDidBecomeActiveEvent", function (e) {
在 [dotWe 上试一试](http://dotwe.org/vue/5a774e8ce3766c88038cab6fe3331f5b)
->>> 目前只有 platform 为 iOS 和 Android 才能支持。[获取当前 platform](../weex-variable.html#weex-environment-object)
+> 目前只有 platform 为 iOS 和 Android 才能支持。[获取当前 platform](../weex-variable.html#weex-environment-object)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8f7d2628/source/cn/wiki/gestures.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/gestures.md b/source/cn/wiki/gestures.md
index f54e90c..bb4a491 100644
--- a/source/cn/wiki/gestures.md
+++ b/source/cn/wiki/gestures.md
@@ -57,7 +57,7 @@ Weex 封装了原生的触摸事件以提供手势系统。使用手势类似于
- `screenX`：触摸点相对于屏幕左侧边缘的 X 轴坐标。
- `screenY`：触摸点相对于屏幕顶部边缘的 Y 轴坐标。
- `force`: 屏幕收到的按压力度，值的范围为 0~1
->>> force 属性目前在支持 forceTouch iOS 设备才支持, iPhone 6s 及更新的 iOS 设备
+> force 属性目前在支持 forceTouch iOS 设备才支持, iPhone 6s 及更新的 iOS 设备
[试一试](http://dotwe.org/vue/91b6929f4f9f97a099a30c516dc2db06)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/8f7d2628/source/wiki/handler-introduction.md
----------------------------------------------------------------------
diff --git a/source/wiki/handler-introduction.md b/source/wiki/handler-introduction.md
index c86da9a..ac985fb 100644
--- a/source/wiki/handler-introduction.md
+++ b/source/wiki/handler-introduction.md
@@ -2,7 +2,7 @@
title: handler
type: wiki
group: concept
-order: 4.3
+order: 5.2
version: 2.1
---
[05/12] incubator-weex-site git commit: [doc] update cn document for
module component handler extend
Posted by ha...@apache.org.
[doc] update cn document for module component handler extend
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/7500fee4
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/7500fee4
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/7500fee4
Branch: refs/heads/master
Commit: 7500fee40e0ed2f71f5369bd156f011b068dded7
Parents: 7f0c878
Author: acton393 <zh...@gmail.com>
Authored: Mon Mar 19 10:58:32 2018 +0800
Committer: acton393 <zh...@gmail.com>
Committed: Mon Mar 19 10:58:32 2018 +0800
----------------------------------------------------------------------
source/cn/guide/extend-ios.md | 32 +++++++++++++--------------
source/cn/wiki/component-introduction.md | 2 +-
source/cn/wiki/handler-introduction.md | 2 +-
source/cn/wiki/module-introduction.md | 4 ++--
4 files changed, 20 insertions(+), 20 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/7500fee4/source/cn/guide/extend-ios.md
----------------------------------------------------------------------
diff --git a/source/cn/guide/extend-ios.md b/source/cn/guide/extend-ios.md
index a570f0e..b525910 100644
--- a/source/cn/guide/extend-ios.md
+++ b/source/cn/guide/extend-ios.md
@@ -13,7 +13,7 @@ version: 2.1
> **如果需要扩展自定义的 module 或者 component ，一定注意不要将 OC 的 runtime 暴露给 JS ， 不要将一些诸如 `dlopen()`， `dlsym()`， `respondsToSelector:`，`performSelector:`，`method_exchangeImplementations()` 的动态和不可控的方法暴露给JS， 也不要将系统的私有API暴露给JS**
Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你需要一些特性但 Weex 并未提供，可以通过扩展自定义的一些插件来实现，通过 WeexSDK 加载。这些插件包括 [component](../wiki/component-introduction.html), [module](../wiki/module-introduction.html) 和 [handler](../wiki/handler-introduction.html)。
->>> 本文都以 Objective-C 为例子书写，如果需要 swift 请参考
+> 本文都以 Objective-C 为例子书写，如果需要 swift 请参考 [使用 swift 扩展 Weex](./extend-module-using-swift.html)
## 自定义 module
@@ -47,7 +47,7 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
3. `WXModuleKeepAliveCallback`
Module 支持返回值给 JavaScript中的回调，回调的类型是`WXModuleKeepAliveCallback`,回调的参数可以是String或者Map, 该 block 第一个参数为回调给 JavaScript 的数据，第二参数是一个 BOOL 值，表示该回调执行完成之后是否要被清除，JavaScript 每次调用都会产生一个回调，但是对于单独一次调用，是否要在完成该调用之后清除掉回调函数 id 就由这个选项控制，如非特殊场景，建议传 NO。
4. `WX_EXPORT_METHOD_SYNC`
- >>> WeexSDK 0.10 版本后才支持，暴露的同步方法只能在 JS 线程执行，请不要做太多同步的工作导致JS执行阻塞。
+ > WeexSDK 0.10 版本后才支持，暴露的同步方法只能在 JS 线程执行，请不要做太多同步的工作导致JS执行阻塞。
使用 `WX_EXPORT_METHOD` 暴露到前端的方法都是异步方法(获得结果需要通过回调函数获得), 如果期望获得同步调用结果，可以使用`WX_EXPORT_METHOD_SYNC` 暴露module 方法。
@@ -68,16 +68,15 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
```
- (UIView *)loadView {
- return [MKMapView new];
+ return [MKMapView new];
}
```
-
- `viewDidLoad`
对组件 view 需要做一些配置，比如设置 delegate, 可以在 `viewDidLoad` 生命周期做，如果当前 view 没有添加 subview 的话，不要设置 view 的 frame，WeexSDK 会根据 style 设置。
```
- (void)viewDidLoad {
- ((MKMapView*)self.view).delegate = self;
+ ((MKMapView*)self.view).delegate = self;
}
```
- 注册 component
@@ -87,7 +86,7 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
```
在前端页面直接可以使用 `map` 标签，如下所示
-```
+```html
<template>
<div>
<map style="width:200px;height:200px"></map>
@@ -98,7 +97,8 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
- 支持自定义事件
给 map 组件支持 `mapLoaded` 事件
- ```
+
+ ```html
<template>
<div>
<map style="width:200px;height:200px" @mapLoaded="onMapLoaded"></map>
@@ -121,7 +121,7 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
覆盖 `addEvent` 和 `removeEvent` 方法
- ```
+ ```Objective-C
- (void)addEvent:(NSString *)eventName {
if ([eventName isEqualToString:@"mapLoaded"]) {
_mapLoaded = YES;
@@ -139,7 +139,7 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
在 MKMapView 加载完成的 delegate 方法中，发事件通知自定义事件
- ```
+ ```object-c
- (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView {
if (_mapLoaded) {
[self fireEvent:@"mapLoaded" params:@{@"customKey":@"customValue"} domChanges:nil]
@@ -151,9 +151,9 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
- 支持自定义属性
- 添加自定义属性 showTraffic
+ 添加自定义属性 `showTraffic`
- ```
+ ```html
<template>
<div>
<map style="width:200px;height:200px" showTraffic="true"></map>
@@ -164,7 +164,7 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
当前component 添加 `BOOL` 成员 showsTraffic，接受保存用户输入值，添加到当前组件上的所有属性都会在初始化方法中 `attributes` 中传过来，此处我们处理我们感兴趣的属性即可。
- ```
+ ```object-c
- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance {
if(self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
@@ -178,7 +178,7 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
- 在 `viewDidLoad` 中设置该属性
- ```
+ ```object-c
- (void)viewDidLoad {
((MKMapView*)self.view).showsTraffic = _showsTraffic;
}
@@ -186,7 +186,7 @@ Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你
- 支持属性更新
- ```
+ ```object-c
- (void)updateAttributes:(NSDictionary *)attributes
{
if (attributes[@"showsTraffic"]) {
@@ -224,7 +224,7 @@ WeexSDK 0.9.5 之后支持了在 js 中直接调用 component 的方法，自定
- 自定义一个 WXMyCompoenent 的组件
- ```
+ ```object-c
@implementation WXMyComponent
WX_EXPORT_METHOD(@selector(focus)) // 暴露该方法给js
- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
@@ -306,7 +306,7 @@ WeexSDK 0.9.5 之后支持了在 js 中直接调用 component 的方法，自定
handler 可以在 native 的 module 或者 component 实现中使用
- ```objective-c
+ ```object-c
id<WXImgLoaderProtocol> imageLoader = [WXSDKEngine handlerForProtocol:@protocol(WXImgLoaderProtocol)];
[iamgeLoader downloadImageWithURL:imageURl imageFrame:frame userInfo:customParam completed:^(UIImage *image, NSError *error, BOOL finished){
}];
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/7500fee4/source/cn/wiki/component-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/component-introduction.md b/source/cn/wiki/component-introduction.md
index a7e1d53..1ffd629 100644
--- a/source/cn/wiki/component-introduction.md
+++ b/source/cn/wiki/component-introduction.md
@@ -2,7 +2,7 @@
title: component
type: wiki
group: 概念
-order: 4.3
+order: 5.3
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/7500fee4/source/cn/wiki/handler-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/handler-introduction.md b/source/cn/wiki/handler-introduction.md
index 21de59e..a22c1e4 100644
--- a/source/cn/wiki/handler-introduction.md
+++ b/source/cn/wiki/handler-introduction.md
@@ -2,7 +2,7 @@
title: handler
type: wiki
group: 概念
-order: 4.3
+order: 5.2
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/7500fee4/source/cn/wiki/module-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/module-introduction.md b/source/cn/wiki/module-introduction.md
index b6bfc5d..a867d02 100644
--- a/source/cn/wiki/module-introduction.md
+++ b/source/cn/wiki/module-introduction.md
@@ -2,7 +2,7 @@
title: module
type: wiki
group: 概念
-order: 4.3
+order: 5.1
version: 2.1
---
## 什么是 module
@@ -10,7 +10,7 @@ version: 2.1
## module 注册过程
native 端注册moudle 的流程如下图:
- 
+ 
## 内置 module
`stream` module, 开发者可以利用它给服务端发送网络请求，接受数据返回，开发者可以在 Weex 的页面中执行如下代码：
[02/12] incubator-weex-site git commit: *[doc] update documentation
about custom component and module
Posted by ha...@apache.org.
*[doc] update documentation about custom component and module
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/926bef07
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/926bef07
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/926bef07
Branch: refs/heads/master
Commit: 926bef07d46bfd9dc95eded5fdb7120304c2aed2
Parents: cb0422b
Author: acton393 <zh...@gmail.com>
Authored: Tue Mar 13 21:18:10 2018 +0800
Committer: acton393 <zh...@gmail.com>
Committed: Tue Mar 13 21:18:10 2018 +0800
----------------------------------------------------------------------
source/cn/guide/extend-ios.md | 432 +++++++++++-----------
source/cn/guide/extend-js-framework.md | 2 +-
source/cn/guide/extend-module-using-swift.md | 115 ++++++
source/cn/wiki/component-introduction.md | 21 +-
source/cn/wiki/module-introduction.md | 3 +-
5 files changed, 346 insertions(+), 227 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/926bef07/source/cn/guide/extend-ios.md
----------------------------------------------------------------------
diff --git a/source/cn/guide/extend-ios.md b/source/cn/guide/extend-ios.md
index 3b9ba70..bfb1270 100644
--- a/source/cn/guide/extend-ios.md
+++ b/source/cn/guide/extend-ios.md
@@ -6,215 +6,198 @@ order: 6.3
version: 2.1
---
-## 注意
-
+>>> 注意
**Weex 所有暴露给 JS 的内置 module 或 component API 都是安全和可控的， 它们不会去访问系统的私有 API ，也不会去做任何 runtime 上的 hack 更不会去改变应用原有的功能定位。**
**如果需要扩展自定义的 module 或者 component ，一定注意不要将 OC 的 runtime 暴露给 JS ， 不要将一些诸如 `dlopen()`， `dlsym()`， `respondsToSelector:`，`performSelector:`，`method_exchangeImplementations()` 的动态和不可控的方法暴露给JS， 也不要将系统的私有API暴露给JS**
-## Module 扩展
+Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你需要一些特性但 Weex 并未提供，可以通过扩展自定义的一些插件来实现，通过 WeexSDK 加载。这些插件包括 [component](../wiki/component-introduction.html), [module](../wiki/module-introduction.html) 和 [handler](../wiki/handler-introduction.html)。
+>>> 本文都以 Objective-C 为例子书写，如果需要 swift 请参考
-[swift](https://github.com/weexteam/article/issues/55) 扩展 module
+## 自定义 module
-Weex SDK 只提供渲染，而不是其他的能力，如果你需要 像网络，图片，URL跳转这些特性，需要自己动手实现他们
-例如，如果你想实现一个url地址跳转函数，你可以按照如下步骤实现一个 Module
+自定义 module, 需要让自己的 class 遵循 `WXModuleProtocol` 这个protocol, 通过 `WX_EXPORT_METHOD` 这个宏暴露出需要透出到 `JavaScript` 调用的方法，注册 module , 就可以完成一个简单 module 的自定义。
-### **自定义module的步骤**
-1. 自定义的module类 必须实现 `WXModuleProtocol`
-2. 必须添加宏`WX_EXPORT_METHOD`, 它可以被weex识别，它的参数是 JavaScript调用 module指定方法的参数
-3. 添加`@synthesized weexInstance`，每个moudle对象被绑定到一个指定的实例上
-4. Module 方法会在UI线程中被调用，所以不要做太多耗时的任务在这里，如果要在其他线程执行整个module 方法，需要实现`WXModuleProtocol`中`- (NSThread *)targetExecuteThread`的方法，这样，分发到这个module的任务会在指定的线程中运行
-5. Weex 的参数可以是 String 或者Map
-6. Module 支持返回值给 JavaScript中的回调，回调的类型是`WXModuleCallback`,回调的参数可以是String或者Map
+- module 自定义初阶
- ```object-c
- @implementation WXEventModule
+ 下面完成一个 `module`, 该 `module` 暴露一个打印输入参数的方法
- @synthesize weexInstance;
- WX_EXPORT_METHOD(@selector(openURL:callback:))
+ 1. 新建一个 基类为 NSObject 的 class `WXCustomEventModule`, 让该类遵循 `WXModuleProtocol` 的协议
+ 
- - (void)openURL:(NSString *)url callback:(WXModuleCallback)callback
- {
- NSString *newURL = url;
- if ([url hasPrefix:@"//"]) {
- newURL = [NSString stringWithFormat:@"http:%@", url];
- } else if (![url hasPrefix:@"http"]) {
- newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;
- }
+ 2. 添加打印的方法，通过 `WX_EXPORT_METHOD` 暴露该方法
+ 
- UIViewController *controller = [[WXDemoViewController alloc] init];
- ((WXDemoViewController *)controller).url = [NSURL URLWithString:newURL];
+ 3. 在初始化完成 Weex SDK 之后注册该 module
+ 
- [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
- callback(@{@"result":@"success"});
- }
+ 到此，我们已经完成了一个简单的 module 方法的封装，javaScript 端的使用如下:
- @end
+ ```javaScript
+ weex.requireModule("event").showParams("hello Weex)
```
-#### 暴露同步方法<span class="api-version">v0.10+</span>
-
-如果你想要暴露同步的native方法给JS， 即JS可以直接拿到Native的返回值。 你可以使用`WX_EXPORT_METHOD_SYNC` 宏。
-
-native 代码:
-
-```objective-c
-@implementation WXEventModule
-
-WX_EXPORT_METHOD_SYNC(@selector(getString))
-
-- (NSString *)getString
-{
- return @"testString";
-}
-
-@end
-```
-
-js 代码:
-
-```javascript
-const eventModule = weex.requireModule('event')
-const returnString = syncTest.getString() // return "testString"
-```
-
-除了string, 你也可以返回 `number/array/dictionary` 类型.
-
-`注意:` 暴露的同步方法只能在 JS 线程执行，请不要做太多同步的工作导致JS执行阻塞。
-
-`注意:` Vue 2.0 还未支持这个特性，最早会在 0.12 版本支持
-
-
-
-### 注册 module
-
-通过调用 WXSDKEngine 中的 `registerModule:withClass`方法来注册自己的module
-
-```object-c
-WXSDKEngine.h
-/**
-* @abstract Registers a module for a given name
-* @param name The module name to register
-* @param clazz The module class to register
-**/
-+ (void)registerModule:(NSString *)name withClass:(Class)clazz;
-[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-```
-
-### 使用自己的 module
-
-这里的 require 里面的 event 就是在 上一步调用 `registerModule:` 注册 module 时候的 name
-
-```javascript
-var eventModule = weex.requireModule('event');
-eventModule.openURL('url',function(ret) {
- nativeLog(ret);
-});
+- module 高阶用法
+ 1. `weexInstance`
+ 在一个 Weex 页面中，默认 WXSDKInstance 的 Object 持有 多个 module 的 Object, 而 module 的 object 是没有对 WXSDKInstance 做持有的， 在自定义的module 中添加 `@synthesize weexInstance`, module Object 可以对 持有它本身的 WXSDKInstance Object 做一个 弱引用， 通过 weexInstance 可以拿到调用该 module 的页面的一些信息。
+ 2. `targetExecuteThread`
+ Module 方法默认会在UI线程中被调用，建议不要在这做太多耗时的任务，如果要在其他线程执行整个module 方法，需要实现`WXModuleProtocol`中`- (NSThread *)`的方法，这样，分发到这个module的任务会在指定的线程中运行
+
+ 3. `WXModuleKeepAliveCallback`
+ Module 支持返回值给 JavaScript中的回调，回调的类型是`WXModuleKeepAliveCallback`,回调的参数可以是String或者Map, 该 block 第一个参数为回调给 JavaScript 的数据，第二参数是一个 BOOL 值，表示该回调执行完成之后是否要被清除，JavaScript 每次调用都会产生一个回调，但是对于单独一次调用，是否要在完成该调用之后清除掉回调函数 id 就由这个选项控制，如非特殊场景，建议传 NO。
+ 4. `WX_EXPORT_METHOD_SYNC`
+ >>> WeexSDK 0.10 版本后才支持，暴露的同步方法只能在 JS 线程执行，请不要做太多同步的工作导致JS执行阻塞。
+
+ 使用 `WX_EXPORT_METHOD` 暴露到前端的方法都是异步方法(获得结果需要通过回调函数获得), 如果期望获得同步调用结果，可以使用`WX_EXPORT_METHOD_SYNC` 暴露module 方法。
+
+## Component 扩展
+
+可能 WeexSDK 内置提供的组件并不能满足你的开发需求，比如需要期望使用地图这样一个复杂的组件，可以通过自定义一个组件，注册到 WeexSDK engine 中， 可以很方便的使用起来。
+
+### component 基础生命周期
+
+- 新建一个基类为 `WXComponent` 的 class
+ 如果此时我们什么都不做，将改组件注册进 WeexSDK engine，它的功能就跟内置的 `div` 组件功能是一致的。
+
+- 覆盖 `WXComponent` 中的生命周期方法
+
+ - `loadView`
+ 一个 component 默认对应于一个 view ， 如果未覆盖 `loadView` 提供自定义 `view`, 会使用 `WXComponent` 基类中的 `WXView`, `WXView` 是继承自 UIView 的一个派生 view。
+ 要实现地图功能，我们需要对应的地图 view, 比如系统的 `MKMapView`
+
+ ```
+ - (UIView *)loadView {
+ return [MKMapView new];
+ }
+ ```
+
+ - `viewDidLoad`
+ 对组件 view 需要做一些配置，比如设置 delegate, 可以在 `viewDidLoad` 生命周期做，如果当前 view 没有添加 subview 的话，不要设置 view 的 frame，WeexSDK 会根据 style 设置。
+
+ ```
+ - (void)viewDidLoad {
+ ((MKMapView*)self.view).delegate = self;
+ }
+ ```
+- 注册 component
+
+ ```
+ [WXSDKEngine registerComponent:@"map" withClass:[WXMapComponent class]];
+ ```
+ 在前端页面直接可以使用 `map` 标签，如下所示
+
```
-
-Weex SDK 没有 图片下载，navigation 操作的能力，请大家自己实现这些 protocol
-
-## WXImgLoaderProtocol
-
-weexSDK 没有图片下载的能力，需要实现 WXImgLoaderProtocol, 参考下面的例子
-
-```object-c
-WXImageLoaderProtocol.h
-@protocol WXImgLoaderProtocol <WXModuleProtocol>
-/**
-* @abstract Creates a image download handler with a given URL
-* @param imageUrl The URL of the image to download
-* @param imageFrame The frame of the image you want to set
-* @param options : The options to be used for this download
-* @param completedBlock : A block called once the download is completed.
- image : the image which has been download to local.
- error : the error which has happened in download.
- finished : a Boolean value indicating whether download action has finished.
-*/
--(id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;
-@end
+ <template>
+ <div>
+ <map style="width:200px;height:200px"></map>
+ </div>
+ </template>
```
-实现上述协议
-
-```object-c
-@implementation WXImgLoaderDefaultImpl
-#pragma mark -
-#pragma mark WXImgLoaderProtocol
+- 支持自定义事件
-- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
-{
- if ([url hasPrefix:@"//"]) {
- url = [@"http:" stringByAppendingString:url];
- }
- return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
- } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
- if (completedBlock) {
- completedBlock(image, error, finished);
+ 给 map 组件支持 `mapLoaded` 事件
+ ```
+ <template>
+ <div>
+ <map style="width:200px;height:200px" @mapLoaded="onMapLoaded"></map>
+ </div>
+ </template>
+
+ <script>
+ export default {
+ methods: {
+ onMapLoaded:function(e) {
+ console.log("map loaded"+JSON.stringify(e))
+ }
+ }
}
- }];
-}
-@end
-```
-
-### handler注册
-
-你可以通过WXSDKEngine 中的 `registerHandler:withProtocol`注册handler
-
-```object-c
-WXSDKEngine.h
-/**
-* @abstract Registers a handler for a given handler instance and specific protocol
-* @param handler The handler instance to register
-* @param protocol The protocol to confirm
-*/
-+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
-
-[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]
-```
+ </script>
+ ```
+ 给当前组件添加 `BOOL` 成员 mapLoaded,记录当前事件是否被添加
+
+ - 覆盖组件生命周期方法添加和移除事件
+
+ 覆盖 `addEvent` 和 `removeEvent` 方法
-## Components 扩展
+ ```
+ - (void)addEvent:(NSString *)eventName {
+ if ([eventName isEqualToString:@"mapLoaded"]) {
+ _mapLoaded = YES;
+ }
+ }
-虽然 WeexSDK 中有很多的 native 的 Component，但这有可能并不能满足你的需求。在之前你可能已经写了一些很酷炫 native 的组件，想包装一下，导入到 Weex 中，因此我们提供了让开发者实现自己的 native Component。下面将以 WeexSDK 中已经存在的 Component：`image` 为例子，介绍一下如何构建一个 native Component。假设你已经了解 iOS 开发
+ - (void)removeEvent:(NSString *)eventName
+ {
+ if ([eventName isEqualToString:@"mapLoaded"]) {
+ _mapLoaded = NO;
+ }
+ }
+ ```
+ - 在适宜的时间发事件通知
-### 注册 Component
+ 在 MKMapView 加载完成的 delegate 方法中，发事件通知自定义事件
-注册一个 component 比较简单，调用 `WXSDKEngine` 中的 `registerComponent:withClass:` 方法，传入组件的标签名称，还有对应的 class 然后你可以创建一个 `WXImageComponent` 表示 `image` 组件的实现。在 `.we` 文件中，只需要写 `<image></image>`
+ ```
+ - (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView {
+ if (_mapLoaded) {
+ [self fireEvent:@"mapLoaded" params:@{@"customKey":@"customValue"} domChanges:nil]
+ }
+ }
+ ```
-### 添加属性
-现在我们要做一些让 image component 更加强大的事情。既然作为一个图片的 component，那它应该要有源，给他加上一个 `src` 的属性，同时给它加上一个 `resize` 的属性（可以配置的有 `contain/cover/stretch`）
-```object-c
-@interface WXImageComponent ()
+- 支持自定义属性
-@property (nonatomic, strong) NSString *imageSrc;
-@property (nonatomic, assign) UIViewContentMode resizeMode;
+ 添加自定义属性 showTraffic
-@end
-```
+ ```
+ <template>
+ <div>
+ <map style="width:200px;height:200px" showTraffic="true"></map>
+ </div>
+ </template>
+ ```
+ - 覆盖组件初始化方法 `initWithRef...`
-component 中所有的 style，attribute，events 都会被传递到 Component 的初始化方法中，所以，你可以在初始化方法中存储你感兴趣的一些属性值
+ 当前component 添加 `BOOL` 成员 showsTraffic，接受保存用户输入值，添加到当前组件上的所有属性都会在初始化方法中 `attributes` 中传过来，此处我们处理我们感兴趣的属性即可。
-```object-c
-@implementation WXImageComponent
+ ```
+ - (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance {
+ if(self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
+
+ if (attributes[@"showsTraffic"]) {
+ _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
+ }
+ }
+ return self;
+ }
+ ```
-- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
-{
- if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
- _imageSrc = [WXConvert NSString:attributes[@"src"]];
- _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
-}
+ - 在 `viewDidLoad` 中设置该属性
+
+ ```
+ - (void)viewDidLoad {
+ ((MKMapView*)self.view).showsTraffic = _showsTraffic;
+ }
+ ```
- return self;
-}
+ - 支持属性更新
+
+ ```
+ - (void)updateAttributes:(NSDictionary *)attributes
+ {
+ if (attributes[@"showsTraffic"]) {
+ _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
+ ((MKMapView*)self.view).showsTraffic = _showsTraffic;
+ }
+ }
-@end
-```
+ ```
-attribute 中拿到的值的类型都是 `id`，我们可以用转换方法把它转换到任何值。Weex SDK 提供了一些基础的转换方法，可以参考 `WXConvert` 类，或者你可以添加自己的转换函数。
-### Hooking 渲染生命周期
+### 更多 component 生命周期
native 的 component 是由 Weex 管理的，Weex 创建，布局，渲染，销毁。Weex 的 component 生命周期都是可以 hook 的，你可以在这些生命周期中去做自己的事情。
@@ -232,59 +215,11 @@ native 的 component 是由 Weex 管理的，Weex 创建，布局，渲染，销
| addEvent: | 给component添加event的时候调用. |
| removeEvent: | 在event移除的时候调用. |
-在 image component 的例子里面，如果我们需要我们自己的 image view 的话，可以复写 `loadView`这个方法.
-
-```object-c
-- (UIView *)loadView
-{
-return [[WXImageView alloc] init];
-}
-```
-
-现在我们使用 `WXImageView` 渲染 `image` component。
-作为一个 image component，我们需要拿到服务器图片，而且把它设置进 image view 里. 这个操作可以在 `viewDidLoad` 方法中做，这个方法是在 view 已经被创建而且加载了时候 Weex SDK 会调用到，而且 `viewDidLoad` 这个方法是你做额外初始化工作比如改变 content mode(也就是设置resize) 的最好时间.
-
-```object-c
-- (void)viewDidLoad
-{
- UIImageView *imageView = (UIImageView *)self.view;
- imageView.contentMode = _resizeMode;
- imageView.userInteractionEnabled = YES;
- imageView.clipsToBounds = YES;
- imageView.exclusiveTouch = YES;
-
- // Do your image fetching and updating logic
-}
-```
-
-如果可以改变 image 的 src，也可以 hook `updateAttributes:` 方法来做属性更新操作，当 `updateAttributes:` 或者 `updateStyles:` 被调用的时候， component 的 view 已经加载完成
-
-```object-c
-- (void)updateAttributes:(NSDictionary *)attributes
-{
- if (attributes[@"src"]) {
- _imageSrc = [WXConvert NSString:attributes[@"src"]];
- // Do your image updating logic
- }
-
- if (attributes[@"resize"]) {
- _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
- self.view.contentMode = _resizeMode;
- }
-}
-```
-
或许你需要考虑更多的生命周期方法去 Hook，当布局完成时候，像 `layoutDidFinish`，如果你想了解更多，可以参考一下`WXComponent.h` 声明的方法。
-现在你可以用在任何 `.we` 文件里面使用 `<image>`，而且可以加上 image 的属性。
-
-```html
-<image style="your-custom-style" src="image-remote-source" resize="contain/cover/stretch"></image>
-```
-
-##### component 方法
+### component 方法
-WeexSDK 0.9.5 之后支持了在 js 中直接调用 component 的方法，这里提供一个例子
+WeexSDK 0.9.5 之后支持了在 js 中直接调用 component 的方法，自定义完组件后，下面的例子可以指引你完成 component 方法。
- 自定义一个 WXMyCompoenent 的组件
@@ -324,3 +259,54 @@ WeexSDK 0.9.5 之后支持了在 js 中直接调用 component 的方法，这里
}
</script>
```
+
+## 自定义 handler
+
+ weexSDK 目前没有提供图片下载的能力，在`WXImgLoaderProtocol` 定义了一些获取图片的接口, image 组件正是通过 `WXImgLoaderProtocol` 获得并展示图片，开发者可以实现该 protocol 中的接口方法，这样 `image` 标签才能正常展示图片。
+
+ 开发者也可以定义自己的 `protocol` 和对应的实现来使用 `handler` 机制
+
+- 新建基类为 NSObject 的 class 实现 `WXImgLoaderProtocol` 协议， 实现 `WXImgLoaderProtocol` 的方法
+
+ ```object-c
+ @implementation WXImgLoaderDefaultImpl
+ - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
+ {
+ if ([url hasPrefix:@"//"]) {
+ url = [@"http:" stringByAppendingString:url];
+ }
+ return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
+ } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
+ if (completedBlock) {
+ completedBlock(image, error, finished);
+ }
+ }];
+ }
+ @end
+ ```
+
+- 注册 handler
+
+ 你可以通过WXSDKEngine 中的 `registerHandler:withProtocol` 注册handler
+
+ ```object-c
+ WXSDKEngine.h
+ /**
+ * @abstract Registers a handler for a given handler instance and specific protocol
+ * @param handler The handler instance to register
+ * @param protocol The protocol to confirm
+ */
+ + (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
+
+ [WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]
+
+ ```
+- 使用 handler
+
+ handler 可以在 native 的 module 或者 component 实现中使用
+
+ ```objective-c
+ id<WXImgLoaderProtocol> imageLoader = [WXSDKEngine handlerForProtocol:@protocol(WXImgLoaderProtocol)];
+ [iamgeLoader downloadImageWithURL:imageURl imageFrame:frame userInfo:customParam completed:^(UIImage *image, NSError *error, BOOL finished){
+ }];
+ ```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/926bef07/source/cn/guide/extend-js-framework.md
----------------------------------------------------------------------
diff --git a/source/cn/guide/extend-js-framework.md b/source/cn/guide/extend-js-framework.md
index 1e9db01..fbdb86e 100644
--- a/source/cn/guide/extend-js-framework.md
+++ b/source/cn/guide/extend-js-framework.md
@@ -2,7 +2,7 @@
title: 拓展 JS framework
type: guide
group: 扩展
-order: 6.4
+order: 6.5
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/926bef07/source/cn/guide/extend-module-using-swift.md
----------------------------------------------------------------------
diff --git a/source/cn/guide/extend-module-using-swift.md b/source/cn/guide/extend-module-using-swift.md
new file mode 100644
index 0000000..3098284
--- /dev/null
+++ b/source/cn/guide/extend-module-using-swift.md
@@ -0,0 +1,115 @@
+---
+title: iOS 扩展
+type: guide
+group: 扩展
+order: 6.4
+version: 2.1
+---
+
+## Swift In Weex
+
+[Swift和Objective-C](https://developer.apple.com/library/ios/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html#//apple_ref/doc/uid/TP40014216-CH10-ID122) 混编
+
+参考完整 [例子](https://github.com/acton393/WeexSwiftSample.git)
+
+### 使用 Swift 进行 module 扩展
+
+因为 module 暴露 method 是通过`Objective-C`宏来做的，调用的时候是通过反射，所以Swift扩展 module 通过`extension` `Objective-C`的类。
+- 新建 `WXSwiftTestModule.h/m` 和 `WXSwiftTestModule.swift`文件， 在新建Swift文件的时候会提示
+ 
+ 选择 `Create Bridging Header`, 因为我们要在 Swift 中访问 `Objective-C` 的一些类，正是通过这个 header暴露 OC 的类给 Swift,header 格式为 `yourTarget-Bridging-Header.h`，我这里创建完header文件名称为：`WeexDemo-Bridging-Header.h`
+- `WXSwiftTestModule.h/m`中实现
+ - WXSwiftTestModule.h 中
+
+ ```
+ #import <Foundation/Foundation.h>
+ #import <WeexSDK/WeexSDK.h>
+
+ @interface WXSwiftTestModule : NSObject <WXModuleProtocol>
+
+ @end
+
+ ```
+ - WXSwiftTestModule.m 中
+
+ WeexDemo-Swift.h 这个文件需要编译一下才可以搜索到，具体的路径
+
+ ```
+ weex/ios/playground/DerivedData/WeexDemo/Build/Intermediates/WeexDemo.build/Debug-iphonesimulator/WeexDemo.build/DerivedSources/WeexDemo-Swift.h
+ ```
+
+ 路径具体需要根据自己工程而定
+
+ ```
+ #import "WXSwiftTestModule.h"
+ #import "WeexDemo-Swift.h" // Swift类和方法 被 `Objective-C` 识别需要导入
+
+ @implementation WXSwiftTestModule
+ #pragma clang diagnostic push //关闭unknow selector的warrning
+ #pragma clang diagnostic ignored "-Wundeclared-selector"
+
+ WX_EXPORT_METHOD(@selector(printSome:callback:)) //Swift 中定义的方法，XCode 转换成的最终的方法名称，在`WeexDemo-Swift.h`里面查看
+
+ #pragma clang diagnostic pop
+
+ @end
+
+ ```
+- Swift 中实现
+ 扩展 OC 的类 `WXSwiftTestModule`,增加了一个方法，这个方法就是我们要暴露出来，在 js 中可以调到的
+ - WXSwiftTestModule.swift
+
+ ```
+ import Foundation
+ public extension WXSwiftTestModule {
+ public func printSome(someThing:String, callback:WXModuleCallback) {
+ print(someThing)
+ callback(someThing)
+ }
+ }
+ ```
+
+ `WXSwiftTestModule` 和`WXModuleCallback` 因为是 OC 的，需要在 `WeexDemo-Bridging-Header` 中暴露
+ - WeexDemo-Bridging-Header.h中
+
+ ```
+ //
+ // Use this file to import your target's public headers that you would like to expose to Swift.
+ //
+ #import "WXSwiftTestModule.h"
+ #import "WeexSDK.h"
+ ```
+
+ 至此这个使用 Swift 开发的简单的 module 已经完成
+
+ ### module 使用
+ - 注册 module
+
+ ```
+ [WXSDKEngine registerModule:@"swifter" withClass:[WXSwiftTestModule class]];
+
+ ```
+ - we 文件中使用
+
+ ```
+ <template>
+ <text>Swift Module</text>
+ </template>
+
+ <script>
+ require('weex-components');
+
+ module.exports = {
+ data: {
+
+ },
+ ready: function() {
+ var swifter = require('@weex-module/swifter');
+ swifter.printSome("https://www.taobao.com",function(param){
+ nativeLog(param);
+ });
+ }
+
+ };
+ </script>
+ ```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/926bef07/source/cn/wiki/component-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/component-introduction.md b/source/cn/wiki/component-introduction.md
index 33c6f32..a7e1d53 100644
--- a/source/cn/wiki/component-introduction.md
+++ b/source/cn/wiki/component-introduction.md
@@ -7,5 +7,22 @@ version: 2.1
---
### 什么是 component
- 简单来讲，`component` 就类似 `Weex` 渲染引擎上的 `Widget`, 符合一定的规则的 `Widget`, 可以被 Weex engine 在初始化的时候正确的加载，开发者在 `DSL` 书写对应的标签名字(在注册的时提供的注册名字)， 比如内置的一些组件 `div`，`image` 和 `text`。它可以读取特定的属性，展示用户数据，承载和触发事件。
-
\ No newline at end of file
+ 简单来讲，`component` 就类似 `Weex` 渲染引擎上的 `Widget`, 符合一定的规则的 `Widget`, 可以被 Weex engine 在初始化的时候正确的加载，开发者在 `DSL` 书写对应的标签名字(在注册的时提供的注册名字)， 比如内置的一些组件 `div`，`image` 和 `text`。它可以读取特定的属性，展示用户数据，承载和触发事件，如果 Weex 内置的组件不能满足你的开发需求，可以自定义你自己的 component。
+
+
+### component 方法
+
+ component 方法是组件支持的方法，JavaScript 可以直接对对应标签声明 `ref` 属性之后，直接可以调用对应方法的一个特性，例如下面例子。
+
+ ```html
+ <template>
+ <mycomponent ref='mycomponent'></mycomponent>
+ </template>
+ <script>
+ module.exports = {
+ created:function() {
+ this.$refs.mycomponent.focus();
+ }
+ }
+ </script>
+ ```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/926bef07/source/cn/wiki/module-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/module-introduction.md b/source/cn/wiki/module-introduction.md
index d3f6507..b6bfc5d 100644
--- a/source/cn/wiki/module-introduction.md
+++ b/source/cn/wiki/module-introduction.md
@@ -28,4 +28,5 @@ version: 2.1
```
查看 [stream](../references/modules/stream.html) 完整文档
-## module 和 [handler](./handler-introduction.html) 区别
\ No newline at end of file
+## module 方法
+ require 之后直接可以调用，相对于 [component 方法](./component-introduction.html) 可以不依赖特定的组件实例。
\ No newline at end of file
[08/12] incubator-weex-site git commit: Fix more 404 url
Posted by ha...@apache.org.
Fix more 404 url
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/0dee5e55
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/0dee5e55
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/0dee5e55
Branch: refs/heads/master
Commit: 0dee5e5577794160ddf6ba0af075bc383c45cbfe
Parents: 15a0788
Author: Zhenfei You <he...@imyzf.com>
Authored: Fri Mar 23 11:21:42 2018 +0800
Committer: Zhenfei You <he...@imyzf.com>
Committed: Fri Mar 23 11:21:42 2018 +0800
----------------------------------------------------------------------
source/cn/guide/use-vue.md | 2 +-
source/cn/references/modules/storage.md | 1 -
source/cn/wiki/faq.md | 2 +-
source/guide/use-vue.md | 2 +-
source/wiki/faq.md | 2 +-
5 files changed, 4 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/0dee5e55/source/cn/guide/use-vue.md
----------------------------------------------------------------------
diff --git a/source/cn/guide/use-vue.md b/source/cn/guide/use-vue.md
index c828f90..d431876 100644
--- a/source/cn/guide/use-vue.md
+++ b/source/cn/guide/use-vue.md
@@ -82,7 +82,7 @@ Vue 中的[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components
### 使用weex-loader
-[weex-loader](https://github.com/weexteam/weex-loader) 是一个 webpack 的 [loader](http://webpack.github.io/docs/using-loaders.html)，它能把`*.vue`文件转化为简单的javascript 模块用于安卓以及 iOS 平台。所有的特性和配置都是跟 [vue-loader](https://vue-loader.vuejs.org/en/) 一样的。
+[weex-loader](https://github.com/weexteam/weex-loader) 是一个 webpack 的 [loader](https://webpack.js.org/concepts/loaders/#using-loaders)，它能把`*.vue`文件转化为简单的javascript 模块用于安卓以及 iOS 平台。所有的特性和配置都是跟 [vue-loader](https://vue-loader.vuejs.org/en/) 一样的。
需要注意的是，如果您的Webpack配置的*entry*选项是一个`*.vue`文件的话，你仍需要传递一个额外的`entry`参数。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/0dee5e55/source/cn/references/modules/storage.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/storage.md b/source/cn/references/modules/storage.md
index 181ec3a..855f081 100644
--- a/source/cn/references/modules/storage.md
+++ b/source/cn/references/modules/storage.md
@@ -182,4 +182,3 @@ version: 2.1
## 其它参考
* [W3school: html5 localStorage](http://www.w3school.com.cn/html5/html_5_webstorage.asp)
-* [storage 模块完整的 Demo](https://github.com/apache/incubator-weex/blob/dev/examples/module/storage-demo.we)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/0dee5e55/source/cn/wiki/faq.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/faq.md b/source/cn/wiki/faq.md
index 4ac33e8..250b9b4 100644
--- a/source/cn/wiki/faq.md
+++ b/source/cn/wiki/faq.md
@@ -19,7 +19,7 @@ version: 2.1
## Windows 指令错误
-请先安装 [Git for Windows](https://git-scm.com/download/win)，在 [For Windows](https://github.com/apache/incubator-weex/tree/dev#for-windows) 中查看更多信息。
+请先安装 [Git for Windows](https://git-scm.com/download/win)，在 [For Windows](https://github.com/apache/incubator-weex/tree/master#for-windows) 中查看更多信息。
## Android Studio 中 Gradle 错误
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/0dee5e55/source/guide/use-vue.md
----------------------------------------------------------------------
diff --git a/source/guide/use-vue.md b/source/guide/use-vue.md
index 91767bd..dbe241c 100644
--- a/source/guide/use-vue.md
+++ b/source/guide/use-vue.md
@@ -85,7 +85,7 @@ Use different bundles for different platforms is to make good use of the platfor
### Use weex-loader
-[weex-loader](https://github.com/weexteam/weex-loader) is a [loader](http://webpack.github.io/docs/using-loaders.html) for webpack that can transform `*.vue` file into a plain javascript module for Android and iOS platform. All features and configurations of it are same with [vue-loader](https://vue-loader.vuejs.org/en/).
+[weex-loader](https://github.com/weexteam/weex-loader) is a [loader](https://webpack.js.org/concepts/loaders/#using-loaders) for webpack that can transform `*.vue` file into a plain javascript module for Android and iOS platform. All features and configurations of it are same with [vue-loader](https://vue-loader.vuejs.org/en/).
One thing should be noted that if the *entry* option of your Webpack config is a `*.vue` file, you also need to pass an additional `entry` parameter.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/0dee5e55/source/wiki/faq.md
----------------------------------------------------------------------
diff --git a/source/wiki/faq.md b/source/wiki/faq.md
index 1f32787..bf37747 100644
--- a/source/wiki/faq.md
+++ b/source/wiki/faq.md
@@ -17,7 +17,7 @@ version: 2.1
## Command errors in MS Windows
-Please install [Git for Windows](https://git-scm.com/download/win) first, see [For Windows](https://github.com/apache/incubator-weex/tree/dev#for-windows) for more information.
+Please install [Git for Windows](https://git-scm.com/download/win) first, see [For Windows](https://github.com/apache/incubator-weex/tree/master#for-windows) for more information.
## Gradle errors in Android Studio
[04/12] incubator-weex-site git commit: *[doc] update doc format
Posted by ha...@apache.org.
*[doc] update doc format
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/7f0c8789
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/7f0c8789
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/7f0c8789
Branch: refs/heads/master
Commit: 7f0c878905930ca37cecf9d6078b8c022a7fc801
Parents: a72a8f5
Author: acton393 <zh...@gmail.com>
Authored: Fri Mar 16 18:38:27 2018 +0800
Committer: acton393 <zh...@gmail.com>
Committed: Fri Mar 16 18:38:27 2018 +0800
----------------------------------------------------------------------
source/references/modules/globalevent.md | 2 +-
source/wiki/gestures.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/7f0c8789/source/references/modules/globalevent.md
----------------------------------------------------------------------
diff --git a/source/references/modules/globalevent.md b/source/references/modules/globalevent.md
index 0253e65..7237a6a 100644
--- a/source/references/modules/globalevent.md
+++ b/source/references/modules/globalevent.md
@@ -105,5 +105,5 @@ globalEvent.addEventListener("WXApplicationDidBecomeActiveEvent", function (e) {
[have a try at DotWe](http://dotwe.org/vue/5a774e8ce3766c88038cab6fe3331f5b)
->>> this feature only works on iOS and Android platforms, it doesn't work on Web. [Obtain your weex platform on weex page](../weex-variable.html#weex-environment-object)
+> this feature only works on iOS and Android platforms, it doesn't work on Web. [Obtain your weex platform on weex page](../weex-variable.html#weex-environment-object)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/7f0c8789/source/wiki/gestures.md
----------------------------------------------------------------------
diff --git a/source/wiki/gestures.md b/source/wiki/gestures.md
index 6a4574e..92f700f 100644
--- a/source/wiki/gestures.md
+++ b/source/wiki/gestures.md
@@ -53,7 +53,7 @@ The following properties can be used in gesture callback:
* `screenX`. The X coordinate of the touch point relative to the left edge of the screen.
* `screenY`. The Y coordinate of the touch point relative to the top edge of the screen.
* `force`. A float value that represents the amount of pressure the user is applying to the touch surface. This is a value between 0.0 (no pressure) and 1.0 (the maximum amount of pressure the hardware can recognize).
->>> iOS only and force is included in iPhone 6S and later models
+> iOS only and force is included in iPhone 6S and later models
[have a try](http://dotwe.org/vue/91b6929f4f9f97a099a30c516dc2db06)
[12/12] incubator-weex-site git commit: Fix more 404 url (#120)
Posted by ha...@apache.org.
Fix more 404 url (#120)
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/38839e78
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/38839e78
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/38839e78
Branch: refs/heads/master
Commit: 38839e787e60d749487b50d50dd23f790880fa74
Parents: ef52e78 0dee5e5
Author: Hanks <zh...@gmail.com>
Authored: Fri Mar 23 17:43:46 2018 +0800
Committer: Hanks <zh...@gmail.com>
Committed: Fri Mar 23 17:43:46 2018 +0800
----------------------------------------------------------------------
source/cn/guide/use-vue.md | 2 +-
source/cn/references/modules/storage.md | 1 -
source/cn/wiki/faq.md | 2 +-
source/guide/use-vue.md | 2 +-
source/wiki/faq.md | 2 +-
5 files changed, 4 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
[10/12] incubator-weex-site git commit: [doc] update document format
Posted by ha...@apache.org.
[doc] update document format
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/c96919f2
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/c96919f2
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/c96919f2
Branch: refs/heads/master
Commit: c96919f2b9e1f49df417622701bfcb37de1683bc
Parents: 8581b68
Author: acton393 <zh...@gmail.com>
Authored: Fri Mar 23 17:39:01 2018 +0800
Committer: acton393 <zh...@gmail.com>
Committed: Fri Mar 23 17:39:01 2018 +0800
----------------------------------------------------------------------
source/cn/wiki/component-introduction.md | 1 +
source/wiki/component-introduction.md | 1 +
2 files changed, 2 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/c96919f2/source/cn/wiki/component-introduction.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/component-introduction.md b/source/cn/wiki/component-introduction.md
index 7c2b36d..a0a1343 100644
--- a/source/cn/wiki/component-introduction.md
+++ b/source/cn/wiki/component-introduction.md
@@ -7,6 +7,7 @@ version: 2.1
---
### 什么是 component
+
简单来讲，`component` 就类似 `Weex` 渲染引擎上的 `Widget`, 符合一定的规则的 `Widget`, 可以被 Weex engine 在初始化的时候正确的加载，开发者在 `DSL` 书写对应的标签名字(在注册的时提供的注册名字)， 比如内置的一些组件 `div`，`image` 和 `text`。它可以读取特定的属性，展示用户数据，承载和触发事件，如果 Weex 内置的组件不能满足你的开发需求，可以自定义你自己的 component。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/c96919f2/source/wiki/component-introduction.md
----------------------------------------------------------------------
diff --git a/source/wiki/component-introduction.md b/source/wiki/component-introduction.md
index ffa4567..01cee5f 100644
--- a/source/wiki/component-introduction.md
+++ b/source/wiki/component-introduction.md
@@ -7,6 +7,7 @@ version: 2.1
---
### what's component
+
Generally，`component` is a entity `Widget` in Weex engine, and it can be loaded if confirm to some details rules whlile the Weex engine init. It can display some detail contents, receive touch or other custom events, custom attributes. There are some internal components registered such as `div`, `image` and `text`, you can custom your own component if these can not meet your needs.
[11/12] incubator-weex-site git commit: refactor document for module
component handler extend && add how to extend using swift (#107)
Posted by ha...@apache.org.
refactor document for module component handler extend && add how to extend using swift (#107)
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/ef52e78b
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/ef52e78b
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/ef52e78b
Branch: refs/heads/master
Commit: ef52e78b6d635064973db72298bc8494e7c0d143
Parents: da4a81e c96919f
Author: Hanks <zh...@gmail.com>
Authored: Fri Mar 23 17:42:57 2018 +0800
Committer: Hanks <zh...@gmail.com>
Committed: Fri Mar 23 17:42:57 2018 +0800
----------------------------------------------------------------------
source/cn/guide/extend-ios.md | 431 ++++++++++----------
source/cn/guide/extend-js-framework.md | 2 +-
source/cn/guide/extend-module-using-swift.md | 110 +++++
source/cn/references/modules/globalevent.md | 2 +-
source/cn/wiki/component-introduction.md | 29 ++
source/cn/wiki/gestures.md | 2 +-
source/cn/wiki/handler-introduction.md | 51 +++
source/cn/wiki/module-introduction.md | 32 ++
source/guide/extend-ios.md | 464 ++++++++++------------
source/guide/extend-module-using-swift.md | 114 ++++++
source/references/modules/globalevent.md | 2 +-
source/wiki/component-introduction.md | 29 ++
source/wiki/gestures.md | 2 +-
source/wiki/handler-introduction.md | 55 +++
source/wiki/module-introduction.md | 34 ++
15 files changed, 885 insertions(+), 474 deletions(-)
----------------------------------------------------------------------
[03/12] incubator-weex-site git commit: Merge branch 'master' of
github.com:apache/incubator-weex-site
Posted by ha...@apache.org.
Merge branch 'master' of github.com:apache/incubator-weex-site
# Conflicts:
# source/cn/guide/extend-ios.md
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/a72a8f56
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/a72a8f56
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/a72a8f56
Branch: refs/heads/master
Commit: a72a8f56bc0e204c92d3f3ac4ae51532d5598501
Parents: 926bef0 11bf495
Author: acton393 <zh...@gmail.com>
Authored: Fri Mar 16 18:31:43 2018 +0800
Committer: acton393 <zh...@gmail.com>
Committed: Fri Mar 16 18:31:43 2018 +0800
----------------------------------------------------------------------
source/_data/users.yml | 5 +++
source/cn/development-process.md | 4 +-
source/cn/guide/advanced/app-architecture.md | 2 +-
source/cn/guide/advanced/downgrade.md | 2 +-
source/cn/guide/advanced/page-architecture.md | 4 +-
source/cn/guide/advanced/path.md | 2 +-
.../guide/advanced/use-vuex-and-vue-router.md | 2 +-
source/cn/guide/extend-android.md | 4 +-
source/cn/guide/extend-ios.md | 9 +++--
source/cn/guide/extend-js-framework.md | 4 +-
source/cn/guide/extend-module-using-swift.md | 2 +-
source/cn/guide/extend-web-render.md | 4 +-
source/cn/guide/integrate-devtool-to-android.md | 2 +-
source/cn/guide/integrate-devtool-to-ios.md | 2 +-
source/cn/guide/integrate-to-your-app.md | 42 ++++++++++----------
source/cn/guide/set-up-env.md | 2 +-
source/cn/guide/use-vue.md | 9 +++--
source/cn/references/components/waterfall.md | 2 +-
source/cn/references/index.md | 17 ++++----
source/cn/resources.md | 41 +++++++++++++++++++
source/cn/wiki/color-names.md | 4 +-
source/cn/wiki/common-events.md | 2 +-
source/cn/wiki/common-styles.md | 2 +-
source/cn/wiki/css-units.md | 2 +-
source/cn/wiki/design-principles.md | 2 +
source/cn/wiki/event-bubble.md | 4 +-
source/cn/wiki/faq.md | 3 +-
source/cn/wiki/gestures.md | 2 +-
source/cn/wiki/index.md | 2 +-
source/cn/wiki/text-styles.md | 2 +-
source/development-process.md | 4 +-
source/guide/advanced/app-architecture.md | 2 +-
source/guide/advanced/downgrade.md | 2 +-
source/guide/advanced/page-architecture.md | 2 +-
source/guide/advanced/path.md | 2 +-
.../guide/advanced/use-vuex-and-vue-router.md | 2 +-
source/guide/create-a-plugin.md | 2 +
source/guide/extend-android.md | 24 ++++++-----
source/guide/extend-ios.md | 8 ++--
source/guide/extend-js-framework.md | 2 +
source/guide/extend-web-render.md | 2 +
source/guide/index.md | 2 +-
source/guide/integrate-devtool-to-android.md | 2 +
source/guide/integrate-devtool-to-ios.md | 2 +
source/guide/integrate-to-your-app.md | 34 ++++++++--------
source/guide/set-up-env.md | 8 ++--
source/guide/use-vue.md | 2 +-
source/references/components/input.md | 2 +-
source/references/components/waterfall.md | 2 +-
source/references/index.md | 16 ++++----
source/resources.md | 4 +-
source/wiki/color-names.md | 2 +-
source/wiki/common-events.md | 2 +-
source/wiki/common-styles.md | 4 +-
source/wiki/css-units.md | 2 +-
source/wiki/design-principles.md | 2 +
source/wiki/event-bubble.md | 2 +
source/wiki/faq.md | 2 +-
source/wiki/gestures.md | 2 +-
source/wiki/index.md | 2 +-
source/wiki/text-styles.md | 2 +
themes/weex/source/css/partial/article.scss | 7 ++++
62 files changed, 210 insertions(+), 131 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a72a8f56/source/cn/guide/extend-ios.md
----------------------------------------------------------------------
diff --cc source/cn/guide/extend-ios.md
index bfb1270,992336a..a570f0e
--- a/source/cn/guide/extend-ios.md
+++ b/source/cn/guide/extend-ios.md
@@@ -6,198 -6,215 +6,199 @@@ order: 6.
version: 2.1
---
- >>> 注意
- **Weex 所有暴露给 JS 的内置 module 或 component API 都是安全和可控的， 它们不会去访问系统的私有 API ，也不会去做任何 runtime 上的 hack 更不会去改变应用原有的功能定位。**
+ <!-- toc -->
- **如果需要扩展自定义的 module 或者 component ，一定注意不要将 OC 的 runtime 暴露给 JS ， 不要将一些诸如 `dlopen()`， `dlsym()`， `respondsToSelector:`，`performSelector:`，`method_exchangeImplementations()` 的动态和不可控的方法暴露给JS， 也不要将系统的私有API暴露给JS**
+ > **注意**：**Weex 所有暴露给 JS 的内置 module 或 component API 都是安全和可控的， 它们不会去访问系统的私有 API ，也不会去做任何 runtime 上的 hack 更不会去改变应用原有的功能定位。**
+ >
+ > **如果需要扩展自定义的 module 或者 component ，一定注意不要将 OC 的 runtime 暴露给 JS ， 不要将一些诸如 `dlopen()`， `dlsym()`， `respondsToSelector:`，`performSelector:`，`method_exchangeImplementations()` 的动态和不可控的方法暴露给JS， 也不要将系统的私有API暴露给JS**
-## Module 扩展
+Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你需要一些特性但 Weex 并未提供，可以通过扩展自定义的一些插件来实现，通过 WeexSDK 加载。这些插件包括 [component](../wiki/component-introduction.html), [module](../wiki/module-introduction.html) 和 [handler](../wiki/handler-introduction.html)。
+>>> 本文都以 Objective-C 为例子书写，如果需要 swift 请参考
-[swift](https://github.com/weexteam/article/issues/55) 扩展 module
+## 自定义 module
-Weex SDK 只提供渲染，而不是其他的能力，如果你需要 像网络，图片，URL跳转这些特性，需要自己动手实现他们
-例如，如果你想实现一个url地址跳转函数，你可以按照如下步骤实现一个 Module
+自定义 module, 需要让自己的 class 遵循 `WXModuleProtocol` 这个protocol, 通过 `WX_EXPORT_METHOD` 这个宏暴露出需要透出到 `JavaScript` 调用的方法，注册 module , 就可以完成一个简单 module 的自定义。
-### **自定义module的步骤**
-1. 自定义的module类 必须实现 `WXModuleProtocol`
-2. 必须添加宏`WX_EXPORT_METHOD`, 它可以被weex识别，它的参数是 JavaScript调用 module指定方法的参数
-3. 添加`@synthesized weexInstance`，每个moudle对象被绑定到一个指定的实例上
-4. Module 方法会在UI线程中被调用，所以不要做太多耗时的任务在这里，如果要在其他线程执行整个module 方法，需要实现`WXModuleProtocol`中`- (NSThread *)targetExecuteThread`的方法，这样，分发到这个module的任务会在指定的线程中运行
-5. Weex 的参数可以是 String 或者Map
-6. Module 支持返回值给 JavaScript中的回调，回调的类型是`WXModuleCallback`,回调的参数可以是String或者Map
+- module 自定义初阶
- ```object-c
- @implementation WXEventModule
+ 下面完成一个 `module`, 该 `module` 暴露一个打印输入参数的方法
- @synthesize weexInstance;
- WX_EXPORT_METHOD(@selector(openURL:callback:))
+ 1. 新建一个 基类为 NSObject 的 class `WXCustomEventModule`, 让该类遵循 `WXModuleProtocol` 的协议
+ 
- - (void)openURL:(NSString *)url callback:(WXModuleCallback)callback
- {
- NSString *newURL = url;
- if ([url hasPrefix:@"//"]) {
- newURL = [NSString stringWithFormat:@"http:%@", url];
- } else if (![url hasPrefix:@"http"]) {
- newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;
- }
+ 2. 添加打印的方法，通过 `WX_EXPORT_METHOD` 暴露该方法
+ 
- UIViewController *controller = [[WXDemoViewController alloc] init];
- ((WXDemoViewController *)controller).url = [NSURL URLWithString:newURL];
+ 3. 在初始化完成 Weex SDK 之后注册该 module
+ 
- [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
- callback(@{@"result":@"success"});
- }
+ 到此，我们已经完成了一个简单的 module 方法的封装，javaScript 端的使用如下:
- @end
+ ```javaScript
+ weex.requireModule("event").showParams("hello Weex)
```
-#### 暴露同步方法<span class="api-version">v0.10+</span>
-
-如果你想要暴露同步的native方法给JS， 即JS可以直接拿到Native的返回值。 你可以使用`WX_EXPORT_METHOD_SYNC` 宏。
-
-native 代码:
-
-```objective-c
-@implementation WXEventModule
-
-WX_EXPORT_METHOD_SYNC(@selector(getString))
-
-- (NSString *)getString
-{
- return @"testString";
-}
-
-@end
-```
-
-js 代码:
-
-```javascript
-const eventModule = weex.requireModule('event')
-const returnString = syncTest.getString() // return "testString"
-```
-
-除了string, 你也可以返回 `number/array/dictionary` 类型.
-
-`注意:` 暴露的同步方法只能在 JS 线程执行，请不要做太多同步的工作导致JS执行阻塞。
-
-`注意:` Vue 2.0 还未支持这个特性，最早会在 0.12 版本支持
-
-
-
-### 注册 module
-
-通过调用 WXSDKEngine 中的 `registerModule:withClass`方法来注册自己的module
-
-```object-c
-WXSDKEngine.h
-/**
-* @abstract Registers a module for a given name
-* @param name The module name to register
-* @param clazz The module class to register
-**/
-+ (void)registerModule:(NSString *)name withClass:(Class)clazz;
-[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-```
-
-### 使用自己的 module
-
-这里的 require 里面的 event 就是在 上一步调用 `registerModule:` 注册 module 时候的 name
-
-```javascript
-var eventModule = weex.requireModule('event');
-eventModule.openURL('url',function(ret) {
- nativeLog(ret);
-});
+- module 高阶用法
+ 1. `weexInstance`
+ 在一个 Weex 页面中，默认 WXSDKInstance 的 Object 持有 多个 module 的 Object, 而 module 的 object 是没有对 WXSDKInstance 做持有的， 在自定义的module 中添加 `@synthesize weexInstance`, module Object 可以对 持有它本身的 WXSDKInstance Object 做一个 弱引用， 通过 weexInstance 可以拿到调用该 module 的页面的一些信息。
+ 2. `targetExecuteThread`
+ Module 方法默认会在UI线程中被调用，建议不要在这做太多耗时的任务，如果要在其他线程执行整个module 方法，需要实现`WXModuleProtocol`中`- (NSThread *)`的方法，这样，分发到这个module的任务会在指定的线程中运行
+
+ 3. `WXModuleKeepAliveCallback`
+ Module 支持返回值给 JavaScript中的回调，回调的类型是`WXModuleKeepAliveCallback`,回调的参数可以是String或者Map, 该 block 第一个参数为回调给 JavaScript 的数据，第二参数是一个 BOOL 值，表示该回调执行完成之后是否要被清除，JavaScript 每次调用都会产生一个回调，但是对于单独一次调用，是否要在完成该调用之后清除掉回调函数 id 就由这个选项控制，如非特殊场景，建议传 NO。
+ 4. `WX_EXPORT_METHOD_SYNC`
+ >>> WeexSDK 0.10 版本后才支持，暴露的同步方法只能在 JS 线程执行，请不要做太多同步的工作导致JS执行阻塞。
+
+ 使用 `WX_EXPORT_METHOD` 暴露到前端的方法都是异步方法(获得结果需要通过回调函数获得), 如果期望获得同步调用结果，可以使用`WX_EXPORT_METHOD_SYNC` 暴露module 方法。
+
+## Component 扩展
+
+可能 WeexSDK 内置提供的组件并不能满足你的开发需求，比如需要期望使用地图这样一个复杂的组件，可以通过自定义一个组件，注册到 WeexSDK engine 中， 可以很方便的使用起来。
+
+### component 基础生命周期
+
+- 新建一个基类为 `WXComponent` 的 class
+ 如果此时我们什么都不做，将改组件注册进 WeexSDK engine，它的功能就跟内置的 `div` 组件功能是一致的。
+
+- 覆盖 `WXComponent` 中的生命周期方法
+
+ - `loadView`
+ 一个 component 默认对应于一个 view ， 如果未覆盖 `loadView` 提供自定义 `view`, 会使用 `WXComponent` 基类中的 `WXView`, `WXView` 是继承自 UIView 的一个派生 view。
+ 要实现地图功能，我们需要对应的地图 view, 比如系统的 `MKMapView`
+
+ ```
+ - (UIView *)loadView {
+ return [MKMapView new];
+ }
+ ```
+
+ - `viewDidLoad`
+ 对组件 view 需要做一些配置，比如设置 delegate, 可以在 `viewDidLoad` 生命周期做，如果当前 view 没有添加 subview 的话，不要设置 view 的 frame，WeexSDK 会根据 style 设置。
+
+ ```
+ - (void)viewDidLoad {
+ ((MKMapView*)self.view).delegate = self;
+ }
+ ```
+- 注册 component
+
+ ```
+ [WXSDKEngine registerComponent:@"map" withClass:[WXMapComponent class]];
+ ```
+ 在前端页面直接可以使用 `map` 标签，如下所示
+
```
-
-Weex SDK 没有 图片下载，navigation 操作的能力，请大家自己实现这些 protocol
-
-## WXImgLoaderProtocol
-
-weexSDK 没有图片下载的能力，需要实现 WXImgLoaderProtocol, 参考下面的例子
-
-```object-c
-WXImageLoaderProtocol.h
-@protocol WXImgLoaderProtocol <WXModuleProtocol>
-/**
-* @abstract Creates a image download handler with a given URL
-* @param imageUrl The URL of the image to download
-* @param imageFrame The frame of the image you want to set
-* @param options : The options to be used for this download
-* @param completedBlock : A block called once the download is completed.
- image : the image which has been download to local.
- error : the error which has happened in download.
- finished : a Boolean value indicating whether download action has finished.
-*/
--(id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;
-@end
+ <template>
+ <div>
+ <map style="width:200px;height:200px"></map>
+ </div>
+ </template>
```
-实现上述协议
+- 支持自定义事件
-```object-c
-@implementation WXImgLoaderDefaultImpl
-#pragma mark -
-#pragma mark WXImgLoaderProtocol
-
-- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
-{
- if ([url hasPrefix:@"//"]) {
- url = [@"http:" stringByAppendingString:url];
- }
- return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
- } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
- if (completedBlock) {
- completedBlock(image, error, finished);
+ 给 map 组件支持 `mapLoaded` 事件
+ ```
+ <template>
+ <div>
+ <map style="width:200px;height:200px" @mapLoaded="onMapLoaded"></map>
+ </div>
+ </template>
+
+ <script>
+ export default {
+ methods: {
+ onMapLoaded:function(e) {
+ console.log("map loaded"+JSON.stringify(e))
+ }
+ }
}
- }];
-}
-@end
-```
-
-### handler注册
-
-你可以通过WXSDKEngine 中的 `registerHandler:withProtocol`注册handler
-
-```object-c
-WXSDKEngine.h
-/**
-* @abstract Registers a handler for a given handler instance and specific protocol
-* @param handler The handler instance to register
-* @param protocol The protocol to confirm
-*/
-+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
-
-[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]
-```
+ </script>
+ ```
+ 给当前组件添加 `BOOL` 成员 mapLoaded,记录当前事件是否被添加
+
+ - 覆盖组件生命周期方法添加和移除事件
+
+ 覆盖 `addEvent` 和 `removeEvent` 方法
-## Components 扩展
+ ```
+ - (void)addEvent:(NSString *)eventName {
+ if ([eventName isEqualToString:@"mapLoaded"]) {
+ _mapLoaded = YES;
+ }
+ }
-虽然 WeexSDK 中有很多的 native 的 Component，但这有可能并不能满足你的需求。在之前你可能已经写了一些很酷炫 native 的组件，想包装一下，导入到 Weex 中，因此我们提供了让开发者实现自己的 native Component。下面将以 WeexSDK 中已经存在的 Component：`image` 为例子，介绍一下如何构建一个 native Component。假设你已经了解 iOS 开发
+ - (void)removeEvent:(NSString *)eventName
+ {
+ if ([eventName isEqualToString:@"mapLoaded"]) {
+ _mapLoaded = NO;
+ }
+ }
+ ```
+ - 在适宜的时间发事件通知
-### 注册 Component
+ 在 MKMapView 加载完成的 delegate 方法中，发事件通知自定义事件
-注册一个 component 比较简单，调用 `WXSDKEngine` 中的 `registerComponent:withClass:` 方法，传入组件的标签名称，还有对应的 class 然后你可以创建一个 `WXImageComponent` 表示 `image` 组件的实现。在 `.we` 文件中，只需要写 `<image></image>`
+ ```
+ - (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView {
+ if (_mapLoaded) {
+ [self fireEvent:@"mapLoaded" params:@{@"customKey":@"customValue"} domChanges:nil]
+ }
+ }
+ ```
-### 添加属性
-现在我们要做一些让 image component 更加强大的事情。既然作为一个图片的 component，那它应该要有源，给他加上一个 `src` 的属性，同时给它加上一个 `resize` 的属性（可以配置的有 `contain/cover/stretch`）
-```object-c
-@interface WXImageComponent ()
+- 支持自定义属性
-@property (nonatomic, strong) NSString *imageSrc;
-@property (nonatomic, assign) UIViewContentMode resizeMode;
+ 添加自定义属性 showTraffic
-@end
-```
+ ```
+ <template>
+ <div>
+ <map style="width:200px;height:200px" showTraffic="true"></map>
+ </div>
+ </template>
+ ```
+ - 覆盖组件初始化方法 `initWithRef...`
-component 中所有的 style，attribute，events 都会被传递到 Component 的初始化方法中，所以，你可以在初始化方法中存储你感兴趣的一些属性值
+ 当前component 添加 `BOOL` 成员 showsTraffic，接受保存用户输入值，添加到当前组件上的所有属性都会在初始化方法中 `attributes` 中传过来，此处我们处理我们感兴趣的属性即可。
-```object-c
-@implementation WXImageComponent
+ ```
+ - (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance {
+ if(self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
+
+ if (attributes[@"showsTraffic"]) {
+ _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
+ }
+ }
+ return self;
+ }
+ ```
-- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
-{
- if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
- _imageSrc = [WXConvert NSString:attributes[@"src"]];
- _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
-}
+ - 在 `viewDidLoad` 中设置该属性
+
+ ```
+ - (void)viewDidLoad {
+ ((MKMapView*)self.view).showsTraffic = _showsTraffic;
+ }
+ ```
- return self;
-}
+ - 支持属性更新
+
+ ```
+ - (void)updateAttributes:(NSDictionary *)attributes
+ {
+ if (attributes[@"showsTraffic"]) {
+ _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
+ ((MKMapView*)self.view).showsTraffic = _showsTraffic;
+ }
+ }
-@end
-```
+ ```
-attribute 中拿到的值的类型都是 `id`，我们可以用转换方法把它转换到任何值。Weex SDK 提供了一些基础的转换方法，可以参考 `WXConvert` 类，或者你可以添加自己的转换函数。
-### Hooking 渲染生命周期
+### 更多 component 生命周期
native 的 component 是由 Weex 管理的，Weex 创建，布局，渲染，销毁。Weex 的 component 生命周期都是可以 hook 的，你可以在这些生命周期中去做自己的事情。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a72a8f56/source/cn/guide/extend-js-framework.md
----------------------------------------------------------------------
diff --cc source/cn/guide/extend-js-framework.md
index fbdb86e,6bdd5ab..1780517
--- a/source/cn/guide/extend-js-framework.md
+++ b/source/cn/guide/extend-js-framework.md
@@@ -1,8 -1,8 +1,8 @@@
---
- title: 拓展 JS framework
+ title: 扩展前端框架
type: guide
group: 扩展
-order: 6.4
+order: 6.5
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a72a8f56/source/cn/guide/extend-module-using-swift.md
----------------------------------------------------------------------
diff --cc source/cn/guide/extend-module-using-swift.md
index 3098284,0000000..3ac4a9f
mode 100644,000000..100644
--- a/source/cn/guide/extend-module-using-swift.md
+++ b/source/cn/guide/extend-module-using-swift.md
@@@ -1,115 -1,0 +1,115 @@@
+---
- title: iOS 扩展
++title: 使用 swift 扩展 Weex
+type: guide
+group: 扩展
+order: 6.4
+version: 2.1
+---
+
+## Swift In Weex
+
+[Swift和Objective-C](https://developer.apple.com/library/ios/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html#//apple_ref/doc/uid/TP40014216-CH10-ID122) 混编
+
+参考完整 [例子](https://github.com/acton393/WeexSwiftSample.git)
+
+### 使用 Swift 进行 module 扩展
+
+因为 module 暴露 method 是通过`Objective-C`宏来做的，调用的时候是通过反射，所以Swift扩展 module 通过`extension` `Objective-C`的类。
+- 新建 `WXSwiftTestModule.h/m` 和 `WXSwiftTestModule.swift`文件， 在新建Swift文件的时候会提示
+ 
+ 选择 `Create Bridging Header`, 因为我们要在 Swift 中访问 `Objective-C` 的一些类，正是通过这个 header暴露 OC 的类给 Swift,header 格式为 `yourTarget-Bridging-Header.h`，我这里创建完header文件名称为：`WeexDemo-Bridging-Header.h`
+- `WXSwiftTestModule.h/m`中实现
+ - WXSwiftTestModule.h 中
+
+ ```
+ #import <Foundation/Foundation.h>
+ #import <WeexSDK/WeexSDK.h>
+
+ @interface WXSwiftTestModule : NSObject <WXModuleProtocol>
+
+ @end
+
+ ```
+ - WXSwiftTestModule.m 中
+
+ WeexDemo-Swift.h 这个文件需要编译一下才可以搜索到，具体的路径
+
+ ```
+ weex/ios/playground/DerivedData/WeexDemo/Build/Intermediates/WeexDemo.build/Debug-iphonesimulator/WeexDemo.build/DerivedSources/WeexDemo-Swift.h
+ ```
+
+ 路径具体需要根据自己工程而定
+
+ ```
+ #import "WXSwiftTestModule.h"
+ #import "WeexDemo-Swift.h" // Swift类和方法 被 `Objective-C` 识别需要导入
+
+ @implementation WXSwiftTestModule
+ #pragma clang diagnostic push //关闭unknow selector的warrning
+ #pragma clang diagnostic ignored "-Wundeclared-selector"
+
+ WX_EXPORT_METHOD(@selector(printSome:callback:)) //Swift 中定义的方法，XCode 转换成的最终的方法名称，在`WeexDemo-Swift.h`里面查看
+
+ #pragma clang diagnostic pop
+
+ @end
+
+ ```
+- Swift 中实现
+ 扩展 OC 的类 `WXSwiftTestModule`,增加了一个方法，这个方法就是我们要暴露出来，在 js 中可以调到的
+ - WXSwiftTestModule.swift
+
+ ```
+ import Foundation
+ public extension WXSwiftTestModule {
+ public func printSome(someThing:String, callback:WXModuleCallback) {
+ print(someThing)
+ callback(someThing)
+ }
+ }
+ ```
+
+ `WXSwiftTestModule` 和`WXModuleCallback` 因为是 OC 的，需要在 `WeexDemo-Bridging-Header` 中暴露
+ - WeexDemo-Bridging-Header.h中
+
+ ```
+ //
+ // Use this file to import your target's public headers that you would like to expose to Swift.
+ //
+ #import "WXSwiftTestModule.h"
+ #import "WeexSDK.h"
+ ```
+
+ 至此这个使用 Swift 开发的简单的 module 已经完成
+
+ ### module 使用
+ - 注册 module
+
+ ```
+ [WXSDKEngine registerModule:@"swifter" withClass:[WXSwiftTestModule class]];
+
+ ```
+ - we 文件中使用
+
+ ```
+ <template>
+ <text>Swift Module</text>
+ </template>
+
+ <script>
+ require('weex-components');
+
+ module.exports = {
+ data: {
+
+ },
+ ready: function() {
+ var swifter = require('@weex-module/swifter');
+ swifter.printSome("https://www.taobao.com",function(param){
+ nativeLog(param);
+ });
+ }
+
+ };
+ </script>
+ ```