Weex 시작 및 승급 가이드

원본 주소:https://yq.aliyun.com/articles/57554
전언
React Native의'Learn once, write any where'에 비해 Weex의 슬로건은'Write once,run every where'다.React Native의 이기적인 하향 호환성을 고려하여 Weex를 도입하여 알아보겠습니다.
본문은 주로 다음과 같은 몇 부분으로 나뉜다.

Hello World 프로그램 구축;

기존 iOS 프로젝트에 통합

Weex의 고급 기능 사용;

Weex에 기여하는 방법;

1. Weex 입문
1.1 Hello Weex
공식 자습서를 참조하려면 먼저 Node를 설치해야 합니다.Mac에서도 Homebrew를 통해 직접 설치할 수 있습니다: brew install node.
그런 다음 Weex CLI: npm install -g weex-toolkit를 설치하고 버전 번호가 0.1.0 이상이어야 합니다.

$ weex --version
info 0.3.4

이제 준비 작업이 완료되었으므로 Weex 프로그램을 작성할 수 있습니다.helloweex.we라는 파일을 만들고 다음 코드를 작성합니다.

<template>
  <div>
    <text>Hello Weex</text>
  </div>
</template>

명령줄을 사용하여 helloweex.we 파일이 있는 디렉토리에서 다음 명령을 실행합니다.

$ weex helloweex.we 
info Fri Jul 08 2016 14:30:31 GMT+0800 (CST)WebSocket  is listening on port 8082 
info Fri Jul 08 2016 14:30:31 GMT+0800 (CST)http  is listening on port 8081 

브라우저에서 새 탭 표시helloweex.we의 실행 효과를 표시합니다.
이 때 주소 표시줄의 내용http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=helloweex.js&loader=xhr에 hot reload이라는 글자가 포함되어 있음을 알 수 있기 때문에 원본 파일을 수정하고 저장한 후에 이 페이지가 자동으로 전시 효과를 갱신하는 것을 자연스럽게 연상할 수 있다.
1.2 인프라
위의 예는 매우 간단한 초기 형태일 뿐이며, 비교적 완전한 Weex 프로그램은 템플릿 (Template), 스타일 (Style), 스크립트 (Script) 세 부분으로 구성되어 있다.
예를 들어 위에서 언급한 hot reload를 이용하여 텍스트의 색을 수정하고 효과를 실시간으로 볼 수 있다.

<template>
  <div>
    <text class="title">Hello Weex</text>
  </div>
</template>

<style> .title { color: red; } </style>

그런 다음 스크립트(Script)의 세 번째 구성 요소를 추가합니다.

<template>
  <div>
    <text class="title" onclick="onClickTitle">Hello Weex</text>
  </div>
</template>

<style> .title { color: red; } </style>

<script> module.exports = { methods: { onClickTitle: function (e) { console.log(e); alert('title clicked.'); } } } </script>

이렇게 하면 우리가 텍스트를 눌렀을 때 다음과 같은 효과가 나타난다.
더 많은 문법 관련 내용은 공식 문서를 참고할 수 있다.
2. iOS 프로젝트에 통합
2.1 개요
위쪽은 전방의 측면에서 Weex의 기초 효과를 초보적으로 보는 것이다. 클라이언트에게 이런 프레임워크의 장점은 바로 Native 코드와 결합하여 역할을 발휘할 수 있다는 것이다.예를 들어 일손이 부족한 상황에서 한 번에 개발하여 서로 다른 플랫폼 단말기에 응용할 수 있다.
그래서 이를 기존 iOS 프로젝트에 어떻게 통합할 것인가에 대해 논의한다.

공식 문서를 참고하여 GitHub에서 Weex 원본을 다운로드합니다.

압축을 풀고 디렉터리에 있는ios/sdk을 기존 iOS 프로젝트 디렉터리에 복사하고 상대 경로에 따라 기존 프로젝트의podfile를 업데이트한 다음pod update Weex iOS SDK를 기존 iOS 프로젝트에 통합한다.

iOS Native 코드에서 Weex SDK를 초기화한 다음에 Weex 프로그램을 보여줄 ViewController를 만듭니다. 구체적으로 다음과 같습니다.

2.2 iOS 어플리케이션에서 Weex 프로그램 실행
어떻게 집적된 문서에서 앞에서 말한 것은 비교적 명확하지만 Weex 와 Weex 이 두 소절에서 코드가 비교적 큰 프로젝트 원본에서 발췌된 것이기 때문에 상하문이 필요하지 않거나 없는 코드가 존재할 수 있다.
개발 디버그 단계에서 Weex 프로그램을 실행하는 방법에 대해 설명합니다.
2.2.1 실행할 Weex 프로그램 결정
다음 레이아웃을 위해 WeexDebugViewController를 생성합니다.
IP 및 파일 이름을 입력하여 실행할 Weex 프로그램을 찾습니다.또한 weex helloweex.we --qr -h {ip or hostname} 명령과 결합하여 QR코드를 생성하고 스캐닝 프레젠테이션을 할 수 있지만 QR코드를 해석하는 것은 Weex 프로그램이 있는 위치를 얻기 위한 것이다.
2.2.2 Weex SDK 초기화
개발 디버그 단계에서는 먼저 Weex SDK의 초기화를 이 WeexDebugViewController에 배치할 수 있습니다.

- (void)initWeex {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        [WXAppConfiguration setAppGroup:@"AliApp"];
        [WXAppConfiguration setAppName:@"WeexDemo"];
        [WXAppConfiguration setAppVersion:@"1.0.0"];

        [WXSDKEngine initSDKEnviroment];

        [WXLog setLogLevel:WXLogLevelVerbose];
    });
}

2.2.3 Weex 프로그램을 실행하는 ViewControllerShowWeex 단추를 눌렀을 때, 우리는 두 개의 입력 상자의 내용에 따라 실행할 Weex 프로그램의 위치를 연결하고, 그 값을 Weex 실례를 렌더링하는 데 사용할 WeexShowcaseViewController에 부여할 수 있다.

- (void)showWeex {
    NSString *str = [NSString stringWithFormat:@"http://%@:8081/%@", self.ipField.text, self.filenameField.text];
    WeexShowcaseViewController *vc = [WeexShowcaseViewController new];
    vc.weexUri = [NSURL URLWithString:str];
    [self.navigationController pushViewController:vc animated:YES];
}

이어서 WeexShowcaseViewController의 원본을 살펴보자.

#import <WeexSDK/WeexSDK.h>

@interface WeexShowcaseViewController ()

@property (nonatomic, strong) WXSDKInstance *weexSDK;

@end

@implementation WeexShowcaseViewController

- (void)dealloc {
    [_weexSDK destroyInstance];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    self.weexSDK.viewController = self;
    self.weexSDK.frame = self.view.frame;

    [self.weexSDK renderWithURL:self.weexUri];

    __weak typeof(self) weakSelf = self;
    self.weexSDK.onCreate = ^(UIView *view) {
        [weakSelf.view addSubview:view];
    };

    self.weexSDK.renderFinish = ^(UIView *view) {
        ;
    };

    self.weexSDK.onFailed = ^(NSError *error) {
        NSLog(@"weexSDK onFailed : %@
", error);
    };
}

- (WXSDKInstance *)weexSDK {
    if (!_weexSDK) {
        _weexSDK = [WXSDKInstance new];
    }
    return _weexSDK;
}

2.2.4 작동
터미널로 돌아가서 helloweex.we 파일이 있는 디렉터리로 전환하고 Weex의 dev 서버를 뛰기 시작합니다.

$ weex -s .
info Fri Jul 08 2016 15:38:59 GMT+0800 (CST)http  is listening on port 8081 
info we file in local path . will be transformer to JS bundle
please access http://30.9.112.173:8081/ 

그런 다음 Native에 해당하는 IP 및 프로그램 파일 이름을 입력합니다.
이에 따라 기존 iOS 프로젝트에 Weex를 통합하는 작업은 일단락되었습니다.
3. Weex 진급
통합 작업이 끝난 후에 기존 기능이 업무 수요를 충족시키지 못한다는 것을 발견하기 때문에 Weex는 개발자를 지원하여 확장을 할 수 있다.
3.1 Weex 인터페이스 프로토콜 구현
이전 helloweex.we 예제에서는 텍스트 요소가 하나였는데 이제 이미지 요소를 추가합니다.

<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>

다음에 실행: $ weex helloweex.we 를 사용하여 효과를 확인합니다.
브라우저에서 이번에 사진이 한 장 더 나온 것을 볼 수 있다.그러나 Native 쪽에서 실행되는 경우 그림이 표시되지 않습니다.
이것은 Weex SDK가 이미지 다운로드 기능을 제공하지 않았기 때문에 우리가 실현해야 한다.
3.2 이미지 다운로드 프로토콜 구현WXImgLoaderProtocol이것은 기본적으로 정부 문서를 참고하여 실현할 수 있다.
3.2.1 정의 이미지 다운로드Handler

#import <WeexSDK/WeexSDK.h>

@interface WeexImageDownloader : NSObject <WXImgLoaderProtocol>

@end

3.2.2 프로토콜 인터페이스 구현
이 클래스는 WXImgLoaderProtocol 프로토콜에 따라 정의된 인터페이스를 실현해야 합니다.

#import "WeexImageDownloader.h"
#import <SDWebImage/SDWebImageManager.h>

@implementation WeexImageDownloader

- (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);
        }
    }];
}

@end

3.2.3 등록Handler

[WXSDKEngine registerHandler:[WeexImageDownloader new] withProtocol:@protocol(WXImgLoaderProtocol)];

이렇게 하면 다시 프로그램을 실행하면 그림을 볼 수 있다.
이러한 디자인의 장점은 주로 서로 다른 앱이 의존하는 인터넷 라이브러리나 사진 다운로드 캐시 라이브러리가 다르다는 것을 고려하고 Weex가 특정한 제3자 라이브러리에 의존하는 것을 피하며 구체적인 원칙이 아니라 추상적인 것에 의존하는 것을 따르는 것이다.
BTW, 제 개인적인 느낌Weex은 WX, WeexImageLoaderProtocol는 WXImgLoaderProtocol로 줄여서 별로 예쁘지 않아요.
3.2 사용자 정의 UI 구성 요소
만약 Weex의 내장 라벨이 요구를 충족시키지 못할 경우, 우리는 Native 구성 요소를 사용자 정의해서 노출할 수 있습니다.we 파일을 사용합니다.
예를 들어 우리는 WeexButton를 정의하여 WXComponent에서 계승한 다음에 이를 Weex SDK에 등록할 수 있다.

[WXSDKEngine registerComponent:@"weex-button" withClass:[WeexButton class]];

이렇게 되면 우리는 있을 수 있다.we 파일에서 이 탭을 사용했습니다:

<weex-button class="button" title="hello"></weex-button>

태그의 등록 정보는 초기화 함수에서 사용할 수 있습니다.

- (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;
}

이러한 등록 정보를 통해 구성 요소의 라이프 사이클에서 구성 요소 스타일을 수정할 수 있습니다. 예를 들어 버튼의 title 설정:

- (void)viewDidLoad {
    [super viewDidLoad];

    self.innerButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    self.innerButton.frame = self.view.bounds;
    [self.view addSubview:self.innerButton];
    [self.innerButton setTitle:self.title forState:UIControlStateNormal];
    [self.innerButton addTarget:self action:@selector(onButtonClick:) forControlEvents:UIControlEventTouchUpInside];
}

3.3 맞춤형 모듈
UI 구성 요소를 제외하고, 때때로 우리는 JS 차원에서 Native의 일부 기능을 호출할 수 있기를 희망한다. 예를 들어 JS 코드를 통해 Native가 특정한 ViewController를 열 수 있도록 하는 것이다.이 때 우리는 모듈을 사용자 정의하여 JS 차원에서 API를 노출시킬 수 있다.

@synthesize weexInstance;

WX_EXPORT_METHOD(@selector(call:withParam:callback:))
- (void)call:(NSString *)api withParam:(NSDictionary *)param callback:(WXModuleCallback)callback {

주의점은 다음과 같습니다.WXModuleProtocol 협의를 따라야 한다.2.합성(synthesizeweexInstance속성이 필요합니다.3. WX_EXPORT_METHOD를 사용하여 API를 노출한다.4.WXModuleCallback로 리셋하기;
위 인코딩이 완료되면 Weex SDK에 등록: [WXSDKEngine registerModule:하면 됩니다.we 파일에서 사용된 내용:

<script> module.exports = { methods: { onClickTitle: function (e) { var mymodule = require('@weex-module/mymodule'); mymodule.call('api', {}, function(ret) { }); } } } </script>

4. Weex에 기여
Weex가 시작된 지 얼마 되지 않았기 때문에 개발자가 일부 문제나 개선이 필요한 부분을 발견하면 GitHub에서 직접 포크를 하고 수정이 끝난 후에 Pull Request를 제출할 수 있습니다.