KNOWEDGE+SOLUTION
Weex实战开发
http://vintagebleuettes.com
 

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

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

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

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

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

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

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

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

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

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

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

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

  然后在项目下会自动生成一个叫dist文件夹,里面的index.js文件就是我们需要放到服务器上的。当执行完npm run serve命令后,浏览器会自动打开一个窗口,名叫Weex Preview,可以动态查看页面在Web 下的渲染效果。 源代码在 src/ 目录中,你可以像一个普通的 Vue.js 项目一样来开发。

  (1)创建GlobalDefine文件,里面加1条宏,其值就是Weex工程中index.js文件的路径。这样做的好处就是当我们在Weex项目中修改好代码之后,原生项目只需要重新加载一次js文件就可以同步看到修改之后的效果,不需要每次都拷贝过来,然后在build一次原生项目。

  (3)在info.plist中添加Allow Arbitrary Loads并设置值为YES(不会就点我)。如果不设置会无法进行http请求哦,当然也加载不了网络图片咯。

  (6)在WeexConfig目录下创建WeexSDKManager类,用来对WeexSDK的初始化,以及相关自定义组件的注册都可以放在该类里面(我们前面自定义的图片下载WXImgLoaderDefaultImpl就放在这里面注册)。

  (8)万事俱备,接下来需要我们把WeexSDK用起来啊,这就是使用SDK将打包生成的js文件解析成各平台原生组件的过程。进入HomeViewController(首页),代码如下。

  至此我们原生部分代码就可以告一段落了,之后在写“商家”、“我的”和“更多”的时候还需要再回来,接下里我们大部分工作都会在Weex项目中完成。

  1.为了简化页面设计和实现, 屏幕的宽度统一为750像素,不同屏幕会按照比例转化为这一尺寸。

  2.标准CSS支持很多样式选择器, 但Weex目前只支持单个类的选择器。

  3.标准CSS支持很多的长度单位,Weex目前只支持像素,并且px在样式中可以忽略不写, 直接使用对应的数值。

  4.标准CSS包含了非常多的样式属性,但Weex只支持了其中的一部分,包括盒模型,flexbox,position等布局属性。以及font-size,color等样式。

  5.v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值=表达式。

  7.项目中图片地址均采用基础地址+名称的方式拼接,如果出现图片加载不出来的情况可以在globalDefine.js将resUrl更换成自己本机的ip地址即可。(至于Weex的图片导入方式我建议看一下这篇文章:Weex导入图片)

  8.你或许会问为什么我把样式直接写在行内了,个人习惯而已,我喜欢把样式代码比较少的或者不是公共样式采用内联样式,其他的用页内样式。不然一个标签一个class得把我累死。

  当我们执行了npm run serve命令之后,我们每一次改变都会自动在Weex Preview渲染,相应的我们点击iOS模拟器重新加载index.js文件会得到最新的页面渲染效果。

  2.导航栏做好了接下来就是正文的列表页,整个列表用一个scroller组件包装,里面的每一个cell分开来写,这样可以减轻首页的代码量。

  1.由于篇幅的原因我就不把所有代码都截上来了,这里只选取相对重要的部分,需要的童鞋请前去下载完整项目。

  2.为什么用slider而不用scroller?slider组件用于在一个页面中展示多个图片,在前端,这种效果被称为轮播图。它支持任意类型的Weex组件作为其子组件,而且它有一个专属子组件—indicator用于显示轮播图指示器效果,这个indicator必须充当slider组件的子组件使用才有效果。

  循环创建每一个item,注意v-for语句的写法。如果只是一重循环直接v-for=item in items就可以了,其中item就是items里面的每一个元素,在其子组件中可以直接使用item赋值。

  5.indicator作为子组件之间写在slider里面就可以了,他会自动随着slider的滑动而改变指示器。

  6.text组件只能包含文本值,你可以使用 {{}} 标记插入变量值作为文本内容。不支持子组件。

  1.头部购物中心由于在很多地方都可以用到,且样式差不多,所以可以单独抽出一个组件来用homeBottomCommonCell,这里我觉得有必要注意一下正向传值。正向传值的变量名写在组件的props里面,使用的时候需先在script里面引用该组件,然后在components里声明该组件,然后就可以当做正常标签一样来使用了。给组件赋值的语句写在第一个尖括号里面(如果赋的值是一个变量,则需在前面加:,比如

  5.引用路径:看想引用的文件是否和所在文件处在同一文件夹下,如果在是则只需一个点,如果不在则需两个点然后接对应的文件夹名称。

  这里由于没有什么新的东西就不贴代码了,挺占地方的,注意一下布局技巧,需要的去下载下来看就可以了。

  1.公共部分采用上面一样的办法,内容部分使用list组件。

  2.数据来源,这部分的数据来源自网络,因此网络请求是这块比不可少的,好在Weex本身提供网络请求模块(fetch)。首先引入stream(var stream = weex.requireModule(stream)),在methods周期函数里定义getNews方法,然后created周期函数里调用getNews,传入url,这里fetch请求如果在网页端可能会出现跨域的问题,但是在线.list的高度,本来想等list设置内容并布局成功后拿到内容高度来设置list的高度,然而想法是美好的现实是残酷的。搞了半天没成功,最后只能用等高的cell,用cell的高度乘以数量来设置list高度(有哪位大佬知道怎么做麻烦告诉我下哈)。由于这里是动态的改变组件的高度,所以v-bind就必不可少了。在list标签里面绑定高度样式(v-bind:style={height:listHeight}),随后在网络数据请求成功后计算好总高度赋值给listHeight就可以动态改变高度了。

  5.标签里面函数调用,由于数据返回时图片的链接需要我们处理,所以得写一个专门处理图片链接的函数(dealWithImgUrl),在设置image的src是调用,调用格式(:src=dealWithImgUrl(shop.imageUrl))。

  1.这个页面很简单,一个web组件搞定,主要是熟悉Weex的web组件是使用,web 不支持任何嵌套的子组件,并且必须指定 width 和 height 的样式属性,否则将不起作用。

  2.要加载的网页内容的 URL。必须指定一个基于 bundle URL 的相对 URL,它将被重写为真实资源 URL(本地或远程)。

  页面就不多说了,这里重点讲一下怎么使用原生控件来自定义组件。switch组件已不推荐业务上使用,因为各端实现不一致且端上定制能力较弱,不适合作为内置组件实现,因此建议开发者通过 weex 上层能力自行定制该组件。

  1.v-if ,v-else,这是vue的条件语句,如果v-if的条件判断成立就创建if的组件,否则创建v-else组件。

  在工作中,我们时常会看到表现积极,勤劳肯干的活跃分子,仿佛他们一旦进入工作状态,就有着做不完的事情,开不完的会议,...

  因为想写一些有关教堂的文章,多次说去教堂感受一下气氛都没成行,前天终于身临其境。 教堂里的歌声抑扬顿挫牵制心灵...

  一湖水被截断了源头,便失去了一湖的美丽,没有了生机。 两只风筝在高空相遇,碰撞后便失去了重心,摇摇欲坠。 几粒蒲公...

  老鼠过街,人人喊打。之所以会有这样的谚语,是因为老鼠常常偷食人类的食物。原本以为它们只会在农村家庭肆意妄为...

CONTACT
工作时间(Working Hours):周一至周五(Mon-Fri): 9:00-18:00 周末及节假日(Weekend & Holidays): 9:00-12:00
ADDRESS: 广东省湛江市开发区金地花园11栋

E-MAIL:13030199666@qq.com
PHONE: 13030199666
QQ: 13030199666

LEAVE A MESSAGE
You can say something,or design service and consulting