iOSweex集成入门,weex快速上手教程,weex集成到iOS工程注意事项(一)
前言:Hybird混合开发如今是前端开发的大趋势,那么好处就是跨平台,那么就能大大提升开发效率。但是肯定有不足之处,那就是没有native开发的用户体验好,关于两者的区别,这里不做说明。 weex是阿里巴巴公开开源的混合开发的SDK,既能提高开发效率,又能有native的效果。一:如何将weexSDK集成到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了。
最后说两句:相信大家也是一样,在接触新的东西操作的时候,都希望有一些过程能附加上阶段性的运行效果,因为哪一步错了,都很难找到结果。。不说了,说实话,我看官方文档已经看哭了,相信还有一些看英文文档的更是直接跪了,希望可以帮到你,致于配置这个有什么用,我是不清楚。文档中说这是,Weex快速上手教程,那么就说明你已经快速上手了。。
看这篇文章时,请打开我给的链接对比着看,只是对官方文档进行了说明,如有不对的地方请指正,,后来的两篇文章会写如何集成weex到工程中,以及github中下载的weexdemo怎么运行。。楼主其他博客中有联系方式,如今还没解决问题,欢迎前来交流。
请看iOSweex集成入门,weex集成到iOS工程注意事项(二)
iOSweex集成入门,weex demo如何运行,以及如何修改(三)http://blog.csdn.net/horisea/article/details/52084155
如果你喜欢这篇文章,或者有任何疑问,可以扫描第一个二维码,加楼主好友哦
也可以扫第二个二维码,关注楼主个人微信公众号。这里有很多生活,职业,技术相关的文章哦。欢迎您的到来。
微信号: 公众号
更多推荐
所有评论(0)