深刻Weex系列（一）之Weex入门准备

1、A New Start

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

• Weex入门准备，包含学习资料、学习途径等；
• Weex项目实践，使用Weex开发一个原生的界面；
• Weex源码分析系列；
• Weex的本地接入封装；
• 针对Weex不够高的地方进行源码修改。

2、Why is Weex？

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

3、What is Weex？

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

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

放一张Weex总体架构图：能够参考下面备注。

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的过程。

Markdown

4、Quick Start

体验Weex的Demo能够参考快速上手；

• 在dotWe编写或者粘贴Demo中的代码实时预览；
• 下载Weex专门的一个 Playground App扫描网页右边的二维码。

5、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的支持。

这样就能够愉快的开发了。

6、Preparation

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

• 推荐看一些HTML+CSS的基础课程，比较推荐慕课网（真不是广告）；
• Vue也是比较好入门的，只要理解了双向绑定，参考文章《Vue.js——60分钟快速入门》；

欢迎关注微信公众号：按期分享Java、Android干货！

欢迎关注