一、搭建开发环境
Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先，你需要 Node.js 和 Weex CLi。
$ npm install -g weex-toolkit
安装完成后
ForgetFairy:Desktop ForgetFairy$ weex -v
v1.0.5
- weex-builder : v0.2.6
- weex-previewer : v1.3.8
初始化 Weex 项目：
ForgetFairy:Desktop ForgetFairy$ weex init anwsome-project
二、开发
之后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。
在 package.json 中，已经配置好了几个常用的 npm script，分别是：
build: 源码打包，生成 JS Bundle
dev: webpack watch 模式，方便开发
serve: 开启静态服务器
debug: 调试模式
我们先通过npm install 安装项目依赖。之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。
然后我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面。
初始化时已经为我们创建了基本的示例，我们可以在 src/foo.vue 中查看。
weex-toolkit 支持预览你当前开发的weex页面(.we或者.vue)，你只需要指定预览的文件路径即可：
weex src/foo.vue
打包weex项目
如果开发完成后，你可以使用 weex compile 通过命令行工具进行单个文件或者整个项目的打包。
weex compile src/foo.vue dist
命令行需要两个参数，你的源码文件或者目录， 以及你生成打包后的目录地址。
三、hello weex
#import "AppDelegate.h"
#import <WeexSDK/WeexSDK.h>
#import "ViewController.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
[self.window makeKeyAndVisible];
self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:[[ViewController alloc] init]];
//business configuration
[WXAppConfiguration setAppGroup:@"AliApp"];
[WXAppConfiguration setAppName:@"WeexDemo"];
[WXAppConfiguration setAppVersion:@"1.0.0"];
[WXSDKEngine initSDKEnvironment];
[WXLog setLogLevel: WXLogLevelAll];
return YES;
}
#import "ViewController.h"
#import <WeexSDK/WXSDKInstance.h>
@interface ViewController ()
@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) UIView *weexView;
@property (nonatomic, strong) NSURL *url;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
self.title = @"hello weex";
_instance = [[WXSDKInstance alloc] init];
_instance.viewController = self;
_instance.frame = self.view.frame;
__weak typeof(self) weakSelf = self;
_instance.onCreate = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
weakSelf.weexView = view;
[weakSelf.view addSubview:weakSelf.weexView];
};
_instance.onFailed = ^(NSError *error) {
NSLog(@"处理失败%@", error);
};
_instance.renderFinish = ^ (UIView *view) {
NSLog(@"渲染完成");
};
[_instance renderWithURL:self.url options:@{@"bundleUrl": [self.url absoluteString]} data:nil];
}
-(WXSDKInstance *)instance{
if (_instance == nil) {
_instance = [[WXSDKInstance alloc] init];
_instance.viewController = self;
_instance.frame = self.view.frame;
[_instance renderWithURL: self.url];
}
return _instance;
}
-(NSURL *)url{
if (_url == nil) {
_url = [NSURL URLWithString:[NSString stringWithFormat:@"file://%@/hello.js", [NSBundle mainBundle].bundlePath]];
}
return _url;
}
- (void)dealloc{
[_instance destroyInstance];
}
其中hello.js为创建的demo生成的js文件
