使用 Vue 开发 Weex 页面

Vue & Weex 介绍

Vue.js 是 Evan You 开发的渐进式 JavaScript 框架，在易用性、灵活性和性能等方面都很是优秀。开发者可以经过撰写 *.vue 文件，基于 <template>, <style>, <script> 快速构建组件化的 web 应用。

Vue.js 在 2016 年 10 月正式发布了 2.0 版本，该版本加入了 Virtual-DOM 和预编译器的设计，使得该框架在运行时可以脱离 HTML 和 CSS 解析，只依赖 JavaScript；同时 Virtual-DOM 也使得 Vue 2.x 渲染成原生 UI 成为了可能。

Weex 是一套简单易用的跨平台开发方案，能以 Web 的开发体验构建高性能、可扩展的原生应用。 Weex 与 Vue 有官方合做，支持将 Vue 2.x 做为内置的前端框架，Vue 也借此具有了开发原生应用的能力。

尝鲜体验

开始以前，但愿你能对 Weex 和 Vue 有基本的了解，推荐阅读 Weex Tutorial 和 Vue Introduction 了解更多信息。

快速建立项目

Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。

首先安装 weex-toolkit 工具：

npm install weex-toolkit@beta -g

注：目前 weex-toolkit 仅在 beta 版中才支持初始化 Vue 项目，使用前请确认版本是否正确。

而后初始化 Weex 项目：

weex init awesome-project

执行完命令后，在 awesome-project 目录中就建立了一个使用 Weex 和 Vue 的模板项目，生成的项目功能和用法能够参考其 package.json 和 README 。

编写代码

在建立了项目而且配置好了开发环境以后，咱们就能够开始写代码了。

虽然开发的是原生应用，可是代码写起来和 Web 中并没什么不同。你能够选择本身喜欢的前端开发环境、能够写 .vue 文件、也能够直接写 javascript 文件、可使用 ES6+ 、可使用发布在 npm 上的模块、能够扩展 Weex 的组件或者模块。

注意事项

Vue.js 最初是为 Web 设计的，虽然能够基于 Weex 开发移动应用，可是 Web 开发和原生开发毕竟不一样，在功能和开发体验上都有一些差别，这些差别从本质上讲是原生开发平台和 Web 平台之间的差别，Weex 正在努力缩小这个差别的范围。

参考文章《Vue 2.x 在 Weex 和 Web 中的差别》了解存在差别的缘由和细节。

使用其余工具库

Vue.js 也有较多周边技术产品，如 Vuex 和 vue-router 等，这些库也能够在 Weex 中很好的工做。

关于 Vuex 和 vue-louter 的使用方法，能够参考《在 Weex 项目中使用 Vuex 和 vue-router》。

咱们基于 Weex 和 Vue 开发了一个的完整项目 weex-hackernews ，引入了包含 Vue 2.x 的 WeexSDK，建立了三端的项目和基本的编译配置。在项目中使用了 Vuex 和 vue-router ，可以实现同一份代码，在 iOS、Android、Web 下都能完整地工做。

扩展 Weex

Weex 内置了一些通用的组件和模块，能够知足基本上使用需求。为了控制 SDK 的体积和保持框架的通用性，咱们会谨慎地选择内置的组件和模块，并不会一应俱全将全部功能都封装进 SDK。不过咱们提供了额外的组件市场，在其中将能找到知足不一样需求、各式各样的组件和模块，此外 Weex 也具有横向扩展的能力，开发者能够自行定制和扩展 Weex 组件和模块。

Weex 的底层设计比较灵活，除了组件和模块之外，开发者甚至能够定制 Weex 内置的前端框架，Vue 2.x 就是一个成功的例子。

能够阅读如下文档了解更多信息：

• 《iOS 扩展》
• 《Android 扩展》
• 《HTML5 扩展》
• 《定制本身的 JS Framework》

Vue 2.x 在 Weex 中的特点功能

我想，你必定对 Vue 为何能渲染成原生页面 、Weex 为何能将内核切换成 Vue 心存好奇。若是你对这些细节感兴趣，能够阅读这篇文章 《how it works》。

流式渲染

在 Weex 中，咱们能够经过 <foo append="tree|node"> 的方式定义页面首次渲染时的渲染颗粒度，这让开发者有机会根据界面的复杂度和业务需求对首次渲染过程进行定制。append="tree" 表示整个结点包括其全部子结点所有生成完毕以后，才会一次性渲染到界面上；而 append="node" 则表示该结点会先渲染在界面上做为一个容器，其子结点会稍后作进一步渲染。

表单控件绑定

在 Weex 中，咱们针对 <input> 和 <textarea> 这两个表单控件提供了和 web 体验相同的 v-model 指令。经过 <input v-model="message"> 或 <textarea v-model="message">，开发者能够把数据 message 的值自动展现在文本框上，同时用户修改了文本框的值的时候，数据 message 会自动被更新。

多页面上下文隔离

如 Weex 工做原理文中所述，全部 Weex 的 JS bundle 公用一个 JavaScript 内核实例。因此如何可以让多个 JS bundle 中使用的 Vue 是彻底隔离的，而且其中一个页面对 Vue 进行扩展或改写不会影响到其它页面就变成了一个问题，经过 Weex 和 Vue 双方的协做，这一问题已经得以解决。你们能够放心使用。

<transition> 过渡状态

Weex 支持了 Vue 2.x 中经典的 <transition> 写法，开发者能够经过 <transition> 轻松定义一个界面在两种状态中的过渡方式。