weex 混合式开发(一) weex安装

欢迎大家访问我的博客 www.kevink.club

---

原文链接：http://www.kevink.club/archives/264.html

### 安装weex 工具
OSX环境
```
$ sudo chmod -R 777 /usr/local/lib/node_modules/
$ npm i -g weex-toolkit // 安装不要使用sudo执行
$ weex -v // 查看当前weex工具版本
```

### 初始化环境
然后初始化 Weex 项目：
```
$ weex create awesome-project
```

执行完命令后，在 awesome-project 目录中已经为我们生成了标准项目结构。

### 开发

下一步就是进入刚刚创建的文件夹，并且安装依赖，然后执行 npm start：
```
cd awesome-app
npm install
npm start
```

然后工具会启动一个本地的 ```web``` 服务，监听 ```8081``` 端口。你可以打开 ```http://localhost:8081``` 查看页面在 Web 下的渲染效果。 源代码在 ```src/``` 目录中，你可以像一个普通的 ```Vue.js``` 项目一样来开发.

除此之外，你还可以打开 ```http://localhost:8081/preview.html``` 开启一个预览页面，它会把 ```web``` 端的页面放在一个 ```iframe``` 中渲染，而且在右侧生成一个二维码。用 ```Weex playground app``` 扫描这个二维码可以看到页面在手机上渲染的真实效果。

### 编译和运行
默认情况下 ```weex create``` 命令并不初始化 ```iOS``` 和 ```Android``` 项目，你可以通过执行 ```weex platform add``` 来添加特定平台的项目。

```
weex platform add ios
weex platform add android
```

由于网络环境的不同，安装过程可能需要一些时间，请耐心等待。如果安装失败，请确保自己的网络环境畅通。

为了能在本地机器上打开 ```Android``` 和 ```iOS``` 项目，你应该配置好客户端的开发环境。对于 iOS，你应该安装并且配置好 ```Xcode```。对于 ```Android```，你应该安装并且配置好 ```Android Studio```。当开发环境准备就绪后，运行下面的命令，可以在模拟器或真实设备上启动应用：
```
weex run ios
weex run android
weex run web
```

### 调试
```weex-toolkit``` 还提供了强大的调试功能，只需要执行：
```
weex debug
```
这条命令会启动一个调试服务，并且在 ```Chrome``` （目前只支持基于 V8 引擎的桌面浏览器） 中打开调试页面。```详细用法请参考 weex-toolkit 的文档```。