Weex实战开发

俗话说光说不练假把式。那就先来感受下Weex的魅力：

效果图.png

目前项目已上传至GitHub上，需要的可自行前去下载:
原生项目（Xcode）
Weex项目（WebStorm）

一.目的

        Weex虽然从阿里爸爸把它生出来也有两年时间了，但我想对于广大开发者来说，可能对它的了解少之又少。对于这种新鲜的事物，我们总是要持有敬畏的态度的，因为当你在进一步了解它的时候，你会发现它有无穷的魅力在吸引你。我当初就是被它的魅力深深吸引，想更深入的了解，但我在度娘那里没有找到多少真正的项目实战，即使有也是比较笼统的讲了一下大概，没有详细的介绍。因此我写此篇文章的目的是帮助那些刚刚开始接触Weex又急于想找个项目练手的新手玩家们，我会以一个初学者的角度，尽可能的讲解项目的每个细节。

二.声明

        对于小白：如果在这之前你没听说过Weex，那很好，这篇文章你可以读一读。啥？没兴趣？那我可以把Weex的广告语透露给你，Write Once, Run Everywhere。点我

        对于新手：如果你是刚刚开始接触并且跃跃欲试的新手玩家，正想找个真实项目练练手。那更好，这篇文章对你在合适不过了。跟我一起，边学边练。我会一步一步的介绍整个项目的流程。

        对于大佬：如果您是Weex大佬，那更好了。不要走，留下联系方式，小弟我有点问题想跟您请教请教。

学习门槛：

1.Vue：Vue语言基础

2.ES6：ECMAScript 6 入门

3.iOS或者安卓开发语言和编辑器基本使用

        还有一点我觉得有必要先声明一下，由于本人的文字能力有限，有些地方语言表达可能不太清楚，文章排版可能不太清晰，但是这又有什么关系呢，再大的困难也挡不住大家的热情啊！由于内容很长而本人时间有限，只能在工作之余写一些东西，所以打算不定时更新，不便之处还请谅解。好了废话不多说了，开始入正题吧。。。

三.那就开始吧

开发环境：macOS 10.13.4

开发工具：WebStorm 2018.1      Xcode 9.3

        本项目采用的是集成的方式，即将 Weex 集成到已有的应用。为什么呢？原因有两点，一：Weex TabBar（标签栏）和NavigationBar（导航栏）不太好用，需要用到第三方的组件，我想与其用第三方的不如直接用原生代码写了。二：本人认为项目中还是需要用原生的代码的，毕竟像Weex这种新生事物，很多地方有待完善，完全依赖未免在有些地方会存在力不从心，所以为了增强代码可控性，我建议使用集成的方式。（个人看法，不喜勿喷）

新建原生工程：

1.新建一个Xcode工程，建立目录结构如下：（里面的类文件暂时先不要建，之后会慢慢的一一说明）

原生项目结构.png

2.通过cocoaPods向项目中导入最新版本的WeexSDK，在 Podfile 文件中添加如下内容：（至于cocoaPods怎么使用就在这就不多赘述了，不会的可以去问问度娘）

target 'demo' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for demo
  pod 'WeexSDK'

  target 'demoTests' do
    inherit! :search_paths
    # Pods for testing
  end
  target 'demoUITests' do
    inherit! :search_paths
    # Pods for testing
  endend

        打开命令行，切换到你已有项目 Podfile 这个文件存在的目录，执行 pod install，没有出现任何错误表示已经完成环境配置。至此，原生的工程就算大功告成了。

新建Weex工程：

1.新建一个Weex工程，建立目录结构如下：（里面的类文件暂时先不要建，之后会慢慢的一一说明）

Weex项目结构.png

啥？你告诉我你不会！那不可能吧，既然都来实战了，我默认你会这些基本的操作了啊。哪有都上阵打仗了不会用枪的道理。。。（不会请看这里）

2.下一步就是进入刚刚创建的文件夹，并且安装依赖，然后执行 npm start：

cd your`s project file
npm install
npm start

        然后工具会启动一个本地的 web 服务，监听 8081 端口。

3.使用WebStorm打开Weex项目（Weex编译器有很多比如还有Sublime等等，使用哪个看个人爱好了）。在WebStorm里面打开2个终端，依次执行npm run build，npm run serve两条命令。

npm run build.png

npm run serve.png

作者：入夜_渐微凉
链接：https://www.jianshu.com/p/68c11018c505