Weex

Weex是阿里巴巴开发的,用于开发跨平台软件的框架.
最近刚刚研究Weex,所以先对其进行一个简单的基本的介绍.在学习的React Native之后,对于跨平台框架理念的理解相对容易些,在下面的介绍中,我会对它们进行对比分析.

Weex优势

Weex的优势所在:

• 轻量级
  Weex使用标签化语言,语法非常简单,使用Vue.js框架,学习成本较低,对于前端开发尤甚.
• 扩展性强
  Weex封装了丰富的组件和api,可以完成各种定制化的需求
• 高性能
  Weex使用纯本地渲染,体验更好;可以实现热更新.
• 跨平台
  Weex实现了Write Once Run Everywhere,并且适配了Web端,这与RN的Learn Once Write Everywhere和只适配iOS和android不同.

Weex开发环境搭建

和RN对比,Weex的开发环境配置更简单.
只需要安装命令行工具: npm install -g weex-toolkit.然后就可以运行Weex文件啦!
Weex的运行也很简单,不需要特殊的开发工具,只需要使用你习惯的编辑工具创建Weex文件(一般以.we为后缀名).

在网页运行

命令行weex fileName.we
如上命令会在浏览器里打开工程,本地编辑文件保存后,页面会自动刷新,这也就是Weex强调的热加载!

在客户端运行

命令行weex fileName.we --qr -h {ip or hostname},会在终端生成二维码如下

qr.png
通过下载Weex的运行终端Weex Playground App,在APP内扫描二维码即可.

需要强调的是: 所有在客户端运行的Weex项目,都是使用客户端原生组件进行渲染的,所以是纯客户端的体验,这一特点也是我们在追求跨平台框架时绝不妥协的一点.纵观跨平台框架发展史,凡是在体验上妥协的框架,都已经或者终将被淘汰.

Weex语法

Weex使用标签语言,三个标签<template>,<style>,<script>描述了全部的Weex渲染和交互.

<template>

功能类似于HTML,用于进行UI布局,Weex文件中必须包含该标签.
<template>内部只能包含一个用来形容布局的根标签,

<style>

可以理解为是CSS的语法集合,用来描述组件的样式,非必须
Weex使用的是Flex布局,<style>内部使用Flex的布局属性,需注意的是属性名使用的是中划线而非驼峰命名方式.
Flex布局的优点和灵活在这里不多做介绍,感兴趣的可以自己研究下.

<script>

用于管理数据和事件.非必须
组件的data-binding就是使用<script>实现的,在数据发生变化时,组件会自动刷新布局.

Weex在实际开发中的问题

在使用中发现了Weex的一些不足之处,现做个简单说明.

• 不支持本地图片
  Weex内的image标签只能设置网络图片,不支持本地图片的使用
• style标签不够丰富
  相比Web灵活的style标签,Weex只支持一部分特定的Flex标签

总结

Weex因为主打的是Write Once Run Everywhere,所以对于Native端一些常见的功能,类似打开相机,需要自己进行封装,所以Weex更适合开发用于展示页面和页面内交互的项目.

关于Weex和React Native的对比,个人觉得这篇总结不错,大家可以看看.