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
在线编辑这里可以生成对应的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
a
<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解析的.
先记录到这里,下一篇继续...
网友评论