2019-02-11 15 Weex基础
语法基础
// div, text均以原生组件渲染
<template>
<div style="justify-content:center">
<text class="">venciallee</text>
</div>
</template>
//CSS样式, scoped表示只能作用于当前组件
<style scoped>
.freestyle {
color: #41B883;
font-size: 233px;
text-align: center;
}
</style>
- 原生模块,
weex.requireModule('xxx'), 加载模块
- 集成到Android平台
compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.alibaba:fastjson:1.1.46.android'
compile 'com.taobao.android:weex_sdk:0.5.1@aar'
public class ImageAdapter implements IWXImgLoaderAdapter {
@Override
public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
//实现你自己的图片下载，否则图片无法显示。
}
}
// 必须实现ImageAdapter否则图片无法下载
public class WXApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this, config);
}
}
// 渲染
public class MainActivity extends AppCompatActivity implements IWXRenderListener {
WXSDKInstance mWXSDKInstance;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWXSDKInstance = new WXSDKInstance(this);
//渲染回调...
mWXSDKInstance.registerRenderListener(this);
// 渲染代码, 可渲染本地/远端js文件, 即.we transform后的js文件
mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.js",this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
}
@Override
public void onRenderSuccess(WXSDKInstance instance, int width, int height) {}
@Override
public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {}
@Override
public void onException(WXSDKInstance instance, String errCode, String msg) {}
// activity生命周期传递, 这里忽略
}
source 'git@github.com:CocoaPods/Specs.git'
target 'YourTarget' do
platform :ios, '7.0'
pod 'WeexSDK', '0.17.0' ## 建议使用WeexSDK新版本
end
// 初始化, 在AppDelegate.m的didFinishLaunchingWithOptions方法
[WXAppConfigration setAppGroup:@"AliApp"];
[WXAppConfigration setAppName:@"WeexDemo"];
[WXAppConfigration setAppVersion:@"1.0.0"];
// init sdk environments
[WXSDKEngine initSDKEnvironment];
// register module & component
[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
//register the implementation of protocol, optional
[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
// 渲染
#import <WeexSDK/WXSDKInstance.h>
- (void)viewDidLoad
{
[super viewDidLoad];
_instance = [[WXSDKInstance alloc] init];
_instance.viewController = self;
_instance.frame = self.view.frame;
_weak typeof(self) weakSelf = self;
_instance.onCreate = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
weakSelf.weexView = view;
[weakSelf.view addSubview:weakSelf.weexView];
};
_instance.onFailed = ^(NSError *error) {
// process error
};
_instance.renderFinish = ^ (UIView *view) {
// process finish
};
NSURL *url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"js"];
[_instance renderWithUrl:url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
}
扩展功能（Android）
public class MyModule extends WXModule {
//run ui thread
@JSMethod(uiThread true)
public void printLog(String msg) {
xxx
}
// run js thread
@JSMethod(uiThread false)
public void fireEventSyncCall() {
xxx
}
}
// 必须注册模块, Register the module
WXSDKEngine.registerModule("MyModule", MyModule.class);
<template>
<div>
<text onClick="click">testMyModule</text>
</div>
</template>
<script>
module.exports = {
methods: {
click:function() {
weex.requireModule("MyModule").printLog("I am WeexModule");
}
}
};
</script>
public class RichText extends WXComponent<TextView> {
public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) {
super(instance, dom, parent);
}
@Override
protected TextView initComponentHostView(@NonNull Context context) {
xxx
return textView;
}
@WXComponentProp(name = "tel")
public void setTel(String telNumber) {
getHostView().setText("tel: " + telNumber);
}
}
// 必须注册控件
WXSDKEngine.registerComponent("richText", RichText.class);
<template>
<div>
<richText tel="12305" style="width:200;height:100">12305</richText>
</div>
</template>
- Adapter扩展Weex对基础功能实现了统一的接口, 如图片下载
public class ImageAdapter implements IWXImgLoaderAdapter {
public ImageAdapter() {
}
@Override
public void setImage(final String url, final ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
WXSDKManager.getInstance().postOnUiThread(new Runnable() {
@Override
public void run() {
xxx
}
});
}
}
工作原理
内置控件
<a href = "http://vencial.com/">
<text>Jump</text>
</a>
<div>, 通用容器, 盒模型, 可以理解为layout<text>, 显示文本
<text>vencial</text>
<image> 显示图片<list> 垂直列表<cell> 子控件, 存在于list、recycler、waterfall<loading> 上拉加载功能, 存在于list、scroller、waterfall<refresh> 下拉刷新功能, 存在于list、scroller、waterfall<recycle-list>回收和复用的列表容器<scroller> 滚动容器控件<slide> 实现轮播容器<indicator> 指示器, 只能在slide使用<textarea> 多行文本输入控件<input> 输入框<waterfall> 瀑布流布局控件<video> 视频控件<web> 展示网页控件<richText> 富文本控件
内置模块
animation, 组件动画, 包含简单变换（位置、大小、旋转角度、背景颜色和不透明度）
animation.transition(ref1, {
styles: {
backgroundColor: '#FF0000',
transform: 'translate(250px, 100px)'
},
duration: 800,
timingFunction: 'ease',
needLayout:false,
delay: 0
}, function() {
modal.toast({message: 'animation finished.'})
}
})
clipboard, 剪切板, getString()获取剪切板内容, setString()设置剪切板内容dom, 用于对weex页面组件节点进行特定操作
scrollToElement, 滚动到子节点getComponent, 获取组件的bounding rect布局信息addRule, 添加font-face rulegetLayoutDirection, 获取组件布局方向(rtl, lrt, inherit)
globalEvent, 全局事件监听, 如定位信息、陀螺仪等
var globalEvent = weex.requireModule('globalEvent');
globalEvent.addEventListener('WXApplicationDidBecomeActiveEvent', function(e) {
...
});
meta, 获取页面元数据, 如页面配置(容器显示宽度viewport)modal, 展示消息框, 如toast、alert、 confirm和promptnavigator, 页面前后切换功能, 包含push和poppicker, 数据选择, 日期选择, 时间选择storage, 本地存储stream, 网络请求webview, 渲染web页面webSocket, 双向数据传输HTTP协议
样式
- 通用样式
- 盒模型, 基于CSS盒模型, 包含内边距, 外边距, 边框
- 布局模型基于CSS Flexbox
事件
