weex使用記錄1

AFEC38C7-BD4C-47A2-BA4A-4E5CD03D9C7B

1.ios接入WeexSDK

利用cocoapod管理

pod 'WeexSDK'

然后在(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions中初始化weex.

- (void)configWeex {
    //business configuration
    [WXAppConfiguration setAppGroup:@"AliApp"];
    [WXAppConfiguration setAppName:@"WeexDemo"];
    [WXAppConfiguration setAppVersion:@"1.0.0"];
    //init sdk environment
    [WXSDKEngine initSDKEnvironment];
    
    [WXSDKEngine registerHandler:[PCImageLoader new] withProtocol:@protocol(WXImgLoaderProtocol)];
    
    //set the log level
    [WXLog setLogLevel: WXLogLevelAll];
}

(這里的registerHandler我還沒搞懂是什么意思)

2.在ios跑weex上的helloworld

<template>
  <div class="container">
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <text class="title">JavaScript</text>
    </div>
  </div>
</template>

<style>
  .cell { margin-top: 8; margin-left: 8; flex-direction: row; }
  .thumb { width: 100; height: 100; }
  .title { text-align: center; flex: 1; color: grey; font-size: 25; }
</style>

這是官方的weex helloworld的代碼.

我按照文檔安裝weex-toolkit后,直接在本地運行

weex list.we

然后就出問題了,界面沒出來.

D4673C2E-3029-44DC-8230-39C56529BFD7

google搜了下說是toolkit的bug

17569CE0-BB90-4886-9C58-A7D4A49DE98B

有人說新版解決了

6294C1C8-6FC9-4C03-A4DB-0CD2299F35D0

我是今天才使用,已經(jīng)是最新版了,但是還是有問題.

問了餓了嗎的開發(fā)(因為他們是用native+weex的),他們建議我用chrome調(diào)試下

6FE8CDC4-4217-4E2E-A6AC-C34D8EE1169B

一番折騰后還是不行,不是很熟前端啊...

還好還有替代方案.

使用weex playground的在線編輯

9A92F716-5C96-425A-AB7D-013045515AD7

http://dotwe.org/vue

在線編輯這里可以生成對應的js

686605FE-004A-4EE6-8F15-A9D87BA336D2

把生成的js新建list.js文件然后放到xcode里

然后新建vc文件

#import <WeexSDK/WXSDKInstance.h>

@interface WeexTestViewController ()
@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) NSURL *url;
@property (weak, nonatomic) UIView *weexView;
@end
@implementation WeexTestViewController

- (void)dealloc {
    [self.instance destroyInstance];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initWeexView];
}

#pragma mark - setters and getters -
- (void)initWeexView {
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame = self.view.frame;
    [_instance renderWithURL:self.url
                     options:@{@"bundleUrl":[self.url absoluteString]}
                        data:nil];
    __weak typeof(self) weakSelf = self;
    _instance.onCreate = ^(UIView *view) {
        weakSelf.weexView = view;
        [weakSelf.weexView removeFromSuperview];
        [weakSelf.view addSubview:weakSelf.weexView];
    };
    _instance.onFailed = ^(NSError *error) {
        NSLog(@"處理失敗:%@",error);
    };
    _instance.renderFinish = ^ (UIView *view) {
        NSLog(@"渲染完成");
    };
}

- (NSURL *)url {
    if (!_url) {
        _url =  [[NSBundle mainBundle] URLForResource:@"list"
                                        withExtension:@"js"];
    }
    return _url;
}

@end

這個也是根據(jù)文檔寫的demo.

這樣運行,圖片是顯示不出來的,需要WXImgLoaderProtocol,WXImageOperationProtocol的方法重寫

#import <WeexSDK.h>
#import <AFNetworking.h>

@interface PCImageLoader () <WXImgLoaderProtocol,WXImageOperationProtocol>
@property (nonatomic, strong) AFHTTPSessionManager *sessionManager;
@property (nonatomic, strong) NSURLSessionDataTask *dataTask;
@end
@implementation PCImageLoader

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url
                                          imageFrame:(CGRect)imageFrame
                                            userInfo:(NSDictionary *)options
                                           completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock {
    self.dataTask = [self.sessionManager GET:url parameters:nil progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {
        NSData *imageData = responseObject;
        UIImage *image = [UIImage imageWithData:imageData];
        if (image&&!CGRectEqualToRect(imageFrame, CGRectZero)) {
            UIGraphicsBeginImageContext(imageFrame.size);
            [image drawInRect:imageFrame];
            image = UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();
        }
        completedBlock(image,nil,YES);
    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
        completedBlock(nil,error,YES);
    }];
    return self;
}

- (void)cancel {
    [self.dataTask cancel];
}

- (AFHTTPSessionManager *)sessionManager {
    if (!_sessionManager) {
        _sessionManager = [AFHTTPSessionManager manager];
        _sessionManager.responseSerializer = [AFHTTPResponseSerializer serializer];
    }
    return _sessionManager;
}

這個PCImageLoader類就是didFinishLaunchingWithOptions注冊的組件

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

終于在ios上顯示出來了

96F52208-6112-4890-BC5D-482DF7B0AAD5

3.學習下weex的內(nèi)建組件

  • a
  • slider
  • indicator
  • switch
  • text
  • textarea
  • video
  • web
  • div
  • image
  • waterfall
  • input
  • list
  • cell
  • loading
  • refresh
  • scroller

a

<template>
    <div class="wrapper">
        <a  class="button">
            <text class="text">jump</text>
        </a>
    </div>
</template>

<style scoped>
    .wrapper {
        flex-direction: column;
        justify-content: center;
    }
    .button {
        width: 450px;
        margin-top: 30px;
        margin-left: 150px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-width: 2px;
        border-style: solid;
        border-color: #dddddd;
        background-color: #f5f5f5;
    }
    .text {
        font-size: 60px;
        color: #666666;
        text-align: center;
    }
</style>
AB29D0E4-49EE-41A4-987B-230FACBF803C

這里為什么要一個template括起來,還沒搞懂

slider

<template>
    <div>
        <slider class="slider" interval="2000" auto-play="true">
            <div class="frame" v-for="img in imageList">
                <image class="image" resize="cover" :src="img.src"></image>
            </div>
        </slider>
    </div>
</template>

<style scoped>
    .image {
        width: 700px;
        height: 400px;
    }
    .slider {
        width: 700px;
        height: 400px;
        border-width: 1px;
        border-style: solid;
        border-color: #ff0000;
    }
    .frame {
        width: 700px;
        height: 400px;
        position: relative;
    }
</style>

<script>
    export default {
        data() {
            return {
                imageList: [
                    {src: 'https://ws3.sinaimg.cn/large/006tKfTcgy1fl9otrz92fj30yi1pcgn1.jpg'},
                    {src: 'https://ws3.sinaimg.cn/large/006tKfTcgy1fl9otrz92fj30yi1pcgn1.jpg'},
                    {src: 'https://ws3.sinaimg.cn/large/006tKfTcgy1fl9otrz92fj30yi1pcgn1.jpg'}
                ]
            }
        }
    }
</script>
8AFEB43A-40D6-4125-9973-73C165BBE22E

這里為什么width不能設成100%的?寫死像素,那怎么適配各種屏幕?

indicator

<template>
    <div>
        <slider class="slider" interval="4500" @change="onchange">
            <div class="frame" v-for="img in imageList">
                <image class="image" resize="cover" :src="img.src"></image>
                <text class="title">{{ img.title }}</text>
            </div>
            <indicator class="indicator"></indicator>
        </slider>
    </div>
</template>

<style>
    .image {
        width: 700px;
        height: 400px;
    }
    .slider {
        width: 700px;
        height: 400%;
    }
    .title {
        position: absolute;
        top: 20px;
        left: 20px;
        padding-left: 20px;
        width: 200px;
        color: white;
        font-size: 36px;
        line-height: 60px;
        background-color: rgba(0,0,0,0.3);
    }
    .frame {
        width: 700px;
        height: 400px;
        position: relative;
    }
    .indicator {
        width: 700px;
        height: 400px;
        item-color: green;
        item-selected-color: red;
        item-size: 50px;
        position: absolute;
        top: 200px;
        left: 200px;
    }
</style>

<script>
    export default {
        data() {
            return {
                imageList: [
                  { title: 'item A', src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
                  { title: 'item B', src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
                  { title: 'item C', src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
                ]
            }
        },
        methods: {
            onchange(event) {
                console.log('changed: ', event.index0)
            }
        }
    }
</script>
B62F4C17-9391-4167-AEBF-73E9E7713825

switch

<template>
    <div>
        <div class="example">
            <text class="label">normal</text>
            <switch></switch>
        </div>
        <div class="example">
            <text class="label">checked</text>
            <switch checked="true"></switch>
        </div>
        <div class="example">
            <text class="label">disabled</text>
            <switch disabled="true" checked="true"></switch>
            <switch disabled="true"></switch>
        </div>
        <div class="example">
            <text class="label">onchange</text>
            <switch @change="onchange"></switch>
            <text class="info">{{checked}}</text>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                checked: false
            }
        },
        methods: {
            onchange(event) {
                console.log('onchange, value: $(event.value}')
                this.checked = event.value
            }
        }
    }
</script>

<style scoped>
    .example {
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 60px;
    }
    .label {
        font-size: 40px;
        line-height: 60px;
        width: 350px;
        color: #666;
        text-align: right;
        margin-right: 20px;
    }
    .info {
        font-size: 30px;
        line-height: 60px;
        color: #bbb;
        margin-left: 10px;
    }
</style>
403824B9-7B4B-442B-9BFA-89E287BB280F

text

<template>
    <div class="wrapper">
        <div class="panel">
            <text class="text" lines="3">
                Weex 是一套簡單易用的跨平臺開發(fā)方案，能以 Web 的開發(fā)體驗構(gòu)建高性能、可擴展的原生應用。Vue 是一個輕量并且功能強大的漸進式前端框架。
            </text>
        </div>
        <div class="panel">
            <text class="text" lines="3">
                Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. 
            </text>
        </div>
    </div>
</template>

<style scoped>
    .wrapper {
        flex-direction: column;
        justify-content: center;
    }
    .panel {
        width: 600px;
        margin-left: 75px;
        border-width: 2px;
        border-style: solid;
        border-color: #bbb;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 15px;
    }
    .text {
        lines: 3;
        color: #666666;
        font-size: 32px;
    }
</style>
B54F99B1-2B2D-41B4-98DE-38B7DBC8033A

textarea

<template>
    <div class="wrapper">
        <textarea class="textarea" 
                  @input="oninput"
                  @change="onchange"
                  @focus="onfocus"
                  @blur="onblur"></textarea>
    </div>
</template>

<script>
    const model = weex.requireModule('modal')

    export default {
        methods: {
            oninput(event) {
                console.log('oninput: ', event.value)
                modal.toast({
                    message: 'oninput: ${event.value}',
                    duration: 1.0
                })
            },
            onchange(event) {
                console.log('onchange: ', event.value)
                modal.toast({
                    message: 'onchange: ${event.value}',
                    duration: 1.0
                })
            },
            onfocus(event) {
                console.log('onfocus: ', event.value)
                modal.toast({
                    message: 'onfocus: ${event.value}',
                    duration: 1.0
                })
            },
            onblur(event) {
                console.log('onblur: ', event.value)
                modal.toast({
                    message: 'input blur: ${event.value}',
                    duration: 1.0
                })
            }
        }
    }
</script>

<style>
    .textarea {
        font-size: 50px;
        width: 650px;
        margin-top: 50px;
        margin-left: 50px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        color: #666666;
        border-width: 2px;
        border-style: solid;
        border-collapse: #41b883;
    }
</style>
E11522E6-647F-4F01-8870-9DA7E73B1693

video

<template>
    <div>
        <video class="video"
               :src="src"
               autoplay
               controls
               @start="onstart"
               @pause="onpause"
               @finish="onfinish"
               @fail="onfail"></video>
        <text class="info">
            state: {{state}}
        </text>
    </div>
</template>

<style scoped>
    .video {
        width: 630px;
        height: 350px;
        margin-top: 60px;
        margin-left: 60px;
    }
    .info {
        margin-top: 40px;
        font-size: 40px;
        text-align: center;
    }
</style>

<script>
    export default {
        data() {
            return {
                state: '----',
                src: 'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
            }
        },
        methods: {
            onstart(event) {
                this.state = 'onstart'
            },
            onpause(event) {
                this.state = 'onpause'
            },
            onfinish(event) {
                this.state = 'onfinish'
            },
            onfail(event) {
                this.state = 'onfail'
            }
        }
    }
</script>
C9C1FD6F-729C-445B-A833-FCF97F294290

這里發(fā)現(xiàn)一個神奇的問題,點擊播放和停止經(jīng)常沒反應.

用weex playground掃就不會出現(xiàn)這個問題.

4.實踐下

這樣跟著文檔一個個去熟悉組件效率太低了.

還不如直接在項目里把原生的頁面用weex實現(xiàn).

現(xiàn)在都是寫好we代碼然后轉(zhuǎn)成js代碼,放到項目里運行,這樣開發(fā)效率好低,應該可以直接把js代碼寫到項目里讓weexsdk解析的.

先記錄到這里,下一篇繼續(xù)...

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容