零基础学习weex（一）Vue1.0

作为一个纯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
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2、安装Node
brew install node
3、检测是否安装成功，目前为v7.7.3
node -v
安装完node后会自动安装npm，检查npm，目前为4.1.2
npm -v
4、npm安装weex-toolkit
npm install -g weex-toolkit
*可能会出现权限不够，用sudo执行；
sudo npm install -g weex-toolkit
*可能会出现Vue未安装警告，不用管。
查看版本，目前为v1.0.4
weex -v
验证是否安装成功
weex -h
出现下图表示成功，其中命令需要熟练使用。

weexhelp.jpg

至此weex环境搭建成功！

二、Weex下HelloWord

官方采用weex init创建项目，需要了解的可以穿越过去传送门，在此，感谢MountainX的博文采用Sublime Text创建编辑.we，相信大家对Sublime Text都有种亲切感。
1、使用Sublime创建一个名为helloWorld.we文件，添加代码：


 Hello World

保存。
2、打开Terminal，cd到helloWorld.we所在目录，执行命令：
weex helloWorld.we
浏览器自动打开一个新的标签页，展示helloWorld.we的执行效果：

helloWorld.jpg

*链接中的hot reload，验证了热更新
用手机安装的WeexPlayground扫描，同步运行在app中。
3、上面的示例只是一个非常简单的雏形，而一个比较完整的Weex程序包括三个部分：模板（Template）、样式（Style）和脚本（Script）。用Sublime打开helloWorld.we，编辑

保存。见证奇迹的一刻到了，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，放在桌面
cd ~/Desktop/weexTest pod init
2、查看weexSDK版本，目前版本是0.8.0
pod search 'weexSDK'
查看weex命令行工具ATSDK-Weex版本
pod search ATSDK-Weex
目前版本是0.8.0
3、打开Podfile， vim福利
vim Podfile
后如下图：

 
 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
4、编辑Podfile
你可以输入上面weexSDK版本，也可以不指定，编辑后如图：

 
 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
4、执行Podfile，pod install安装
pod install

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，现在走不通了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

至此，要寻找其他方法，在下一章中讲解。