Weex 简介

最近项目在改造，尝试使用Weex代替原有的H5 和原生页面，提高系统运行效率。期间遇到了很多坑，后面会仔细讲讲，先来看下Weex的基本信息。

一、什么是weex

"Weex是一个可以使用现代化的 Web 技术开发高性能原生应用的框架"，这是Weex官网对其的一句很简介明了的定义。Weex是一个可以利用web 前端开发技术来实现Android/ios 原生引用的框架，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API。

二、整体架构

本地开发的web 页面，构建形成 Weex 的一个 JS bundle（native）；在云端，开发者可以把生成的 JS bundle 部署上去，然后通过网络请求或预下发的方式传递到用户的移动应用客户端；在移动应用客户端里，WeexSDK 会准备好一个 JavaScript 引擎，并且在用户打开一个 Weex 页面时执行相应的 JS bundle，并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践。

1、Weex 的 iOS 和 Android 客户端中都会运行一个 JavaScript 引擎，来执行 JS bundle。

2、Weex向各端的渲染层发送规范化的指令，调度客户端的native渲染和其它各种能力。

3、我们在 iOS 下选择了 JavaScriptCore 内核，而在 Android 下选择了 UC 提供的 v8 内核。

原理：
1、将XML+CSS+JavaScript代码转换为JSBundle
2、JSBundle传给JS Framework解析为Json格式的Virtual DOM
3、客户端通过接收Virtual DOM渲染界面

 

 

三、技术特点

1、一次实现，多端适用

    使用Weex框架+ web开发语言和开发经验开发应用，可构建 Android、iOS 和 Web 应用三端统一的应用。

2、支持的前端框架

    Weex并不强依赖在特定的框架上使用，但官方推荐使用的是vue.js 和 Rax 前端框架，这俩种框架也是Weex 目前功能最全、最稳定的方案。在 WeexSDK v0.10.0 （发布于 2016 年 2 月 17 日）以及后续的版本中，集成了 v2 版本的 Vue.js。

 

•  Vue.js 是一个不断进化中的前端框架。
• Rax 是提供类 React 语法和兼容性的前端框架。

3、调试工具

•  官方推荐使用Playground 来调试，预览weex页面，在 Playground 里，你可以打开各种示例。
•  访问 Weex online playground. 在这个网站上，你可以浏览、修改、新建各种基于 Vue.js 的单页面例子，并用 WeexPlayground 应用扫码查看实时效果。
• 同时weex 也提供了weex debug ，需要APP集成 weex sdk。weex debug 启动步骤如下：

       1、执行 weex debug 指令；   执行成功后会提示访问URL、端口等。   

    2、访问URL，会有一个debug 二维码

    3、使用继承了weex sdk 的APP引用扫码，链接APP和网页，就可以在调试网页。

   4、weex debug 支持对单个文件进行调试， 通过 weex debug [folder | file]  命令进行编译。

 

四、weex和 web的平台差异

    虽然使用weex框架可以实现web , android 、ios 三端统一，但是它与纯web 开发有几点很明显的区别。

1、weex环境中没有 DOM    

     weex的运行环境以原生应用为主，在 Android 和 iOS 环境中渲染出来的是原生的组件，不是 DOM Element。

• 不支持 DOM 操作

    原生环境中不支持 Web API，没有 Element 、Event 、File 等对象。不支持选中元素，如 document.getElementById 、 document.querySelector 等；当然也不支持基于 DOM API 的程序库（如 jQuery）。

• 有限的事件类型

    Weex支持在标签上绑定事件，和在浏览器中的写法一样，但是Weex 中的事件是由原生组件捕获并触发的，行为和浏览器中有所不同，事件中的属性也和 Web 中有差异。支持 Web 中的事件类型，详情请参考《通用事件》。同时，不区分事件的捕获阶段和冒泡阶段，相当于 DOM 0 级事件。

 2、Weex环境中没有BOM

     BOM（Browser Object Model），即浏览器对象模型，是浏览器环境为 javascript 提供的接口。Weex 在原生端并不基于浏览器运行，不支持浏览器提供的 BOM 接口。

• 没有 window 、screen 对象

     因为没有BOM ，所以不支持供浏览器中的window, screen对象，获取设备的屏幕或环境信息，可以使用 WXEnvironment 变量。

WXEnvironment	备注
weexVersion	WeexSDK 的版本
appName	应用的名称
appVersion	应用的版本
platform	运行平台，可能的值是 Web 、Android 、iOS 之一
osName	系统的名称
osVersion	系统版本
deviceWidth	设备宽度
deviceHeight	设备高度

  // 获取屏幕高度
  this.scrollHeight = (750 / weex.config.env.deviceWidth * weex.config.env.deviceHeight-140) ; 

• 没有doucment 对象

    在浏览器中 document 表示了当前活动的文档模型，在 Android 和 iOS 环境中并没有这个对象，也不支持与其相关的 DOM 操作

• 没有location，history，navigator 对象

    Weex 也提供了 navigator 模块来操作页面的跳转，使用方法参考《navigator 导航控制》

3、能够调用移动设备原生 API

    Weex 提供了clipboard 、 navigator 、storage等模块来调用移动设备原生 API。同时，提供了横向扩展的能力，可以扩展原生模块，具体的扩展方法请参考《iOS 扩展》 和《Android 扩展》

 

参考资料

weex 官网