Weex学习与实践
Weex学习与实践(一):Weex,你需要知道的事
本文主要介绍包括Weex基本介绍、Weex源码结构、初始化工程、we代码结构、Weex的生命周期、Weex的工作原理、页面间通信、boxmodel & flexbox、weex的缺点
基本介绍
A framework for building Mobile cross-platform UI
怎么解释它呢?我的理解就是weex = react-native +vue ,使用vue的API风格,两端的实现方式则和react-native,weex 比rn的优点就是一次编写三端运行。
IDE: Sublime Text + vue-syntax-highlight
命令行工具:weex-toolkit
调试工具: weex-devtool
weex分为组件component和模块(module)以及事件
weex-components : weex-components
组件 就是各种标记组件,比如div 、slider、indicator等 通过下面这种方式使用
<div>
<image src="..."></image>
<text>...</text>
</div>
js模块
let modal = require('@weex-module/modal');
modal.toast({
"message":"我是提示框",
"duration":2
});
其他的还有stream,dom,animation之类的
事件
<div onviewappear="viewappear" onviewdisappear="viewdisappear">
...
</div>
Weex源码结构
package.json
node_modules依赖,更重要的是里面包含了npm run xxx 等快捷命令。比如之前我们运行node.js程序是这样的:$ node xx.js。这里我们可以把它配置化,例如package.json文件中scripts的 “build:config”: “node build/config.frameworks.js”,其实就是npm run build:config 相当于执行了node build/config.frameworks.js
start文件: 启动程序文件,里面包换编译和启动脚本:
examples: 示例Demo
android/ios/html: 各平台代码
build:打包各平台的脚本,配置在package.json中。
初始化工程
初始化工程前需要先安装 homebrew,然后按照下面步骤创建一个工程。
$ brew install node //通过brew安装node
$ npm install -g weex-toolkit //通过node安装 weex-toolkit
$ sudo gem install cocoapods //安装iOS包管理工具 cocoapods
$ weex init //创建项目的文件
$ npm install //依赖安装 package.json文件
$ npm run dev //项目编译
$ npm run serve //启动轻量服务器
这时有可能提示
npm WARN babel-loader@6.2.5 requires a peer of babel-core@^6.0.0 but none was installed.
你需要再
npm install babel-core
这时,打开浏览器,输入http://127.0.0.1:8080, 就会看到这个项目的效果:
参考链接:第3篇 初始化工程
npm run dev 干了什么呢?
先看 package.json 文件
{ "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack", "dev": "webpack --watch", "serve": "serve -p 8080", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "serve": "^1.4.0", "webpack": "^1.13.1", "weex-html5": "0.2.18", "weex-loader": "^0.1.5" } }
npm run dev实际上相当于 webpack –watch
webpack实际上是执行了默认的webpack.config.js配置文件
webpack.config.js 引入webpack和weex-loader,entry属性是表示入口文件,output表示输出文件,默认输出到dist文件夹。
require('webpack') require('weex-loader') var path = require('path') module.exports = { entry: { main: path.join(__dirname, 'src', 'main.we?entry=true') }, output: { path: 'dist', filename: '[name].js' }, module: { loaders: [ { test: /\.we(\?[^?]+)?$/, loaders: ['weex-loader'] } ] } }
不过这个自动产生的webpack.config.js的文件有个坑就是,你添加一个新的we文件,他不会自动build为js文件 可以手动添加 entry: { main: path.join(__dirname, 'src', 'main.we?entry=true'), translate: path.join(__dirname, 'src', 'translate.we?entry=true') }
不过推荐的是自己遍历所有的we文件
require('webpack')
require('weex-loader')
var path = require('path')
var fs = require('fs');
var entry = {};
function walk(dir, root) {
var directory = path.join(__dirname, root, dir);
fs.readdirSync(directory)
.forEach(function(file) {
var fullpath = path.join(directory, file);
var stat = fs.statSync(fullpath);
var extname = path.extname(fullpath);
if (stat.isFile() &&
(extname === '.we')) {
var name = path.join(root, 'build', dir, path.basename(file, extname));
entry[name] = fullpath + '?entry=true';
} else if (stat.isDirectory() &&
file !== 'build') {
var subdir = path.join(dir, file);
walk(subdir, root);
}
});
}
walk('./', 'src');
module.exports = {
entry: entry,
output: {
path: '.',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.we(\?[^?]+)?$/,
loaders: ['weex-loader']
}
]
}
}
duqian291902259 - webpack.config.js 第3篇 初始化工程
入口文件index.html
这里可以参考 Integrate Weex HTML5 to your project
we代码结构
template内必须包含唯一的根节点作为父容器, div就是一个很好的选择,里面则是一些Native Components
style 支持盒子模型和Flexbox
weex内置了响应式的支持,页面的宽度是以750来做为标准,自动适配所有手机;
<template>
<div>
<div>子组件</div>
<div>子组件</div>
</div>
</template>
<style>
</style>
<script>
module.exports = {
data: function () {
return {
x: 1,
y: 2
}
}
methods: {
foo: function () {
console.log('foo')
}
},
computed: {
z: function () {
return this.x + this.y
}
},
events: {
custom: function (e) {
console.log(e)
}
},
init: function () {},
created: function () {},
ready: function () {}
}
</script>
script里面包含很多ViewModel Options,
data methods computed init, created, ready events
如果需要在模板里实现更多的逻辑判断,你可以使用’computed property’.
created是生命周期函数,这个时候模板还没有被渲染,常用来在这里定义数据的更新和获取;
ready是生命周期函数,这个时候模板被渲染,常用来做一些自己上报等;
weex- references - Weex Cheat Sheet
显然we文件的这些代码是不会被 native app 识别的,我们要想办法让这些代码可运行。所以我们同时做了三件事:
1.在本地用一个叫做 transformer 的工具把这套代码转成纯 JavaScript 代码
2.在客户端运行一个 JavaScript 引擎,随时接收 JavaScript 代码
3.在客户端设计一套 JS Bridge,让 native 代码可以和 JavaScript 引擎相互通信
所以紧接着第二步,就是用 transformer 对代码进行转换,变成客户端可运行的 JavaScript 代码
原图:本地开发时的 Weex Transformer 工作原理
在 transformer 中,我们主要的工作就是对 HTML、CSS、JavaScript 代码进行解析和重组。这里我们用到了三个非常重要的库:
HTML 解析工具:htmlparser
CSS 解析工具:cssom
JavaScript 解析工具:uglify-js
Weex的生命周期
<script>
module.exports = {
data: {},
methods: {},
init: function () {
console.log('在初始化内部变量,并且添加了事件功能后被触发');
},
created: function () {
console.log('完成数据绑定之后,模板编译之前被触发');
},
ready: function () {
console.log('模板已经编译并且生成了 Virtual DOM 之后被触发');
},
destroyed: function () {
console.log('在页面被销毁时调用');
}
}
</script>
init内一般用于初始化一些内部变量,绑定一些自定义事件,这时还没有数据绑定,没有创建vdom,所以不能通过this获取到data和methods,也不能获取vdom的节点
created 完成了数据绑定 ,但还未开始编译模板,可以通过this获取data和methods,但不能获取vdom的节点
ready表示渲染完成 ,从子组件往上触发
destroyed 组件销毁,比如页面跳转,从子组件开始往上触发
Weex的工作原理
页面间通信
页面跳转是通过指定下一个页面的url,然后通过openurl或者push的方式来跳转
获取url的方式可以通过下面这段JS代码
function getAppBaseUrl(self) {
var dir ='examples'
var url = self.$getConfig().bundleUrl;
var bundleUrl = url;
bundleUrl = new String(bundleUrl);
var nativeBase;
var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
var isiOSAssets = bundleUrl.indexOf('file:///') >= 0;
if (isAndroidAssets) {
nativeBase = 'file://assets/';
}
else if (isiOSAssets) {
nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
}
else {
var host = 'localhost:12580';
var matches = /\/\/([^\/]+?)\//.exec(self.$getConfig().bundleUrl);
if (matches && matches.length >= 2) {
host = matches[1];
}
nativeBase = 'http://' + host + '/' + dir + '/build/';
}
var h5Base = './index.html?page=./' + dir + '/build/';
//Native端
var base = nativeBase;
//H5端
if (typeof window === 'object') {
base = h5Base;
}
return base
}
页面通信有两种方式
1.通过 url 参数传递。
/**
* 获取URL参数
*/
getUrlParam: function (key) {
var t = this.$getConfig().bundleUrl;
var reg = new RegExp('[?|&]' + key + '=([^&]+)');
var match = t.match(reg);
return match && match[1];
}
2.通过 localStorage 数据存储。
如果是组件间通信不是页面通信,则参考:组件之间通信 - (Communicate Between Components)
boxmodel & flexbox
weex支持boxmodel 和flexbox
下面这个是boxmodel
关于flexbox,可以看我的这篇文章react-native的第一课 - flexbox布局
weex的缺点
1.Weex将整个app的宽度定死在750px,然后其他都是根据scale进行计算的,会导致适配不方便。
2.目前不支持iOS的presentViewController方法
3.很多组件和模块需要自己扩展(比如datepicker,iconfont,摄像头,二维码等)
几个小问题
1.之前weex是只支持es5,现在可以支持es6了。精华 新版weex-loader@0.3.0-alpha,欢迎试用
2.怎么断点调试?
目前是可以断点调试的,可以参考下面文章
3.weex支持本地图片吗?
根据官方答疑是可以的,但是我目前还没有尝试成功。
4.weex-x的使用?
5.promise怎么使用?
6.热更新方案是什么?
最后,希望有越来越多的人把weex用起来。
转载请注原文链接:http://coderyi.com/posts/weex1/
Weex学习与实践(二):iOS集成的tips
本文主要介绍包括iOS上集成Weex、iOS上扩展组件、iOS上扩展module
iOS上集成Weex
集成weex,需要WeexSDK、WXDevtool两个库以及阿里未开源的ATSDK-Weex。
目前官方的alibaba/Weex仓库里面
pod 'WeexSDK', :path=>'../sdk/'
pod 'WXDevtool', :path=>'../WXDevtool/'
pod 'ATSDK-Weex', '0.0.1'
它们直接使用的weex仓库的sdk,但是weex主仓库的WXDevtool已经不维护了,需要替换成,weexteam/weex-devtool-iOS的代码。
另外也可以直接从cocoapods的源pod仓库,但是cocoapods的源都是打包成framwork,很多文件并没有设置为public,所以导致很多头文件没有暴露出来。
当然你也可以不用通过cocoapods集成,直接把代码拉进工程就可以,如果发生 Unknown type name 'NSString'
你可能需要把layout.c文件右侧的type改为Objective-C Source,或者直接修改为layout.m。
基本上JS页面是在WXDemoViewController工作的,你可能需要接收页面刷新的通知,以支持实时刷新[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(notificationRefreshInstance:) name:@"RefreshInstance" object:nil];
页面会维护一个WXSDKInstance实例,WXSDKInstance就是weex渲染的实例对象,提供了很多页面渲染相关的接口,比如renderWithURL、refreshInstance、destroyInstance等
weex SDK 集成到工程 (integrate to ios)
iOS上扩展组件
目前官方iOS这一块组件的代码在WeexSDK的component里面,组件有限,只有image,list,scroller等,如果想要实现自己的组件,首先需要继承WXComponent类。
然后实现方法
- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{}
注意这个方法不在主线程,这里面接收一些js传过来的参数,以在js端写的image标记为例子
<image style="width: 100;height: 100;margin-top:20;margin-right:20;margin-left:220" src=></image>
到objc端就是
ref:701
type:image
styles:
{
height = 100;
marginLeft = 220;
marginRight = 20;
marginTop = 20;
width = 100;
}
attributes:
{
src = "https://avatars.githubusercontent.com/u/9892522?v=3";
}
ref(结点的唯一标识符)
然后在loadView的时候可能需要返回自己的objc组件
- (UIView *)loadView
{
return [[WXImageView alloc] init];
}
然后你可以通过复写addEvent方法来增加一个change(UIControlEventValueChanged)、click(UIControlEventTouchUpInside)等事件
如果是image组件的话,你可能需要接收图片地址,这个时候需要通过实现了WXImgLoaderProtocol的WXImgLoaderDefaultImpl来处理,WXImgLoaderDefaultImpl实现了downloadImageWithURL方法,这里面通过SDWebImage来下载一张图片。
iOS上扩展module
这一块的代码在module分组里面,包括网络库stream,持久化storage等,你可以扩展自己module。
需要做的是实现WXModuleProtocol协议,并且写自己的方法就可以了,这里需要通过weex的宏把需要public的方法导出
WX_EXPORT_METHOD(@selector(fetch:callback:progressCallback:))
在module中目前是没有view的,但是你可以通过由js传过来的ref值拿到
WXComponent *targetComponent = [self.weexInstance componentForRef:nodeRef];
CALayer *layer = targetComponent.layer;
UIView *view = targetComponent.view;
注意点
1.如果设置js文件在bundle中载入的话,需要把build的js文件拖入工程,如果的你的we里面一开始就调用了js文件,由于只会buildwe文件,所以还需要把之前的js文件拖入工程,另外examples里面判断iOSAssets是这样的
var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
你如果拖入自己的工程需要把WeexDemo.app的判断去掉
转载请注原文链接:http://coderyi.com/posts/weex2/
3、Weex学习与实践(三):iOS原理篇
本文主要介绍包括WeexSDK-iOS主要类介绍、Weex页面iOS端渲染流程、JS调用iOS方法
主要类
WXSDKEngine
WXSDKEngine主要用于初始化WeexSDK的环境
一开始会载入配置文件main.js并且注册一些默认的组件、模块以及handler
+ (void)initSDKEnviroment:(NSString *)script { [self _registerDefaultComponents]; [self _registerDefaultModules]; [self _registerDefaultHandlers]; [[WXSDKManager bridgeMgr] executeJsFramework:script]; }
WXSDKInstance
一个WXSDKInstance就对应一个UIViewController,对应一个weex页面。
主要用来渲染页面,一般通过renderWithURL方法,然后能够接收一些回调和一些视图相关的方法
onCreate //根视图rootView创建的时候
renderFinish//视图渲染完成
componentForRef //通过视图索引拿到对应的组件视图
WXBridgeManager
WXBridgeManager 是JS与iOS通过JSCore交互的类,相关的类还有WXBridgeContext、WXJSCoreBridge。
比如调用JS
- (void)executeJsMethod:(WXBridgeMethod *)method
{
if (!method) return;
__weak typeof(self) weakSelf = self;
WXPerformBlockOnBridgeThread(^(){
[weakSelf.bridgeCtx executeJsMethod:method];
});
}
JS调用native的话需要通过WXJSCoreBridge的registerCallNative方法
WXComponent
组件基类,自己实现iOS端的组件需要继承它。相关的还有负责组件初始化的工厂类WXComponentFactory,以及WXComponentManager
WXModuleProtocol
自定义module需要实现的协议
Weex页面iOS端渲染流程
首先在ViewController里的render放初始化WXSDKInstance,因为render会支持实时刷新,所以每次都需要先销毁这个实例。
[_instance destroyInstance];
_instance = [[WXSDKInstance alloc] init];
然后WXSDKManager会保存instanceId
[WXSDKManager storeInstance:self forID:_instanceId];
然后会调用renderWithURL方法来载入script,在这里会判断是本地文件还是需要从服务器下载,
- (void)renderWithURL:(NSURL *)url options:(NSDictionary *)options data:(id)data{
if ([url isFileURL]) {
//from local
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
NSString *path = [url path];
NSData *scriptData = [[NSFileManager defaultManager] contentsAtPath:path];
NSString *script = [[NSString alloc] initWithData:scriptData encoding:NSUTF8StringEncoding];
[weakSelf renderView:script options:newOptions data:data];
});
}else{
//from server
}
}
然后就会根据script文件渲染视图
[weakSelf renderView:script options:newOptions data:data];
在这个方法里面首先会创建根视图,当创建完成时WXSDKInstance会收到onCreate的回调
//TODO WXRootView
WXPerformBlockOnMainThread(^{
self.rootView = [[WXView alloc] initWithFrame:self.frame];
if(self.onCreate) {
self.onCreate(self.rootView);
}
});
之后再通过bridge调用JS方法来开始创建实例
[self callJSMethod:@"createInstance" args:args];
然后这里会判断JSFramework也就是main.js有没有加载完成,然后再通过WXJSBridge的JSContext来执行js方法
- (void)callJSMethod:(NSString *)method args:(NSArray *)args
{
[[_jsContext globalObject] invokeMethod:method withArguments:args];
}
最后main.js会调用WXSDKInstance的createFinish方法来结束页面的渲染
JS调用iOS方法
首先要注册一个组件
[self registerModule:@"dom" withClass:NSClassFromString(@"WXDomModule")];
注册module的时候 会通过下面方法
+ (void)registerModule:(NSString *)name withClass:(Class)clazz
{
WXAssert(name && clazz, @"Fail to register the module, please check if the parameters are correct !");
NSString *moduleName = [WXModuleFactory registerModule:name withClass:clazz];
NSDictionary *dict = [WXModuleFactory moduleMethodMapsWithName:moduleName];
[[WXSDKManager bridgeMgr] registerModules:dict];
}
把所有通过宏注册的方法发送给js端
WX_EXPORT_METHOD(@selector(createBody:))
这会把方法暴露出来,并且方法名字是”wx_export_method_“加代码所在行号,wx_export_method_25
组件、模块 是给js端用的,而handler则是给objc自己用的,所以不用发送消息给js端
然后通过methodForSelector拿到WX_EXPORT_METHOD方法的返回值,并且保存到methods中
- (void)registerModuleMethods {
if ([currentClass respondsToSelector:selector]) {
method = ((NSString* (*)(id, SEL))[currentClass methodForSelector:selector])(currentClass, selector);
}
[_methods setObject:method forKey:name];
}
然后拿到WXModuleConfig组成的_moduleMap之后再发送给JS端
[[WXSDKManager bridgeMgr] registerModules:dict];
最后需要自己callNative的回调,当JS调用时就会传值到这里
- (void)registerCallNative:(WXJSCallNative)callNative
{
NSInteger (^callNativeBlock)(JSValue *, JSValue *, JSValue *) = ^(JSValue *instance, JSValue *tasks, JSValue *callback){
NSString *instanceId = [instance toString];
NSArray *tasksArray = [tasks toArray];
NSString *callbackId = [callback toString];
return callNative(instanceId, tasksArray, callbackId);
};
_jsContext[@"callNative"] = callNativeBlock;
}
tasks里面包括方法的一些相关信息,包括module(比如dom),method(比如updateFinish),args
weex-devtool-iOS
weex-devtool-iOS 其实是 PonyDebugger的衍生品。
转载请注原文链接:http://coderyi.com/posts/weex3/