这是我参与 8 月更文挑战的第 21 天,活动详情查看: 8月更文挑战
前言
今天我们来聊聊Weex。起源于阿里,后交给了Apache,由Apache打理维护,今年进行了退休投票,最后又交环给了阿里维护。目前在GitHub的仓库也移交到了alibaba/weex。 对于新手:如果你是刚刚开始接触并且跃跃欲试的新手玩家,正想了解下Weex。那更好,这篇文章对你在合适不过了。跟我一起,边学边练。
Weex简介
首先,Weex不是一个前端框架,而是一个跨平台的编译平台,支持构建 Android、iOS 和 Web 应用。
从实现原理上来说,Weex有一层自己的DSL层,渲染层通过DSL的解析生成不同平台的原生代码,在这点上,和RN的思路有点类似。因为通过DSL进行UI描述,所以不依赖于特定的前端框架,但是目前支持度比较好的前端框架是Vue.js 和 Rax。毕竟这块是由一定的适配成本的。
使用Vue语法编写Weex
从语法上来说,在Weex中编写Vue是有一定的限制的,我们来看下具体代码:
<template>
<div>
<text>{{ text }}</text>
</div>
</template>
<script>
export default {
data() {
return {
text: 'hello world!'
}
},
}
</script>
乍一看发现没什么区别,但是查看文档后发现:
<div>是通用容器。- 不要在
<div>中直接添加文本,而要使用<text>组件。 - 在 Weex 中,
<div>不可滚动。滚动需要使用<list>组件。
限制还是挺多的,一份H5的Vue的代码还是无法直接转换成Weex代码的。
平台差异
Weex 是一个跨平台解决方案,Web 平台只是其一种运行环境,除此之外还可以在 Android 和 iOS 客户端中运行。原生开发平台和 Web 平台之间的差异,在功能和开发体验上都有一些差异。
我们都知道,Javascript是由DOM、BOM、Ecmascript组成的,而在移动端,只有Ecmascript,那么需要访问这些对象的时候,需要调用原生的API。
在 Weex 中能够调用移动设备原生 API,使用方法是通过注册、调用模块来实现。其中有一些模块是 Weex 内置的,如 clipboard 、 navigator 、storage 等。
小结
今天带大家了解了一下Weex的前置知识,后续会从原理到实战,带大家逐一剖析Weex。