Weex-進階筆記一

JS Framework

JS Framework在初始化階段被原生JavaScript引擎運行. 它提供被每一個JS Bundle調用的 define() 和 bootstrap() 函數. 一旦JS Bundle從服務器下載後，這些函數就會執行. define() 函數以註冊模塊;bootstrap()會編譯主要的模塊爲虛擬DOM，併發送渲染指令給Native .

JS 和 Native 的溝通主要經過兩個關鍵方法進行:

• callNative 是一個由native代碼實現的函數, 它被JS代碼調用並向native發送指令,例如 rendering, networking, authorizing和其餘客戶端側的 toast 等API.
• callJS 是一個由JS實現的函數, 它用於Native向JS發送指令. 目前這些指令由用戶交互和Native的回調函數組成.

 

 

 

 

 

Weex 渲染流程

1. 虛擬DOM.
2. 構造樹結構. 分析虛擬DOM JSON數據以構造渲染樹(RT).
3. 添加樣式. 爲渲染樹的各個節點添加樣式.
4. 建立視圖. 爲渲染樹各個節點建立Native視圖.
5. 綁定事件. 爲Native視圖綁定事件.
6. CSS佈局. 使用 css-layout 來計算各個視圖的佈局.
7. 更新視窗(Frame). 採用上一步的計算結果來更新視窗中各個視圖的最終佈局位置.
8. 最終頁面呈現.

在Weex HTML5環境下 CSS 佈局 and 更新視窗 由瀏覽器引擎(例如webkit)實現.

 

 

 

1. WXDevtool依賴
   

你的app必須連接下面的frameworks/dylibs

• libicucore.dylib
• CFNetwork.framework
• CoreData.framework
• Security.framework
• Foundation.framework

 

 

 

 

Bootstrap

除了其默認的意義，<script>標籤支持在頁面的頂級組件中經過 type 屬性定義兩種配置。

• type="data": 配置初始化數據，這裏定義的數據會覆蓋定義在<script>中的數據；
• type="config": 定義配置項。

<script type="data">

  /* (可選) 定義初始化數據 */

</script>

 

<script type="config">

  /* (可選) 定義配置項 */

</script>

 

 

style

爲元素定義行內樣式。

<div style="width: 200px; height: 200px; color: #ff0000;"></div>

<div style="padding: {{x}}; margin: 0"></div>

class

爲元素定義一個或多個類名（引用樣式表中的類）。

<div class="button"></div>

<div class="button {{btnStatus}}"></div>

 

 

Appear 事件

若是一個位於某個可滾動區域內的組件被綁定了 appear 事件，那麼當這個組件的狀態變爲在屏幕上可見時，該事件將被觸發。

事件對象

• type : appear
• target : 觸發 Appear 事件的組件對象
• timestamp : 事件被觸發時的時間戳
• direction : 觸發事件時屏幕的滾動方向，up 或 down

 

 

Disappear 事件

若是一個位於某個可滾動區域內的組件被綁定了 disappear 事件，那麼當這個組件被滑出屏幕變爲不可見狀態時，該事件將被觸發。

事件對象

• type : disappear
• target : 觸發 Disappear 事件的組件對象
• timestamp : 事件被觸發時的時間戳
• direction : 觸發事件時屏幕的滾動方向，up 或 down

 

 

Page 事件

注意：僅支持 iOS 和 Android，H5 暫不支持。

Weex 經過 viewappear 和 viewdisappear 事件提供了簡單的頁面狀態管理能力。

viewappear 事件會在頁面就要顯示或配置的任何頁面動畫被執行前觸發，例如，當調用 navigator 模塊的 push 方法時，該事件將會在打開新頁面時被觸發。viewdisappear 事件會在頁面就要關閉時被觸發。

與組件的 appear 和 disappear 事件不一樣的是，viewappear 和 viewdisappear 事件關注的是整個頁面的狀態，因此它們必須綁定到頁面的根元素上。

特殊狀況下，這兩個事件也能被綁定到非根元素的body組件上，例如wxc-navpage組件。

事件對象

• type : viewappear 或 viewdisappear
• target : 觸發事件的組件對象
• timestamp : 事件被觸發時的時間戳

 

 

 

<content>

<content> 在編寫組件模板時做爲做爲內容節點元素存在，使用時將被真正的元素替換。

替代寫法: <slot>。

 

 

<div> 組件是用於包裝其它組件的最基本容器。支持全部的通用樣式、特性、flexbox 佈局。其相似於 HTML 的 <div> 容器，但不能直接在裏面添加文本（字符串），若是要展現文本，應該使用 <text> 組件。歷史版本中，<div> 別名是 <container>，目前已經棄用。

 

事件

<div> 支持全部通用事件：

• click
• longpress
• appear
• disappear

查看 通用事件

 

子組件

支持任意類型的 Weex 組件做爲其子組件。 其中，還支持如下兩個特殊組件做爲子組件：

• <refresh>
  用於給列表添加下拉刷新的功能。
  使用文檔請查看 <refresh>
  
• <loading>
  <loading> 用法與特性和 <refresh> 相似，用於給列表添加上拉加載更多的功能。
  使用文檔請查看 <loading>
  

擴展

scrollToElement(node, options)

滾動到列表某個指定項是常見需求，<list> 拓展了該功能支持滾動到指定 <cell>。經過 dom module 訪問，更多信息可參考 dom module 。

 

 

ViewModel APIs

• this.$vm(el)
• this.$el(el)
• this.$getConfig()
• this.$emit(type, data)
• this.$dispatch(type, data)
• this.$broadcast(type, data)

ViewModel Options

• data
• methods
• computed
• init, created, ready
• events

 

 

示例：

module.exports = {

 

  data: function () {

    return {

      x: 1,

      y: 2

    }

  }

 

  methods: {

    foo: function () {

      console.log('foo')

    }

  },

 

  computed: {

    z: function () {

      return this.x + this.y

    }

  },

 

  events: {

    custom: function (e) {

      console.log(e)

    }

  },

 

  init: function () {},

  created: function () {},

  ready: function () {}

}

 

 

在咱們開發組件是，一個最佳實踐是不要在根元素中添加數據綁定，由於當其餘組件引用這個組件時，可能會定義相同命名的數據，形成串擾。這就是咱們爲何咱們會把 dialog 包裹在一個沒有任何特性的 div 中。