Weex 是一个跨栈的技术,栈:前端开发、Vue.js、iOS和Android。
一、工作原理
Weex端:整一个串联本地,云端,分发整个链路的技术,使本地可以像写web页面一样编写app。命令行使之编译成一段JavaScript代码,生成一个Weex的JS bundle,部署到云端。客户端通过下载之,Weex SDK准备好一个JavaScript执行环境,并且在用户打开一个 Weex 页面时在这个执行环境中执行相应的 JS bundle。执行过程中产生的各种命令发送到 native 端进行界面渲染、数据存储、网络通信、调用设备功能及用户交互响应等功能。
客户端:Weex的IOS客户端中都会运行一个JavaScript引擎,来执行JS bundle,iOS 环境中渲染出来的是原生的组件,不是 DOM Element,Weex 中的事件是由原生组件捕获并触发的。
Weex实现了内置组建和自定义组件,故无法使用所有HTML标签,可将现有的本地组件集成到Weex平台中,同时引入基础内置模块或者集成已有的原生模块,Weex是多框架多平台,一份代码,三端可用,把渲染原生UI的能力赋予某个前端框架,主要支持Vue.js和Rax。
二、Vue.js
Weex只用运行时的方式
上下文:vue实例,单页面技术应用Veux和Vue-Router
样式:支持单个类选择器,且只支持CSS的子集,每一个样式都是scoped,具体有盒模型,Flexbox布局模型,transform
web渲染器:weex-vue-render 来实现它。
单文件组件:.vue,在构建时便于到render函数里
编译目标:weex-loader来编译*.vue文件,能把*.vue转化为简单的javascript
事件:点击,长按,appear事件,disappear事件
三、IOS实现
Weex SDK只提供渲染,提供了一些默认的组件和能力,如果需要一些特性但Weex未必提供,
注册SDK默认的Module、Handler和Component
Module:一个操作的方法集合,可以自定义module:WXModuleProtocol,WX_EXPORT_METHOD这个宏暴露出需要透出到JavaScript调用的方法。需了解module高阶用法
Handler:WeexSDK engine中一个service的概念,被component,modules和其他的handle实现中调用
Component:类似于Widget,Component可扩展WXComponent,WeexSDK engine与内置div组件功能一致
四、Native 和 JS 通信
自定义通知事件 fireEvent
事件回调 callback
参考:
http://weex.apache.org/cn/guide/