Weex 架构分析

最近工作一直在搭建weex的项目架构，对于Weex开发需要理解很多概念并且需要强大的内心，因为还没有比较成熟，所以坑比较多。但是公司团队需要开发，所以在此记录一些东西。

---

首先，我们得理解四种环境：

• iOS 环境
• Android 环境
• Web 环境
• WebView 环境

这几种环境当然可以根据字面意思来理解，所以，我们在搭建所谓三端一致的环境的时候，我们需要区分这四种环境。

---

然后，利用Weex中搭建的脚手架框架weexpack构建的项目，大致的架构如下:

  WeexProject
  ├── README.md
  ├── android.config.json
  ├── config.xml
  ├── hooks
  │   └── README.md
  ├── ios.config.json
  ├── package.json
  ├── platforms     // 平台模版目录
  ├── plugins       // 插件下载目录
  │   └── README.md
  ├── src           // 业务代码（we文件）目录
  │   └── index.we
  ├── start
  ├── start.bat
  ├── tools
  │   └── webpack.config.plugin.js
  ├── web
  │   ├── index.html
  │   ├── index.js
  │   └── js
  │       └── init.js
  └── webpack.config.js

此架子大概帮我们已经搭建好了一个基本的开发思路，但是，我们可以看出webpack的架子并没有搭建比较完全，weexpack只是帮我们简单的实现了打包与web端渲染。所以，我们需要自己根据的需求，让其变得更加饱满一点。

另外，关于weexpack 的调试问题困惑了作者很久，经查询记录于此:
1.在浏览器地址栏输入：chrome://inspect/#devices
2.点击如下：

image.png

3.在webpack的配置文件中加一个debugger
4.在你的package.json中添加一个新的script, run 即可。比如：

"debug": "node --inspect --debug-brk node_modules/.bin/webpack --config webpack/webpack.config.js"

---

另外，weex 写UI是不兼容Web大多数标签，需要使用它自己封装的标签，而且与vue不同的是，他打包的文件是通过每个页面动态的打包，所以跳转不是vue-router简单的跳转，而是通过其封装的navigator进行页面之间的跳转的。