加载中...

weex快速上手教程-weex集成到iOS工程注意事项

前言：Hybird混合开发如今是前端开发的大趋势，那么好处就是跨平台，那么就能大大提升开发效率。但是肯定有不足之处，那就是没有native开发的用户体验好，关于两者的区别，这里不做说明。

          weex是阿里巴巴公开开源的混合开发的SDK，既能提高开发效率，又能有native的效果。


一：如何将weexSDK集成到iOS项目中，本文重在说明，参照官方文档的每一个细节知识点进行详细说明，以及一些不起眼的坑，

       先附加下weex的中文版官方文档 https://github.com/weexteam/article/issues ，对于官方文档中的说明，我也是无力吐槽了，（话不多说，如果官方文档写的好，你也就不会搜博客解决问题了，希望阿里能逐步完善吧）。

      楼主也一步步配置过，一路上坎坷不断，关键是还没人指引，本篇我就尽力写到详细吧。


二：为了您的更好理解weex，再次强调下，先看看 https://github.com/weexteam/article/issues链接下的  Weex快速上手教程(Weex Tutorial)这个文档。

   楼主在配置的时候，也是先上手的这里，如果您不想了解，可直接看iOSweex集成入门中Hybird开发中集成weex到iOS工程（二），集成到IOS的工程中。。


三：Weex快速上手教程(Weex Tutorial)这个文档的详细解释,(我会给出详细的提示，图片提供参考)；

   3.1  我们先编写一个列表项

请创建一个名为 tech_list.we 的文件(.we 是Weex推荐的后缀名 ) ，请复制粘贴以上代码于其中

说明：.we文件是什么，怎么创建，是不是蒙蔽了（楼主当时就愤怒了，为何不详细），下面楼主讲一步步说明

       3.1.1 ： 首先创建一个文件夹， tech_list.we文件夹，文件夹（重要的事情说三遍，文件夹偷笑），文件夹目录下在创建一个tech_list.we的文件，这个不是文件夹。

       3.2.2 ： .we的文件怎么创建，对不起找不到资料怎么创建，但是可以弄出来，（gitHub下载weex的包），在ios/playground里面，会有很多.we的文件，复制一个出来，重命名 tech_list.we，复制下面的代码，打开.we文件， 粘贴。。。。！！！！（详细的我想吐，这些东西文档中没有） 

<template>
  <divclass="Container" >
    <divclass="cell">
       <imageclass="thumb"src="http://t.cn/RGE3AJt"></image>  
       <textclass="title">JavaScript</text>
    </div>
  </div>
</template>

<style>
  .cell{margin-top:10 ;margin-left:10 ;flex-direction: row; }
  .thumb {width:200; height:200; }
  .title {text-align:center ; flex:1; color:grey; font-size:50; }  
</style>

     就是弄成这样就行了

 

  3.2   下载 Node.js ，

    3.2.1:打开终端，什么都不用写 ，直接复制，


      brew install node

     默默等待5分钟左右，由于楼主已经装过了，没有图了，回头换了电脑不上，终端会出现一个长方形在转圈，然后一个大的长方形，反正耐心等待就行了。

 3.3  在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序Weex Toolkit ，直接复制


         npm install -g weex-toolkit

        

这是正在装，耐心等待

       

出现这种情况就是已经装好了，

  

确保weex版本号大于0.1.0，终端输入（）

    $ weex--version

    info 0.3.4

到这里，环境也已经配置好了

 3.4  运行.we文件 ，打开终端，切换到tech_list.we文件夹下，（这就是一开始强调的为什么是文件夹）

     cd  将tech_list.we文件夹，拖进来

     weex tech_list.we

   然后就会出现界面了，后来的配置基本没问题，https://github.com/weexteam/article/issues/4，参照这个文档接着往后弄吧，基本不会出问题。

 3.5 最后出现的二维码：

这个二维码需要配合 Weex Playground App工作。下载安装后点击App中的扫码图标，然后用你的手机摄像头扫描终端中的二维码。一个漂亮的列表将出现在你的手机中。

  （这是官方文档的原话，我也是很郁闷，就不能说清楚吗）

 拿起你的苹果手机，APPStore中下载weex playground  打开App，左上角的扫码，OK了。

原文 http://blog.csdn.net/horisea/article/details/52083393

  


还没有评论.