初識 weex 系列（前端視角） - 基礎完結

時間 2019-11-17

標籤 weex 系列前端視角基礎完結简体版

原文原文鏈接

由於組件和模塊一篇講不完，接着上一篇，繼續講組件和模塊javascript

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很像，我說說區別就好css

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是有兩個事件.html

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，其餘系統想用，解決辦法就是自定義一個組件吧。vue

textarea組件

就說一點，文本域組件只有在app才能輸入。html5

slider和indicator組件

也是三端不一樣一。
網頁不會自動輪播，auto-play爲true也沒用java

<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 組件的子組件使用，就是輪播圖的中的快速移動的點，可是點的顏色和大小在網頁端和移動端顯示效果不一樣ios

要注意的一點是，在indicator組件的css樣式表多了三個屬性

通用事件

在weex中，幾乎全部的組件幾乎都支持通用事件，因此，最好記住全部的通用事件，特殊事件你能夠再查apiweb

click事件

<input> 和 <switch> 組件目前不支持 click 事件，請使用 change 或 input 事件來代替。複製代碼

weex 的事件跟網頁中的事件是不同的，徹底屬於原生的事件api

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.
附上本系列以往連接：