github
Laster Posted
近期需要研究下Weex和React Native相关的一些设计和使用，这里就是对Weex来一次小的探索
Weex项目
Weex的github地址：https://github.com/alibaba/weex
其实Weex的文档非常齐全，这里只是简单的记录个人预研过程中觉得需要记录下来的一些点，若有变更，请移步官方说明了解详情；
发布当个简单页面
创建一个demo目录，cd到该目录下，创建一个demo.we文件，把官方文档上的示例代码贴到里面，或参考着改一下。 文件目录如下： – demo – demo.we
文件内容为：
通过命令：weex demo.we --qr -h localhost（格式：weex filename.we --qr -h {ip or hostname}）设成一个二维码，有了二维码之后，我们需要下载调试页面的Weex Playground，然后用安装好的APP去扫上面生成的二维码，页面就打开了。
调试Weex
Weex调试类似于Web页面调试，需要首先安装weex-toolkit 调试的细节，可以查看官方文档，这里就不详细说明了
编译Weex文件
其实应该叫翻译或转换Weex文件
（1）翻译单个*.we文件的命令是：$weex <filename.we> -o <outputpath>
（2）翻译一个目录下的所有*.we文件到某个目录下，命令是：$weex <we/file/storage/path> -o <outputpath>
（3）翻译文件并监听文件的变更，需要在命令后面加上--watch，如：$weex <filename.we> -o <outputpath> --watch
（4）预览Weex页面，可以通过命令$weex your_best_weex.we --qr生成二维码，在使用Playground APP扫描，即可调试了。
简单理解下Weex的工作流程
有了上面的一些准备知识后，我们下面来简单看下Weex的大致工作流程
首先，我们作为开发者，会编辑出类似如下的源代码，代码中包括界面模板<template>，逻辑脚本<script>，样式<style>
通过Weex-transformer的转化成如下的js代码
define(‘@weex-component/main’, function () { module.exports = { data: function () { return {x: 100} } } module.template = { type: “foo”, attr: { a: function () {return this.x}, b: 1, classname: [‘bar’] } } module.style = { bar: {width: 200, height: 200} } } bootstrap(‘@weex-component/main’)
通过上面的JS代码可以看出源码中的模板<template>、<script>、<style>被分别转换成了module.template、module.exports、module.style，其中，模板<template>里面的内容，被转成了用JSON表达的View Tree，你看到的里面的属性attr中具体的元素里面的'a'映射的是一个function，其实它是为了实现数据的单（双）向绑定而生成的逻辑，在Weex里面，它使用的采用MVVM模式的数据流框架是Vue（有兴趣可以看下作者介绍）。module.exports里面是普通逻辑代码，就不多说了，自己对照一下，慢慢理解。至于样式
上面的define函数的作用是声明（定义）页面相关的元素和逻辑，而bootstrap函数则是通过JS Framework将define中定义好的界面及逻辑编译成Native组件，并生成相应虚拟的DOM，最后用原生的渲染框架渲染成UI界面。
Weex的逻辑是用JS实现的，其运行在阿里定制的V8内核（其开源地址为：https://github.com/alibaba/weex_v8core）
Weex框架如下：
渲染流程如下：
大致就这么多了，看看图（图来自于官方文档）思考下，应该是可以理解的了~
遇到的问题
1）手机和电脑不在同个局域网内，访问不到，无法调试
由于公司限制了设备之间的通讯，手机无法通过Weex开的WebSocket Server直连电脑。
解决方案：
（1）在电脑上开启热点，让手机连上，便可调试；
这个就不详细说了，比较简单，且容易理解。
（2）通过USB端口映射，让手机的端口与PC的端口构成一个映射关系；
其实就是把终端设备的端口直接映射到PC端口上，或把PC端口映射到终端设备的端口上，具体操作如下：
首先，确定好要映射的端口，例如我要把PC端口8080映射到终端端口上8081上，这样PC上访问8080端口实际上访问的是终端的8081端口，
命令如下：adb forward tcp:8080 tcp:8081。这样我们在PC机的浏览器上输入http://127.0.0.1:8080就可以访问到终端设备上的8081端口了。
如果我们想在终端上访问PC上的某个端口时，可以采用类似于adb forward <localPort> <remotePort>的命令，命令格式是adb reverse <localPort> <remotePort>。
2）…
相关连接
Weex的github地址：https://github.com/alibaba/weex Node.js地址：https://nodejs.org/en/ weex-toolkit安装引导：https://www.npmjs.com/package/weex-toolkit Weex Playground下载：http://alibaba.github.io/weex/download.html