Weex 简介

weex简介

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

Hello World

尝试 Weex 最简单的方法是使用 Playground App 和在 dotWe 编写一个 Hello World 例子。你不须要考虑安装开发环境或编写 native 代码，只须要作下面两件事：

• 为你的手机安装 Playground App，固然，Weex 是跨平台的框架，你依然可使用浏览器进行预览，只是这样你就没法感觉到 native 优秀的体验了。
• 在新标签页中打开 Hello World 例子，点击预览，而后用 Playground 扫码便可。

在这个例子中，咱们看到了熟悉的 HTML 语义化标签、CSS 样式和 Javascript 代码。这是一个最简单的 Weex 示例，它在页面中渲染了一个 “Hello World”。请注意，这不是一个 H5 页面，而是 native 的。

发生了什么？

就如示例代码所示：

<template>
<div>
<text class="text">{{text}}</text>
</div>
</template>
 
<style>
.text {
font-size: 50;
}
</style>
 
<script>
export default {
data () {
return {
text: 'Hello World.'
}
}
}
</script>

 

你能够试着修改Hello World示例若是你有之前的知识构建VueJS的例子，而后生成一个新的二维码扫描。若是你没有之前的VueJS知识,别担忧,这个指南教你。此外，你能够学习(VueJS指南)(https://vuejs.org/v2/guide)。它太容易了，对吧?看一下语法，这就是vue。

 

工做原理

Updated time: 14/06/2017

总体架构

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

本地开发环境

Weex 的本地开发环境基于 web 开发体验而设计，web 开发者能够经过本身熟悉的 HTML/CSS/JavaScript 技术和语法实现移动应用的界面。同时 Weex 也对 Vue.js 这一很是优秀的前端框架作了官方的支持。

除此以外，Weex 的工程设计也是 web 开发者很是熟悉的，首先 web 开发者可使用本身熟悉的 npm 进行依赖管理；其次 web 开发者在经过项目脚手架初始化工程、开发、调试、质量控制等各个环节，均可以参考 web 开发已有的最佳实践。

和现在 web 开发的最佳实践同样，Weex 会把一个页面的源代码所有编译打包成一个 JS bundle，在浏览器中，咱们须要把这个 JS bundle 做为一段 <script> 载入网页，在客户端里，咱们把这段 JS bundle 载入本地，并经过 WeexSDK 直接执行。

云端部署和分发

Weex 的 JS bundle 能够做为 web 开发中的一段静态资源进行部署和下发。几乎能够复用 HTML5 全部的工程体系和最佳实践。好比在本地开发环境经过部署工具将 JS bundle 部署到 CDN、经过 CMS 或搭建平台把业务数据和模块化的前端组件自动化拼接生成 JS bundle、经过服务端 JS bundle 的流量和日志统计页面的访问状况、经过 AppCache 或相似的方式对 JS bundle 在客户端进行缓存或预加载以下降网络通讯的成本等。

客户端 JavaScript 引擎

Weex 的 iOS 和 Android 客户端中都会运行一个 JavaScript 引擎，来执行 JS bundle，同时向各端的渲染层发送规范化的指令，调度客户端的渲染和其它各类能力。咱们在 iOS 下选择了 JavaScriptCore 内核，而在 Android 下选择了 UC 提供的 v8 内核。不管是从性能仍是稳定性方面都提供了强有力的保障。

为了让整个移动应用的资源利用得更好，咱们在客户端提供的 JavaScript 引擎是单例的，即全部 JS bundle 公用一个 JavaScript 内核实例，同时对每一个 JS bundle 在运行时进行了上下文的隔离，使得每一个 JS bundle 都可以高效安全的工做。咱们还把 Vue 2.0 这样的 JS Framework 作了预置，开发者没必要把 JS Framework 打包在每一个 JS bundle 里，从而大大减小了 JS bundle 的体积，也就进一步保障了页面打开的速度。

客户端渲染层

Weex 目前提供了 iOS 和 Android 两个客户端的 native 渲染层。每一个端都基于 DOM 模型设计并实现了标准的界面渲染接口供 JavaScript 引擎调用。而且结合 web 标准和 native 的特色和优点实现了一套统一的组件和模块。Weex 在性能方面的表现也是很是优异的，尤为是界面首屏加载时间、native 下长列表的资源开销和复用状况、CPU、内存、帧率 等关键指标。固然，尽管 Weex 官方已经提供了一组开发者最经常使用的组件和模块，但面对丰富多样的移动应用研发需求，团队也不免会力不从心，为此咱们提供了灵活自由的横向扩展能力，开发者能够根据自身的状况定制属于本身的客户端组件和模块，进一步丰富 Weex 在客户端上的能力。

 

浏览器渲染

Weex 除了提供 iOS 和 Android 的客户端渲染层以外，还基于 Vue 2.0 对官方的全部组件和模块进行了封装，开发者能够基于 Vue 2.0 用同一套源代码构建出在浏览器中相同效果的页面。而且一样能够横向扩展。