Weex 是什么
Weex is a extendable cross-platform solution for dynamic programming and publishing projects. Weex是针对动态编程和发布项目的一个可扩展、跨平台的解决方案。
这是来自Weex Document的介绍。这句话个人感觉还是非常有诱惑力的。为什么?击中移动端开发两个痛点。
Meet weex
For android
Prerequisites
综上所述,首先需要安装node.js4.0+环境。然后安装weex-toolkit工具生成.we文件,使用Playground.apk进行扫一扫安装到手机端进行调试。 也可以使用weex-devtools(android)使用chrome浏览器进行调试 官方中文版本环境搭建及demo运行Weex快速上手教程(Weex Tutorial) weex启动及界面渲染流程图 初始化过程
初始化过程png
启动调用过程
启动调用过程.png
效果果然达到了write once,run everywhere!而且运行效果可以与原声媲美,并且virtual dom的加入更加优化了性能问题,切对native扩展等提供了很好的预留,目前可以采用组件形式与全页形式进行集成。
1. BaseApplication 初始化SDK 引擎
WXSDKEngine.init(this, null, null, new ImageAdapter(), null);
WXSDKEngine初始化了三件事:
1、初始化so库文件,渲染逻辑、脚本业务框架等都封装在了这里;
2、初始化initScriptsFramework : 初始化脚本框架;
3、register 操作,初始化weex组件与module;
private void renderWX() {
Rect outRect = new Rect();
getWindow().getDecorView().getWindowVisibleDisplayFrame(outRect);
if (instance != null) {
instance.destroy();
instance = null;
}
instance = new WXSDKInstance(this);
instance.registerRenderListener(this);
Map<String, Object> options = new HashMap<>();
options.put("bundleUrl", WEEX_INDEX_URL);
instance.renderByUrl(TAG, WEEX_INDEX_URL, options, null, ScreenUtil.getDisplayWidth(this),
ScreenUtil.getDisplayHeight(this), WXRenderStrategy.APPEND_ASYNC);
}
首先看这个方法,可以在activity oncreate中被调用,可以清楚的看到,注册了渲染监听器,以及传入了当前屏幕的宽高及url,可以猜测weex的适配方案采用的是百分比方案。
2. WXSDKInstance
renderByUrl 方法内调用了httpadapter进行加载url,并且拼装了user-agent header参数;
3. DefaultWXHttpAdapter
网络处理 其实就是一个封装的简单的网络请求工具类,把请求下来的json数据回调给WXSDKInstance
4. WXSDKInstance render 方法进行view的创建初始化
5. WXSDKManager createInstance
1、将json数据与instanceId添加到renderManager中;
2、使用bridge桥接管理器进行UI绘制;
6. WXBridge 作用: execJS 调用 so库方法执行JS脚本,进行UI渲染;
最后提供与React Native的比较: 挺好的问题:
weex平台一致化看起来比较牛掰,,,,,