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:26 UTC
[03/12] incubator-weex-site git commit: Merge branch 'master' of
github.com:apache/incubator-weex-site
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>
+ ```