Weex系列之Weex入门准备

Posted 2021-04-29 双十二技术哥

一、A New Start

在上一个系列文章中我们说到大前端一定是可以预见到的未来的趋势之一，那么从本篇文章中我将开启一个新的系列，从入门到深入，一步步走近大前端的核心腹地。计划本系列文章包含以下内容：

• Weex入门准备，包含学习资料、学习途径等；

• Weex项目实践，使用Weex开发一个原生的界面；

• Weex源码分析系列；

• Weex的本地接入封装；

• 针对Weex不够高的地方进行源码修改。

二、Why is Weex？

这个章节本来是想忽略的，因为说Weex那肯定绕不开ReactNative，而这个章节也极易引起口水；但是不写总觉得技术选型没有做到位。因此我就简单说几句：技术选型与团队规模、团队成员技术偏好、技术稳定性、易用性等方面息息相关，没有最正确的选型，只有最合适的选型。引入一项新技术的初衷是为了解放生产力、跟进新技术，而不是为了趟坑自虐。错误的技术选型（例如一个小团队却选择了一个需要持续维护的技术方向）不仅不会提升生产力，反而会降低生产力、伤害团队成员的技术热情。

三、What is Weex？

Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。

从Weex官网介绍我们可以看出几个关键词：跨平台、高性能、Vue、W3C标准、三端一致；以上关键词我们会在逐渐的深入了解过程中逐步体会到。

放一张Weex整体架构图：可以参考下面备注。

Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面（Weex File），然后编译成一段 javascript 代码（transformer），形成 Weex 的一个 JS bundle；在云端，开发者可以把生成的 JS bundle 部署上去（deploy），然后通过网络请求或预下发的方式传递到用户的移动应用客户端（Server————>JS FrameWork）；在移动应用客户端里，WeexSDK 会准备好一个 JavaScript 引擎（JSCore、V8），并且在用户打开一个 Weex 页面时执行相应的 JS bundle，并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践（callJs、callNative）；同时，如果用户没有安装移动应用，他仍然可以在浏览器里打开一个相同的 web 页面，这个页面是使用相同的页面源代码，通过浏览器里的 JavaScript 引擎运行起来的。

看起来是不是还有点抽象，那好人话来了！见下图，忽略掉Weex FrameWork与Native的交互，可以参考理解为我们发布新版本Apk的过程。

四、Quick Start

体验Weex的Demo可以参考快速上手；

• 在dotWe编写或者粘贴Demo中的代码实时预览；

• 下载Weex专门的一个 Playground App扫描网页右边的二维码。

五、DevTools

Weex开发环境的搭建并不复杂，可以参考搭建开发环境章节。此处主要推荐下Weex的开发使用工具：

• Sublime

• 安装、破解可以参考《mac sublime3 破解版的安装、插件管理和配置》；

• 安装的一些插件：Emmet、html-CSS-JS Prettify、Vue Syntax Highlight、VueJs Snippets等。

• WebStrom

• 安装、破解可以参考《Webstorm 2017 MAC版本—————下载及破解码》；

• 对Vue进行设置，参考《关于webstorm 对 vue的设置》；

• 添加weex的插件，在plugin中搜索weex，并且设置对vue的支持。

这样就可以愉快的开发了。

六、Preparation

对Weex的学习铺垫就到了这里；环境、开发工具完成之后，对照官方文档，练习Demo即可。当然前提是对前端、Vue的了解，如果没有相关姿势的同学岂不是没法破了？不了解还真没法破！学习实践Weex不需要你成为前端专家，但是语法、相关的一些知识还是必不可少的。

• 推荐看一些HTML+CSS的基础课程，比较推荐慕课网（真不是广告）；

• Vue也是比较好入门的，只要理解了双向绑定，参考文章《Vue.js——60分钟快速入门》；