weex项目实战篇(二)


本期六篇文章目录(可点击跳转)

一. 阿里Weex框架快速体验与环境搭建

二. weex sdk集成到Android工程

三. weex服务项目搭建

四. Weex优雅的“降级”到 HTML5

**五. weex项目实战篇(一) **

**六. weex项目实战篇(二) **


  1. 前言

经过前面的准备,我们终于可以开始上手weex项目了。本篇博客主要基于最近两周项目中用到的关于weex的知识点的整理。

2.新建weex项目

1)新建一个名为hongkong的项目,如图所示:
weex项目实战篇(二)_第1张图片

2 ) 输入项目名称
weex项目实战篇(二)_第2张图片

3)点击【create】则项目则创建成功
weex项目实战篇(二)_第3张图片

4)新建一个.we文件
[外链图片转存失败(img-W8mNvLn4-1569078182884)(https://img-blog.csdn.net/20170125230721737?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGZza2hnYWxzaGdrYWpnaGxqZ2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]

5)新建一个home.we文件后,项目目录如下所示:
weex项目实战篇(二)_第4张图片

6)为了方便参考阿里playground中的例子源码,我们把playground源码中的examples文件夹也拷贝到项目中,如下所示:
weex项目实战篇(二)_第5张图片

7)可能你会发现我上图还有几个文件目录
image—存放图片
include—存放公共文件,类似做原生项目,比如title标题,每个xml都一样,这样我们做一个公共的,其他页面去include进去,这个文件夹下面就是放的公共页面。
node_modules—用到weex扩展组件的时候,在terminal中输入指令,则会自动生成,后面会介绍。
weex_tmp—编译weex文件后,生成的文件夹,可以想象成原生的build文件夹。

3.项目需求

需要实现如下所示界面:
weex项目实战篇(二)_第6张图片
其实很多电商公司的首页面都是这样的楼层布局,我们实现出这个界面也就可以算大概会使用weex了。

刚刚拿到这个界面用weex实现的时候,很多人觉得无从下手,不是难,而是不熟悉,没有参考demo,我这篇文章就算抛砖引玉,带大家入门。

首先,如果让你用原生去实现首页,如何去做?
很简单,用listview或者recycleview,再配合itemType,用多套itemView即可实现,那语言其实都是想通的,既然原生可以用listview去实现,那weex里面是不是有listview控件,并且还有item的概念,我们通过查官方文档,果然是有的。
官方文档地址:https://weex-project.io/cn/v-0.10/references/components/list.html
这份官方文档,希望大家做项目前,可以逛一遍,不用全部记住,至少有个大概印象,知道有哪些控件,如何使用,等项目中需要具体用到,再去当做工具书去查。
比如:
官方文档里面说明,Weex 代码由 < template>、< style>、< script> 三个部分构成。