weex使用记录1

作者: Do_More | 来源:发表于2017-11-08 10:27 被阅读0次

weex使用记录1
（26）打鸡儿教你Vue.js
weex打包Android和IOS
关于weex环境搭建坑，对应方案
Weex框架浅析
weex 初始化时报错 Cannot find module
weex 踩坑记（持续更新中……）
深入Weex系列（四）之Module组件源码解析
Weex爬坑之路
Weex入门踩坑记录

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

我是今天才使用,已经是最新版了,但是还是有问题.

问了饿了吗的开发(因为他们是用native+weex的),他们建议我用chrome调试下

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

这个也是根据文档写的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的内建组件

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

<template>
    <div class="wrapper">
        <a href="http://dotwe.org/raw/dist/3e0e40f9ddad79f98cd236753965ffd8.js" 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 是一套简单易用的跨平台开发方案，能以 Web 的开发体验构建高性能、可扩展的原生应用。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

这里发现一个神奇的问题,点击播放和停止经常没反应.

用weex playground扫就不会出现这个问题.

4.实践下

这样跟着文档一个个去熟悉组件效率太低了.

还不如直接在项目里把原生的页面用weex实现.

现在都是写好we代码然后转成js代码,放到项目里运行,这样开发效率好低,应该可以直接把js代码写到项目里让weexsdk解析的.

先记录到这里,下一篇继续...

weex使用记录1
1.ios接入WeexSDK 利用cocoapod管理然后在(BOOL)application:(UIAppli...
（26）打鸡儿教你Vue.js
weex框架的使用 1、weex开发入门2、weex开发环境搭建3、掌握部分weex组件模块4、了解一些vue基本...
weex打包Android和IOS
1.安装weex 安装结束后你可以直接使用 weex help 命令验证是否安装成功，它会显示 weex 支持的所...
关于weex环境搭建坑，对应方案
记录如何用weex-toolkit搭建weexDemo环境 weex create myWeex weex pla...
Weex框架浅析
1，Weex 是什么？ Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架，Weex 致力于使开...
weex 初始化时报错 Cannot find module
全局安装weex-toolkitnpm install weex-toolkit -g 成功安装后，使用weex ...
weex 踩坑记（持续更新中……）
消失了一个月，努力为新项目倒腾 weex 中，记录一下遇到的问题。之后还会持续更新~ 目前，我使用的 weex 都...
深入Weex系列（四）之Module组件源码解析
1、前言经过前面两篇文章的实践，我们学习了Weex的使用。本篇开始我们深入Weex的源码，一起探索Weex在安卓...
Weex爬坑之路
简单描述一下公司使用weex初衷和记录weex开发中遇到的问题,用作以后回顾; 移动端最大的缺点就是更新版本,整包...
Weex入门踩坑记录
Weex入门踩坑记录