作为一个纯iOS开发者，每次想学习web都是看两小时就放弃。这次希望自己能够坚持下去。关于weex与 react native，知乎上一搜索，喷如潮水。暂且不管有多少坑，先尝试踩一踩，毕竟踩坑也是站立在巨人肩上。本文仅仅作为个人学习笔记，欢迎留言沟通。
对比：
相同点：
- 组件化，样式、逻辑和界面的分离
- 都能热更新，可以边更改代码，边调试
- 都可以在chrome中调试JS代码
- 使用flex布局（）
不同点：
weex （）：write once, run anywhere
ReactNative：learn once, write anywhere
Facebook在2015年3月在F8开发者大会上开源的基于React跨平台UI框架；需要解决mvn依赖的问题，必须自己修改源码，打包发布；ReactNative开发一个页面，需要建立一个native工程，然后编译运行；ReactNative支持Android iOS两个平台，需要自己扩展去支持web；
公司一个同事喷“ React Native环境很难搭建”，其实真正了解后其实就是需要配置很多依赖工具，本篇先从weex入手。学习一个技术，我喜欢先从基础入手，有一定基础上提出自己的问题，再深入学习，解决。在初接触weex时难免会有以下问题：
- 如何在mac上搭建weex环境？
- 如何使用weex创建工程，编写经典的HelloWorld?
- 如何将weex集成到iOS工程?
- 如何将weex创建的工程转换成js在iOS工程中使用?
本篇将一一讲解。
基础概念
- ： macOS套件管理器
- npm：avaScript 包管理工具
- weex-toolkit：官方提供的一个脚手架命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能
- Sublime Text：优雅的代码编辑器
- cocoaPods：iOS最常用最有名的类库管理工具
- .we：weex创建的文件类型
开始吧！
一、搭建开发环境
weexhelp.jpg至此weex环境搭建成功！
二、Weex下HelloWord
helloWorld.jpg*链接中的hot reload，验证了热更新
用手机安装的WeexPlayground扫描，同步运行在app中。
3、上面的示例只是一个非常简单的雏形，而一个比较完整的Weex程序包括三个部分：模板（Template）、样式（Style）和脚本（Script）。用Sublime打开helloWorld.we，编辑
<code>
<template>
<div>
<text class="title" onclick="onClickTitle">Hello World</text>
</div>
</template>
<style>
.title { color: red; }
</style>
<script>
module.exports = {
methods: {
onClickTitle: function (e) {
console.log(e);
alert('title clicked.');
}
}
}
</script>
</code>
保存。见证奇迹的一刻到了，Hello World自动刷新为红色，点击弹框提示框。
helloWorldRed.jpg
至此，一个完整helloWorld的weex项目就完成了。
有没有小激动？先喝个茶，平静下心情。
继续！
三、将weex集成到iOS工程
Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
target 'weexTest' do
Uncomment the next line if you're using Swift or would like to use dynamic frameworks
use_frameworks!
Pods for weexTest
end
</code>
4、编辑Podfile
你可以输入上面weexSDK版本，也可以不指定，编辑后如图：
<code>
Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
target 'weexTest' do
Uncomment the next line if you're using Swift or would like to use dynamic frameworks
use_frameworks!
Pods for weexTest
pod 'WeexSDK' #不指定版本
pod 'ATSDK-Weex', '0.0.1'
end
</code>
4、执行Podfile，pod install安装
<code>
pod install
</code>
Jietu20170327-171406.jpg
至此，集成完成。
5、打开weexTest工程，运行，报错Undefined symbols for architecture arm64
Jietu20170327-171627.jpg
6、缺少静态库文件，在Targets中新增libsqlite3.0.tbd：
Targets->Build Phases->Link Binary With Libraries->libsqlite3.0.tbd
在此运行，调试台打印日志[DYMTLInitPlatform] platform initialization successful！
完美！
四、深入学习Weex
后续完成！
哈哈，开始踩坑。因为weex才开始发不一年不到，很多问题他们也在一步步解决和完善。前文提到用Sublime创建.we，是基于vue1.0，目前vue2.0按照之前的方法，在.we的根目录下执行weex helloWorld会出现对应的js，现在走不通了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
至此，要寻找其他方法，在下一章中讲解。