作为一个纯iOS开发者，每次想学习web都是看两小时就放弃。这次希望自己能够坚持下去。关于weex与 react native，知乎上一搜索，喷如潮水。暂且不管有多少坑，先尝试踩一踩，毕竟踩坑也是站立在巨人肩上。本文仅仅作为个人学习笔记，欢迎留言沟通。
对比：
两者对比，这篇文章讲解不错传送门，在此稍作总结。
相同点：
- 组件化，样式、逻辑和界面的分离
- 都能热更新，可以边更改代码，边调试
- 都可以在chrome中调试JS代码
- 使用flex布局（flex传送门）
不同点：
weex （weex官方）：write once, run anywhere
猫厂2016年6月开源的基于vue.jsvue传送门的小巧轻量的前端开发框架；weex可以直接在mvn项目中使用；weex提供了一个playground，可以方便的预览正在开发的页面（在Apple Store上可以下载）；weex可以支持Android iOS web三个平台；
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工程中使用?
本篇将一一讲解。
基础概念
- Homebrew： macOS套件管理器
- npm：avaScript 包管理工具
- weex-toolkit：官方提供的一个脚手架命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能
- Sublime Text：优雅的代码编辑器
- cocoaPods：iOS最常用最有名的类库管理工具
- .we：weex创建的文件类型
开始吧！
一、搭建开发环境
1、安装Homebrew
<code>/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"</code>
2、安装Node
<code>brew install node</code>
3、检测是否安装成功，目前为v7.7.3
<code>node -v</code>
安装完node后会自动安装npm，检查npm，目前为4.1.2
<code>npm -v</code>
4、npm安装weex-toolkit
<code>npm install -g weex-toolkit</code>
*可能会出现权限不够，用sudo执行；
<code>sudo npm install -g weex-toolkit</code>
*可能会出现Vue未安装警告，不用管。
查看版本，目前为v1.0.4
<code>weex -v</code>
验证是否安装成功
<code>weex -h</code>
出现下图表示成功，其中命令需要熟练使用。
weexhelp.jpg
至此weex环境搭建成功！
二、Weex下HelloWord
官方采用weex init创建项目，需要了解的可以穿越过去传送门，在此，感谢MountainX的博文采用Sublime Text创建编辑.we，相信大家对Sublime Text都有种亲切感。
1、使用Sublime创建一个名为helloWorld.we文件，添加代码：
<code>
<div>
<text>Hello World</text>
</div>
</code>
保存。
2、打开Terminal，cd到helloWorld.we所在目录，执行命令：
<code>weex helloWorld.we </code>
浏览器自动打开一个新的标签页，展示helloWorld.we的执行效果：
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工程
你可以选择从GitHub上直接下载Weex源码，你也可以通过cocoaPods集成 Weex SDK到iOS工程。
在此，讲述通过cocoaPods(伟大的iOS类库管理工具)集成。
mark一个福利：
cocoaPods安装
cocoaPods可能会遇到的问题
回归正题：
1、cd到你的应用根目录，pod init创建Podfile文件（如果已有Podfile文件则跳过），我本地的应用名称为weexTest，放在桌面
<code>
cd ~/Desktop/weexTest
pod init
</code>
2、查看weexSDK版本，目前版本是0.8.0
<code>
pod search 'weexSDK'
</code>
查看weex命令行工具ATSDK-Weex版本
<code>
pod search ATSDK-Weex
</code>
目前版本是0.8.0
3、打开Podfile， vim福利
<code>vim Podfile</code>
后如下图：
<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
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，现在走不通了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
至此，要寻找其他方法，在下一章中讲解。
网友评论