WEB環境
(1)先安裝開發環境
參考官方環境搭建手冊:http://weex.apache.org/cn/guide/set-up-env.html
(2)新建Web工程
weex init testweex
(3)安裝依賴庫
npm install
(4)編碼,修改src文件夾下的foo.vue
<template>
<div class="wrapper" @click="update">
<image :src="logoUrl" class="logo"></image>
<text class="title">Hello {{target}}</text>
</div>
</template>
<style>
.wrapper { align-items: center; margin-top: 120px; }
.title { font-size: 48px; }
.logo { width: 360px; height: 82px; }
</style>
<script>
export default {
data: {
logoUrl: 'https://alibaba.github.io/weex/img/[email protected]',
target: 'World'
},
methods: {
update: function (e) {
this.target = 'Weex'
console.log('target:', this.target)
}
}
}
</script>
(5)運行項目
在項目文件夾下執行:
npm run dev
npm run serve
或者直接對文件執行:
weex src/foo.vue
別問我這兩種方式有什麼不同,做iso的,對node工程不太熟悉,後續補上。
(6)瀏覽器訪問工程
第一種運行工程,直接訪問http://localhost:8080/index.html
第二種運行工程,會自動打開瀏覽器並訪問地址:http://10.10.1.17:8081/?hot-reload_controller&page=foo.js&loader=xhr&wsport=8082&type=vue
IOS環境
(1)新建ios工程testweex
(2)集成WeexSDK
集成方式參考官方文檔http://weex.apache.org/cn/guide/integrate-to-your-app.html
有兩種集成方式,都是使用cocoaPods,一種是集成framework,一種是源碼集成。
cocoaPods的安裝使用可參考:http://code4app.com/article/cocoapods-install-usage
我使用的是集成framework方式,集成後引用頭文件可能會報錯找不到文件,解決方方請參考:http://blog.sina.com.cn/s/blog_864456e50101eyic.html
(3)AppDelegate集成代碼
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
//business configuration
[WXAppConfiguration setAppGroup:@"AliApp"];
[WXAppConfiguration setAppName:@"WeexDemo"];
[WXAppConfiguration setAppVersion:@"1.0.0"];
//init sdk enviroment
[WXSDKEngine initSDKEnvironment];
//set the log level
[WXLog setLogLevel: WXLogLevelAll];
return YES;
}
(4)新建WeexViewController用來加載Web頁面
#import "WeexViewController.h"
#import "WeexSDK.h"
@interface WeexViewController ()
@property (nonatomic, strong) WXSDKInstance *weexSDK;
@end
@implementation WeexViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.weexSDK.viewController = self;
self.weexSDK.frame = self.view.frame;
NSString *str = [NSString stringWithFormat:@"http://%@:8081/%@", @"10.10.1.17", @"foo.weex.js"];
[self.weexSDK renderWithURL:[NSURL URLWithString:str]];
__weak typeof(self) weakSelf = self;
self.weexSDK.onCreate = ^(UIView *view) {
[weakSelf.view addSubview:view];
};
self.weexSDK.onFailed = ^(NSError *error) {
//process failure
NSLog(@"weexSDK onFailed : %@\n", error);
};
self.weexSDK.renderFinish = ^ (UIView *view) {
//process renderFinish
};
}
- (WXSDKInstance *)weexSDK {
if (!_weexSDK) {
_weexSDK = [WXSDKInstance new];
}
return _weexSDK;
}
- (void)dealloc {
[_weexSDK destroyInstance];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
(5)運行模擬器
發現圖片加載不出來。
(6)加載網絡圖片,需要用到SDWebImage,修改Podfile
source '[email protected]:CocoaPods/Specs.git'
target 'testweex' do
platform :ios, '7.0'
pod 'WeexSDK', '0.9.5' ## 建議使用WeexSDK新版本
pod 'SDWebImage', '3.7.5'
end
執行pod install安裝SDWebImage。
(7)新建WXImgLoaderDefaultImpl,實現圖片加載
#import <Foundation/Foundation.h>
#import "WXImgLoaderProtocol.h"
@interface WXImgLoaderDefaultImpl : NSObject<WXImgLoaderProtocol, WXModuleProtocol>
@end
#import "WXImgLoaderDefaultImpl.h"
#import <SDWebImage/UIImageView+WebCache.h>
#define MIN_IMAGE_WIDTH 36
#define MIN_IMAGE_HEIGHT 36
#if OS_OBJECT_USE_OBJC
#undef WXDispatchQueueRelease
#undef WXDispatchQueueSetterSementics
#define WXDispatchQueueRelease(q)
#define WXDispatchQueueSetterSementics strong
#else
#undef WXDispatchQueueRelease
#undef WXDispatchQueueSetterSementics
#define WXDispatchQueueRelease(q) (dispatch_release(q))
#define WXDispatchQueueSetterSementics assign
#endif
@interface WXImgLoaderDefaultImpl()
@property (WXDispatchQueueSetterSementics, nonatomic) dispatch_queue_t ioQueue;
@end
@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);
}
}];
}
@end
(8)在AppDelegate中實現註冊
//此代碼用於加載網絡圖片
[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];
(9)運行模擬器,圖片顯示成功:
(10)再放一張圖,這是標標準準的native程序,圖片的控件是WXImageView,文字是WXText。