Weex环境搭建 [iOS]

[TOC]

快速上手

第一步：安装依赖

首先，你需要 Node.js 和 weex-toolkit。
到Node.js 官网 下载可执行程序直接安装即可。
也可以使用 Homebrew 进行安装

$ brew install node

安装完成后，可以使用以下命令检测是否安装成功

$ node -v
v6.3.1
$ npm -v
3.10.3

通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。

npm 是一个JS包管理工具，它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，同样，Weex 也将很多工具发布到社区方便开发者使用。

$ npm install -g weex-toolkit@beta

国内开发者可以考虑使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit

$ npm install -g cnpm
$ cnpm install -g weex-toolkit@beta

安装结束后你可以直接使用 weex命令验证是否安装成功

提示：如果提示权限错误（permission error），使用 sudo 关键字进行安装

第二步：初始化

然后初始化 Weex 项目：

$ weex init awesome-project

执行完命令后，在 awesome-project 目录中就创建了一个使用Weex和Vue的模板项目。

第三步：启动服务

weex-toolkit 已经为我们生成了标准项目结构。
在 package.json 中，已经配置好了几个常用的 npm script，分别是：

• build: 源码打包，生成 JS Bundle
• dev: webpack watch 模式，方便开发
• serve: 开启静态服务器
• debug: 调试模式

==之后我们进入项目所在路径(cd)==,我们先通过cnpm install 安装项目依赖。

运行 cnpm run dev 和 cnpm run serve 开启watch 模式和静态服务器。

然后我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面。

集成 Weex 到已有应用

集成 Weex 到已有应用（CocoaPods方式比较简单，可参考官方文档）

1. 下载Weex项目，Weex
2. 在XCode 中 打开weex/ios/sdk目录下的WeexSDK.xcodeproj,切换target为WeexSDK_MTL
   
   

   target
3. 编译工程后可以看到weex/ios/sdk/Products目录下生成了WeexSDK.framework的包
   
   

   WeexSDK

4. 导入SDK到工程，并且导入系统库，如下图

   
   
   

   导入系统库
5. 添加SocketRocket依赖中的SRWebSocket.h/m到自己的工程（否则会编译失败）
6. 添加main.js(在WeexSDK.framework包中)
   
   

   添加main.js
7. 添加-ObjC如下图(注意大小写)
   
   

   -ObjC