零基础学习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 <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，现在走不通了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

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