初识 weex 系列（前端视角） - 基础完结

由于组件和模块一篇讲不完，接着上一篇，继续讲组件和模块

list和scoller组件 实现上拉刷新和懒加载

• list组件就像是ul标签，官方给出的demo是上拉加载的一个滚动效果(网页显示不了，要在手机上跑)
• list组件能够绑定一个事件loadmore：就是下拉到最底部的时候就会出发的事件（很好用）
  在html里面有ul和li是吧，在weex 里面，就是list 和cell，他们都是好基友
  可是:list是没有高度的，而且不能设置高度，能够设置宽度

  <list class="list" @loadmore="fetch" loadmoreoffset="10">
    <cell class="cell" v-for="num in lists"> <div class="panel"> <text class="text">{{num}}</text> </div> </cell>
  </list>复制代码

scoller和list的区别

scoller用法跟list很像，我说说区别就好

• list下面是cell，scoller下面是div
• scoller能够横向滚动，list不能够
  scoller能够控制是否显示滚动条，没有滚动条的能够不设置高，有滚动条的必定要设置高
  建议这五个组件一块儿学(list=>cell=>refresh=>scoller=>loading)

refresh组件

<scroller class="scroller">
    <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
      <text class="indicator">Refreshing ...</text>
    </refresh>
    <div class="cell" v-for="num in lists">
      <div class="panel">
        <text class="text">{{num}}</text>
      </div>
    </div>
  </scroller>复制代码

在官方demo里面，refresh是有两个事件.

• refresh： 下拉加载开始触发
• pullingdown:下拉加载完成触发
• display是一个属性(在安卓端测试才能成功)在weex里面，隐藏显示全靠这个属性 ，写在css样式内无效，

  <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">复制代码

  不过list自带加载功能@loadmore属性，所refresh下拉刷新组件会用的比较少。
  我的建议，若是只要下拉刷新直接用list组件，若是想下拉以后发生一些事情，能够加一个refresh组件，只是功能强大一丢丢。

loading组件

loading组件和refresh是相反的，一个是下拉刷新，一个是下拉刷新

switch组件

switch只有ios系统下才能够vue数据驱动试图。只有ios系统下才能很好的使用switch，其余系统仍是不要使用switch，其余系统想用，解决办法就是自定义一个组件吧。

textarea组件

就说一点，文本域组件只有在app才能输入。

slider和indicator组件

也是三端不一样一。
网页不会自动轮播，auto-play为true也没用

<slider class="slider" interval="3000" auto-play="true">
      <div class="frame" v-for="img in imageList"> <image class="image" resize="cover" :src="img.src"></image> </div>
    </slider>复制代码

indicator组件

indicator 组件用于显示轮播图指示器效果，必须充当 slider 组件的子组件使用，就是轮播图的中的快速移动的点，可是点的颜色和大小在网页端和移动端显示效果不一样

要注意的一点是，在indicator组件的css样式表多了三个属性

通用事件

在weex中，几乎全部的组件几乎都支持通用事件，因此，最好记住全部的通用事件，特殊事件你能够再查api

click事件

<input> 和 <switch> 组件目前不支持 click 事件，请使用 change 或 input 事件来代替。复制代码

weex 的事件跟网页中的事件是不同的，彻底属于原生的事件

longpress事件：长按，例如长按弹出复制粘贴

Appear事件 ：使用场景通常是打开显示的时候会触发一些功能，例如当咱们进入到一些页面，部分页面元素就会移动，漂浮的状态去吸引你，甚至是广告。

若是一个位于某个可滚动区域内的组件被绑定了 appear 事件，那么当这个组件的状态变为在屏幕上可见时，该事件将被触发。复制代码

Disappear 事件：使用场景通常是隐藏的时候，禁止一些功能，好比说地理位置啊，消息推送，等等

若是一个位于某个可滚动区域内的组件被绑定了 disappear 事件，那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。复制代码

Page 事件

viewappear 事件会在页面就要显示或配置的任何页面动画被执行前触发，例如，当调用 navigator 模块的 push 方法时，该事件将会在打开新页面时被触发。viewdisappear 事件会在页面就要关闭时被触发。

animation模块

动画模块，相似咱们前端的transition属性，可是他的动画效果很弱，比前端的弱多了，能够看看官网的demo，这里没有坑，放心使用

picker模块

picker模块用于数据选择，日期选择，时间选择。（目前 H5 暂不支持该模块)
要注意的是，picker模块有两种模式

• pickTime(options, callback[options]) //时间

* pickDate(options, callback[options]) //日期

在调试的时候，竟然崩溃了。

clipboard模块

咱们能够经过 clipboard 模块的 getString()、setString() 接口从系统的粘贴板获取内容或者设置内容。复制代码

setString(text):复制 //ctrl+c
getString:粘贴 //ctrl+v

dom模块

由于app没有dom节点的概念，就有了dom模块，咱们能够简单操做一些dom,好比滚动到某个节点上,截取官网demo

css
    <text class="text" :ref="'text'+index">{{name}}</text>
js
     goto20 (count) {
        const el = this.$refs.item20[0]
        dom.scrollToElement(el, { offset: 0 })
      }复制代码

getComponentRect(ref, callback) :获取容器的 style

addRule

addRule是能够为dom 添加一条规则，目前支持自定义字体fontFace规则，构建自定义的font-family，能够在text使用复制代码

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
    'fontFamily': "iconfont2",
    'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});复制代码

tips： 其实按照vue数据驱动的思想，咱们是不推荐操做dom的，并且原声app也没有dom的概念，不到万不得已，仍是少操做dom

navigator模块

还记得咱们前面用过的 a组件吗，假如我点击a标签跳转到了一个新的页面，咱们怎么回退到原来的页面呢?就能够用navigator模块的功能，这个模块的功能有点像html5里面的 history API
push对应浏览器的前进， pop对应浏览器的后退。

pop还有一个用途：当咱们在第一页，pop还有关掉app的做用。

storage模块

storage 是一个在前端比较经常使用的模块，能够对本地数据进行存储、修改、删除，而且该数据是永久保存的
等于前端的cookie，理论上它是无限制大小的，
storage 经常使用在一些被用户常常查询，可是又不频繁更新的数据，好比搜索历史、用户的订单列表等。搜索历史通常状况都是做为本地数据存储的，所以使用 storage 比较合适。而用户订单列表是须要本地存储和服务端器检索配合的场景。当一个用户下单后，会常常查阅我的的订单列表。可是，订单的列表数据不是频繁更新的，每每只有在收到货品时，才更新“已签收”，其他平时的状态是“已发货”。所以，可使用 storage 存储订单列表，能够减小服务器的压力，例如减小 SQL 查询或者缓存的压力。当用户查看订单详情的时候，再更新数据状态。

const storage = weex.requireModule('storage')
  const modal = weex.requireModule('modal')
setItem () {
        storage.setItem('name', 'Hanks', event => {
          this.state = 'set success'
          console.log('set success')
        })
      },
      getItem () {
        storage.getItem('name', event => {
          console.log('get value:', event.data)
          this.state = 'value: ' + event.data
        })
      },
      removeItem () {
        storage.removeItem('name', event => {
          console.log('delete value:', event.data)
          this.state = 'deleted'
        })
      },
      getAll () {
        storage.getAllKeys(event => {
          // modal.toast({ message: event.result })
          if (event.result === 'success') {
            modal.toast({
              message: 'props: ' + event.data.join(', ')
            })
          }
        })
      }复制代码

webview

是对前面web组件的一个应用，
一系列的 组件操做接口。 好比 goBack、goForward、和 reload。webview module 与 组件共用。
作出来如下效果，例如，模仿一个浏览器的功能，有输入地址，刷新，前进的功能。挺好用的

globalEvent:

这个要有安卓的基础，我真的hold不住，有兴趣的同窗能够去看看官网，由于这是监听陀螺仪，定位信息之类的事件。

webscoket

以前是.we文件才支持webscoket,如今貌似支持.vue文件了，可是我测试了一下，好像仍是不行，

总结

到这里，全部组件和模块都已经说完了，我把不少内建组件和模块，都对应着html来说，虽然讲的不太好，但仍是把官网生涩难懂的名词，浅析了一下，我的以为对前端工程师仍是很友好的 ，从环境搭建到api的踩坑（真的挺多坑），过程真的比较辛苦，不过，学了weex才有一种掌握vue全家桶的感受啊，仍是那句话，若是你会vue.js，都是so easy.
附上本系列以往连接：

• 初识weex系列（前端视角） - 环境搭建
• 初识weex系列（前端视角） - 使用vue2.0
• 初识weex系列（前端视角） - 步入正轨