安装环境和简单独立测试
1 Mac上直接通过Homebrew安装Node：brew install node
2 安装Weex CLI环境：npm install -g weex-toolkit
3 检测当前Weex版本，并确保版本号大于0.1.0：weex --version
4 创建一个后缀名为we的文件,如：xxxx.we 在命令行执行：weex xxxxx.we 会看到网页自动弹出界面,且自动生成一个weex_tmp的文件夹包括了这个h5_render文件夹里的html,js等文件
xxx.we文件格式为三段式 <template>, <style>, <script>：
<template>
<div>
<image class="thumbnail" src="http://image.coolapk.com/apk_logo/2015/0817/257251_1439790718_385.png"></image>
<text class="title" onclick="onClickTitle">Hello Weex</text>
</div>
</template>
<style>
.title { color: red; }
.thumbnail { width: 100; height: 100; }
</style>
<script>
module.exports = {
methods: {
onClickTitle: function (e) {
console.log(e);
alert('title clicked.');
}
}
}
</script>
5 发现地址栏内容如：http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=Hellow.js&loader=xhr 其中有个hot_reload_...... 这个标志着可以实时自动刷新
集成到iOS项目
1 cd到iOS项目root目录
2 从官方Git中下载源码并将其中 ios/sdk 目录完整拷贝到root目录
3 touch Podfile 并 open -e Podfile 进行编辑
Podfile内容：
platform :ios, ‘8.0’
target ‘WeexPractice’ do
pod ‘WeexSDK’, :path=>’./sdk/’
end
4 pod install 后完成weex集成
5 iOS项目中代码配置weex运行环境
AppDelegate:
#import <WeexSDK.h>
[WXAppConfiguration setAppGroup:@"AliApp"];
[WXAppConfiguration setAppName:@"SevenWeex"];
[WXAppConfiguration setAppVersion:@"1.0"];
[WXSDKEngine initSDKEnviroment];
[WXLog setLogLevel:WXLogLevelAll];
ViewController:
#import <WeexSDK/WXSDKInstance.h>
@property (nonatomic, strong) WXSDKInstance *instanceOh;
NSURL *weexUrl = [NSURL URLWithString:@"http://172.17.16.30:8081/xxxxx.we"];//地址参考下一步
_instanceOh = [[WXSDKInstance alloc] init];
_instanceOh.viewController = self;
_instanceOh.frame = CGRectMake(0, 100, self.view.frame.size.width, 300);
[_instanceOh renderWithURL:weexUrl options:@{@"bundleUrl": [weexUrl absoluteString]} data:nil];
__weak typeof(self) weakSelf = self;
_instanceOh.onCreate = ^(UIView *view){
view.backgroundColor = [UIColor redColor];
[weakSelf.view addSubview:view];
};
_instanceOh.renderFinish = ^(UIView *view) {
NSLog(@"weexSDK Finished");
};
_instanceOh.onFailed = ^(NSError *error) {
NSLog(@"weexSDK onFailed : %@\n", error);
};
- (void)dealloc{
[_instanceOh destroyInstance];
}
6 启动前面创建的xxxxx.we文件对应的 weex服务器进行关联才能调试,从而拿到根据终端的IP地址提示拷贝到工程里的请求路径里并拼接xxxxx.we文件名：weex -s .
7 附加：（可能会想把we转为js文件放到工程中，可仿造上面在Desktop目录下创建一个文件夹，cd到该文件夹后执行：weex init自动生成一些js,json,we,src,html等必备文件，后在当前目录命令行执行npm install，安装依赖库，之后于当前目录下创建一个文件夹名为js，并命令行执行：weex src -o js 生成js文件到该js文件夹里）
高级进阶
1 发现xxxxx.we里的图片显示不到iOS上，因为Weex SDK没有提供图片下载功能。
2 自定义遵行< WXImgLoaderProtocol >协议的图片下载类 在实现中返回一个id<WXImageOperationProtocol>对象就行了，因此可以灵活的指定第三方图片下载工具比如SDWebImage
#import <WeexSDK/WeexSDK.h>
@interface WeexImageDownloader : NSObject <WXImgLoaderProtocol>
@end
- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url
imageFrame:(CGRect)imageFrame
userInfo:(NSDictionary *)options
completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock {
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);
}
}];
}
3 图片下载器并非默认支持，自定义后需要注册我们的Handler类给Weex,
[WXSDKEngine registerHandler:[WeexImageDownloader new] withProtocol:@protocol(WXImgLoaderProtocol)];
4 自定义UI组件Component
[WXSDKEngine registerComponent:@"weex-button" withClass:[WeexButton class]];
以后就能在xxxxx.we中使用<weex-button>标签
<weex-button class="button" title="hello"></weex-button>
标签的属性也是可以设置的，调用父类的initWithRef........方法传入自定义属性
- (instancetype)initWithRef:(NSString *)ref
type:(NSString*)type
styles:(nullable NSDictionary *)styles
attributes:(nullable NSDictionary *)attributes
events:(nullable NSArray *)events
weexInstance:(WXSDKInstance *)weexInstance {
self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance];
if (self) {
_title = [WXConvert NSString:attributes[@"title"]];
}
return self;
}
之后就能在OC中使用_title等属性来改变文字等属性了。
5 自定义Module
需要遵循WXModuleProtocol协议；
需要合成（synthesize）weexInstance属性；
使用WX_EXPORT_METHOD来暴露API；
使用WXModuleCallback进行回调；
@synthesize weexInstance;
WX_EXPORT_METHOD(@selector(call:withParam:callback:))
- (void)call:(NSString *)api withParam:(NSDictionary *)param callback:(WXModuleCallback)callback {}
并注册Module
[WXSDKEngine registerModule:<#(NSString *)#> withClass:<#(__unsafe_unretained Class)#>];
这样就可以在script中使用：
<script>
module.exports = {
methods: {
onClickTitle: function (e) {
var mymodule = require('@weex-module/mymodule');
mymodule.call('api', {}, function(ret) {
});
}
}
}
</script>
