安卓比较复杂的weex例子

---------- 本期六篇文章目录(可点击跳转) -- [**一. 阿里Weex框架快速体验与环境搭建**](http://blog.csdn.net/dfskhgalshgkajghljgh/article/details/52712293) [**二. weex sdk集成到Android工程**](http://blog.csdn.net/dfskhgalshgkajghljgh/article/details/52757849) [**三. weex服务项目搭建**](http://blog.csdn.net/dfskhgalshgkajghljgh/article/details/52776277) [**四. Weex优雅的“降级”到 HTML5**](http://blog.csdn.net/dfskhgalshgkajghljgh/article/details/52797939) [**五. weex项目实战篇（一）**](http://blog.csdn.net/dfskhgalshgkajghljgh/article/details/54731173) [**六. weex项目实战篇（二）**](http://blog.csdn.net/dfskhgalshgkajghljgh/article/details/54732559) ---------- 1. 前言 ----- 经过前面的准备，我们终于可以开始上手weex项目了。本篇博客主要基于最近两周项目中用到的关于weex的知识点的整理。 2.新建weex项目 ---------- 1）新建一个名为hongkong的项目，如图所示：  2）输入项目名称，如图所示：  3）点击【create】则项目则创建成功，如图所示：  4）新建一个.we文件，如图所示：  5）新建一个home.we文件后，项目目录如下所示：  6）为了方便参考阿里playground中的例子源码，我们把playground源码中的examples文件夹也拷贝到项目中，如下所示：  7）可能你会发现我上图还有几个文件目录 image---存放图片 include---存放公共文件，类似做原生项目，比如title标题，每个xml都一样，这样我们做一个公共的，其他页面去include进去，这个文件夹下面就是放的公共页面。 node_modules---用到weex扩展组件的时候，在terminal中输入指令，则会自动生成，后面会介绍。 weex_tmp---编译weex文件后，生成的文件夹，可以想象成原生的build文件夹。 3.项目需求 ------ 项目中需要实现如下所示界面，如图所示：下图是个首页面，其实很多电商公司的首页面都是这样的楼层布局，我们实现出这个界面也就可以算大概会使用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> 三个部分构成。 ``` <template>：必须的，使用 HTML 语法描述页面结构，内容由多个标签组成，不同的标签代表不同的组件。 <style>：可选的，使用 CSS 语法描述页面的具体展现形式。 <script>：可选的，使用 JavaScript 描述页面中的数据和页面的行为，Weex 中的数据定义也在 <script> 中进行。 ``` 像上述的基本概念，必须要掌握，不然项目是进行不下去的。 4.项目实战 ------ 下面的讲解，默认官方文档粗略的浏览了一遍。 1）官方list例子如下所示： ``` <template> <list class="list"> <cell class="row" repeat="item in rows" index="{{$index}}"> <text class="item-title">row {{item.id}}</text> </cell> </list> </template> <style></style> <script> module.exports = { data: { rows:[ {id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5} ] } } </script> ``` 在webstorm的terminal中输入weex test.we后  几秒后，则自动打开浏览器，并展现上面的效果。  可见一个简单的list已经展示出来了，接下来我们就要改造实现我们需要的效果。 2）这边我讲下我当时的思路： 1.从上向下布局，可以看到第一行就是一个搜索框，用到的知识点就是< text>< div>< image>,有些属性不熟悉，可以查官方文档，布局位置通过style慢慢调整，https://weex-project.io/cn/v-0.10/references/common-style.html这个目录主要讲解位置调整，可以详细阅读。 2.尽量用官方的示例来改，比如用到< img>控件，我们不用自己去写，直接从官方文档，粘贴下来，再做修改，避免自己书写出现错误，从而真的是从入门到放弃。 3.下面的楼层布局，就是几个循环，再加上简单的控件使用 3）首页源码 ``` <template> <div> <div class="header"> <div style="flex-direction: row;align-items: center;margin-top: 18;"> <div class="title-background" onclick="queryShops"> <img style="width: 30;height: 30;" src={{query}}></img> <text class="title-query">搜索商品</text> </div> <div style=" height: 36;margin-left: 30"> <img style="width: 36;height: 36;" src={{scan}} onclick="scanClick"></img> </div> </div> </div> <list onloadmore="onloadmore" loadmoreoffset="80"> <refresh onpullingdown="onpullingdown" onrefresh="onrefresh" display="{{refreshDisplay}}" style="width:750;flex-direction: row;justify-content: center;"> <loading-indicator style="height:80;width:80;color:#3192e1"></loading-indicator> </refresh> <cell id="item-0" onappear="hideTop"> <div> <slider class="slider" interval="3000" auto-play="true"> <div class="slider-pages" repeat="item in sliderContent" oncl