最新weex已经改为支持Vue，旧的代码.we代码随着更新迭代也会替换掉。项目还在继续推进weex的使用，随后会更新最新一些自己使用weex-vue的总结。
以下为旧版weex开发流程:
因
公司的app大量采用 hybrid 开发。iOS 在使用UIWebView时会消耗大量系统资源。 WKWebVIew 会是一个很好的解决方案。但是公司前端资源紧缺，让前端人员给iOS端做适配成本太高。
果
iOS端首先试用Weex。如果可以的话，不止可以替换原有的web界面，复用网页接口。还可以开发一些强排版的native界面，成熟之后，安卓直接使用。
参考文档
- Weex
- coderyi 文章
开发环境
- macOS 10.12.1
- atom (安装 language-weex 高亮)
- iTerm2
- homebrew
- brew install node //通过brew安装node
- npm install -g weex-toolkit *//通过node安装 weex-toolkit *
初始化工程
- 创建文件夹
$ mkdir bookcover - 进入
bookcover,初始化Weex工程
weex init
得到以下文件
prompt: Project Name: (detail) bookcover
file: .gitignore created.
file: README.md created.
file: index.html created.
file: package.json created.
file: src/weex-bootstrap.we created.
file: webpack.config.js created.
* 安装 package.json 中的依赖
``` npm install ```
` node_modules/` 会创建很多依赖文件
如果提示
`npm WARN [email protected] requires a peer of babel-core@^6.0.0 but none was installed.
`
执行以下命令
` npm install babel-core`
* 编译项目
`npm run dev`
* 启动轻量服务器
`npm run serve`
打开浏览器，输入http://127.0.0.1:8080, 就会看到这个项目的效果.
以上步骤，一个weex 的基本项目已经创建好了。看详细讲解，可以看上边的两个链接和weex源码。
### 开始创建自己的 .we 文件
源码都在 `src` 目录下，现在已经包含一个`weex-bootstrap.we` 文件。
#### 查看源码 （三部分）
打开文件
`$ atom weex-bootstrap.we`
##### 布局 （View)
> template 是模板的意思，这样创建.we 的模板，其他文件调用时，使用文件名作为模板名字。 例如：`first.we`
// index.we
...
##### 样式
##### 数据+交互 （ViewModel）
### 组件间通讯
[参考 Weex 组件通讯](http://alibaba.github.io/weex/cn/doc/syntax/comm.html)
##### 从子组件向父组件通信
// 子视图代码 发送事件
test: function () {
this._parent.$emit('notify', {a: 1})
}
// 父视图代码 监听
this.$on('notify', function(event) {
}
`notify` 为父视图方法
`{a: 1}` 传给父视图的参数
##### 从父组件向子组件通信
// 父视图vm获取子视图，然后触发 changeImage
test: function (e) {
this.$vm('sub').$emit(
'changeImage',
'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png' )
}
// 父视图监听 changeImage 方法
created: function() {
this.$on('changeImage', function (e) {
this.imageUrl = e.detail }.bind(this))
}
##### 子组件通讯
weex官网没有写，个人通过以下方法解决： `子视图1 ` -> `父视图` -> `子视图2`
#### We 生命周期
Weex 视图模型现在支持生命周期内的钩子函数，这些钩子函数能被写为组件选项：
* init: 在视图模型的构造函数开始调用时激活；
* created: 当视图模型监听默认数据，但还未编译模板时激活；
* ready: 当视图模型监听默认数据并且编译模板生成虚拟DOM后被激活。
#### 找节点
* 父找子节点
// index.we
...
``` var el = this.$el('goto-top')```
* 父找子上下文
this.$vm('goto-top').setTitle('Updated')
* 子找父
```this._parent```
### 将 .we 文件打包成 .js
$ weex index.we -o .
得到 `index.js` 文件。
将`index.js` 导入 iOS工作区间。
### 实例
创建文件
├── module
│ ├── chapter.we
│ ├── header.we
│ ├── recommand.we
│ └── urls.js
├── src
│ ├── index.we
* `urls.js` 保存url地址
* `index.we` 为界面主入口
* 其他为子视图
index.we
> 因为index.we 为主视图，没有具体视图的实现，所以此处没有