Weex环境搭建 [iOS]
2017-03-01 本文已影响156人
大斌小姜
[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方式比较简单,可参考官方文档)
- 下载Weex项目,Weex
- 在XCode 中 打开
weex/ios/sdk
目录下的WeexSDK.xcodeproj
,切换target为WeexSDK_MTL
target - 编译工程后可以看到
weex/ios/sdk/Products
目录下生成了WeexSDK.framework
的包
WeexSDK -
导入SDK到工程,并且导入系统库,如下图
导入系统库 - 添加SocketRocket依赖中的
SRWebSocket.h/m
到自己的工程(否则会编译失败) - 添加
main.js
(在WeexSDK.framework包中)
添加main.js - 添加
-ObjC
如下图(注意大小写)
-ObjC