Weex在达人店的一年实践

本文来自尚妆移动端团队 路飞
发表于尚妆github博客，欢迎订阅！

尚妆达人店接入weex也一年的时间了，在此期间，也陆陆续续出了一些文章：
「Android」 详细全面的基于vue2.0Weex接入过程（Android视角）
「前端」weex页面传参
「大前端」weex里native主动发送事件到JS的方案实现
weex 三端实现Pager 组件(ViewPager) - 本仁笔记
记录团队weex实践过程中需要特殊注意的点

这里就详细地做一个总结，希望可以给大家带来一些参考。我们团队也比较小，App的量级也不大，很多做得不够好的地方，还希望大神不吝赐教。

一、什么是Weex

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

前言引用了 Weex官网的定义，我们在实践的过程中也实际地体会到了这些。以下是提炼出的几个关键字：

还未接触过weex的同学，如果想先看一下效果，可以访问 Weex 提供的 在线Playground，进行编辑和浏览，App端下载 playgroundplayground进行扫码浏览效果。

可以看到，Weex可以通过自己设计的DSL，用vue像写 web 页面一样写一个 app 的页面，整个页面书写分成了3段， template、 style、 script，借鉴了成熟的MVVM的思想。

后面会讲到，理论上也可以横向支持采用React、angular等框架来书写页面。阿里开源的Rax，就是基于React的标准，支持在Weex渲染，具体可以看知乎上一个问答 如何看待阿里开源的Rax框架？

而Playground集成了 Weex SDK，扫码后，得到了编译好的 JS Bundle，然后通过JS Framework层解析，输出Json格式的 Visual Dom，然后通过 JS-Native Bridge 来渲染成Native界面，也通过Bridge来进行Js-Native的事件传递。如下是官网给出的架构图：

通过断点调试可以看到，JSFramework传给SDK的渲染指令是这样子，SDK 再根据不同的type和参数，渲染成对应的Native组件。

传统的App，Native UI 是可以直接获取 Device Power的，而Weex App里，Native UI 和 Device Power之间通过JavaScript来连接，如图所示(图来自weex官网)：

在开始接入之前，关于Weex的页面结构，需要了解一下，具体可以查看Weex官网的 Weex页面结构。为了阅读方便，下面直接引用：

Weex 页面结构

界面展示、逻辑处理、设备能力使用、生命周期管理等部分。

Dom模型

Weex 页面通过类似 HTML DOM 的方式管理界面，首先页面会被分解为一个 DOM 树，，每个 DOM 结点都代表了一个相对独立的 native 视图的单元。然后不同的视图单元之间通过树形结构组合在了一起，构成一个完整的页面。

组件

Weex 支持文字text、图片image、视频video等内容型组件，也支持 div、list、scroller 等容器型组件，还包括 slider、input、textarea、switch 等多种特殊的组件。Weex 的界面就是由这些组件以 DOM 树的方式构建出来的。

布局系统

Weex 页面中的组件会按照一定的布局规范来进行排布，我们这里提供了 CSS 中的盒模型、flexbox 和 绝对/相对/固定/吸附布局这三大块布局模型。

功能

Weex 提供了非常丰富的系统功能 API，包括弹出存储、网络、导航、弹对话框和 toast 等，开发者可以在 Weex 页面通过获取一个 native module 的方式引入并调用这些客户端功能 API。

生命周期

每个 Weex 页面都有其自身的生命周期，页面从开始被创建到最后被销毁，会经历到整个过程。这是通过对 Weex 页面的创建和销毁，在路由中通过 SDK 自行定义并实现的。

Weex的扩展性很好，可以对网络、图片、存储、UT、组件、接口等根据自身App和业务需求进行扩展，即使weex提供的组件有问题，也都可以直接重写替换。

对于一个新技术的接入，我们首先会去考虑这个技术的优缺点，能给团队和业务带来什么效益；然后考虑接入的成本，包括团队成员的学习成本，对项目的修改成本，时间成本；开发体验，性能监控，容灾处理等。
在考虑完这些之后，OK，我们开始决定接入Weex。

二、达人店接入Weex

达人店目前是一个量级比较小的应用，在一年时间里，目前有46个页面。目前整体都比较稳定，后续所有页面也都会采用weex进行开发。

因为Weex给我们带来的效益是显而易见的：

• 3人/日 -> 1人/日
• 大程度摆脱App更新限制
• Native 体验

在接入的过程中，我们在各方面做了很多事情，包括脚手架、配置下发、跳转规则、相对地址、预加载、降级、错误监控、建立组件库、页面传参等等。下面详细介绍一下这个过程，如果您有更好的方法，非常欢迎进行讨论交流。

(一) 前端

首先要建立Weex项目，这个可以看做是一个前端的项目，Weex也提供了脚手架工具。

weex 推荐的脚手架全家桶：

• weex-toolkit：用来初始化项目，编译，运行，debug所有工具。
• weexpack：用来打包JSBundle的，实际也是对Webpack的封装。
• playground：一个上架的App，这个可以用来通过扫码实时在手机上显示出实际的页面。
• code snippets：这个是一个在线的playground。
• weex devtools：就是为weex前端和native开发工程师服务的一款调试工具。
• weex-loader：Webpack 的一个加载器，针对 Android 和 iOS 平台，用于编译 .vue 格式的单文件组件

达人店没有使用weex提供的脚手架，而是我们前端同学定义了适合我们业务的项目结构，以下是达人店的Weex项目结构的一部分，每个页面有一个文件夹，包含了html，js，vue：
html文件：接入weex 的h5页面
js文件：webpack编译的入口文件
vue文件：weex的编辑页面

以下是开发环境的示例，所以引入的js都没有版本号，正式环境的path里会有版本号

HTML示例
其中，/dist/weex.js 引入 weex-vue-render，进行了扩展，包括注册module，注册新的自定义组件。 weex-vue-render可以理解为weex在H5的SDK。详情见 HTML扩展

Js示例
#weex 就是对应html里

  import weexComponent from './register-weex.vue';
weexComponent.el = '#weex';
export default new Vue(weexComponent);

Vue示例