加载中...

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

  



还没有评论.