weex是阿裡2016年開源的項目，号稱通過撰寫HTML/CSS/JavaScript來開發原生android/ios的UI界面，并且接近原生的性能體驗。“寫一次，多端編譯”一直是無線移動追求的目标，既然阿裡牛皮吹得這麼大，本人也非常迫切體驗一下。下面整理了一下學習weex的步驟和知識點，僅作入門參考。
一、Weex環境搭建
•1.安裝node.js •2.安裝 Weex 指令行程式WeexToolkit • npm install -g weex -toolkit •3.上面安裝好後 開始建立項目在dos中運作weexinit 提示輸入項目名，預設位置在目前dos目錄下 •4.項目檔案夾中package.json 可檢視所有依賴庫 •5.項目檔案夾中webpack.config.js 可配置輸出編譯後的js路徑 •6.啟動監聽和服務npm run dev npm run serve •7.運作npm run dev 指令後提示缺少依賴包錯誤如’ webpack’ • 可使用npminstall – webpack進行安裝
二、WEEXSDK內建到工程
•Android內建有兩種方式 •1. 源碼依賴：能夠快速使用 WEEX 最新功能，可以根據自己項目的特性進行相關改進。 • •2.SDK 依賴：WEEX會在 jcenter 定期釋出穩定版本。Jcenter注:國内可能需要翻牆
三、Weex原理概述
•Weex 是跨平台，可擴充的動态化技術. 你能通過在Weex源碼中寫 <template>, <style> 和 <script> 标簽，然後把這些标簽轉換為 JS Bundle 用于 •部署,在服務端以這些 JSBundle 響應請求.當用戶端接收到 JSBundle 時，它能用被用戶端中的 JS 引擎用于管理Native 渲染;API 調用和使用者互動.
•JSFramework
•虛拟 DOM.
四、編寫.we檔案
•WEEX代碼由三部分構成： template (模闆)， style(樣式)和 script (腳本) •<template> : 必須的, 使用類HTML 的文法描述頁面結構，内容由多個标簽組成，不同的标簽代表不同的元件。 •<style> : 可選的, 使用類CSS 的文法描述頁面的具體展現形式。 •<script> : 可選的, 使用JavaScript 描述頁面中的資料和頁面的行為，Weex中的資料定義也在 <script>中進行。
1，找節點
•weex 中，可以通過在特定的節點上 設定 id 屬性，以此來唯一辨別該節點。然後可以用 this. $ el (id)來找到該節點
2.we檔案中資料綁定
•Weex 使用_mustache_的文法( {{key}} )來對<template> 中的模闆和 <script>裡的資料進行綁定.一旦資料額模闆綁定了,資料上的修改會實時的在 •模闆内容中生效.
3，.we檔案中嵌套.we檔案
•經常我們會發現很多可複用的 weex檔案，這時候可以封裝成 weex元件。我們可以直接建立一個名為 foo.we 的檔案 ， < foo >就是元件名
4，.we檔案中邏輯控制
•Weex 前端語義支援通過兩種特殊屬性（ if 和 repeat）的設定來确定元件的顯示狀态，這會使得整個頁面布局顯得更加靈活 •if可以控制目前元件節點的 顯示狀态。如果設為 true，則會将目前節點置于 DOM中渲染，反之則會從 DOM中移除 • •repeat屬性用于控制具有相同樣式或屬性的元件節點做 重複渲染。它綁定的資料類型必須為數組，其中每個數組項的屬性會分别綁定到需要重複渲染的各子元件上
5.we檔案和嵌套we檔案互動
•weex 遵循HTML attribute 命名規範，是以 不要在屬性中使用駝峰風格（CamelCase ），使用 -連接配接符的 羊肉串風格（kebab-case）才是正确的打開方式 •子元件能通過 this.$dispatch([String type], [Object detail]) 方法向父元件傳送資料。第一個參數代表 事件名，第二個參數則是 資料對象。 •如果子元件的某個父元件通過 $on( 事件名 , [Function callback]) 方法注冊了一個相同名字的屬性監聽，那麼callback 函數将得到一個參數對象，并且參數對象的detail 屬性值為子元件傳遞出來的資料對象。
6，.we檔案元件中的事件-(Events)
•weex 允許對<template> 中的元素綁定事件處理器。屬性名稱是以 on... 為字首加事件類型和處理函數名。例如onclick="handler“
7，.we基本樣式
•所有 weex 标簽都有以下基本樣式規則
8,元件定義
•定義元件是通過一組選項來描述一個元件。這組選項總是被指派給 <script>标簽中的 module.exports 。 •module.exports = { – methods: { •doThis: function () {...}, •doThat: function () {...} –} •} •methods是一個映射，其中包含所有視圖模型的方法。 •每個 data 或 method屬性将被代理到視圖模型執行個體中。是以，你能 通過 this.doThis () 調用方法。 •一個完整的例子：
9，.we生命周期
•Weex 視圖模型現在支援生命周期内的鈎子函數，這些鈎子函數能被寫為元件選項： • init : 在視圖模型的構造函數開始調用時激活； • created : 當視圖模型監聽預設資料，但還未編譯模闆時激活； • ready : 當視圖模型監聽預設資料并且編譯模闆生成虛拟DOM 後被激活。
10，.we檔案中調用已封裝本地方法
• < dom > 子產品 •1.讓頁面滾動到那個對應的節點 •var dom = require ('@ weex-module/dom'); •dom.scrollToElement(this.$el('someId'), {offset: 10}); • <stream > 子產品 •stream.sendHttp(options, callback ) •stream.fetch(options,callback,progressCallback)
11,.we中調用原生方法
•Weex 提供了擴充機制，可以根據自己的業務進行定制自己的功能。 •主要分為兩類擴充： • Module 擴充非 UI 的特定功能。例如sendHttp、openURL等。 • Component 擴充實作特别功能的 Native 控件。例如：RichTextview，RefreshListview 等。 • Adapter 擴充Weex對一些基礎功能實作了統一的接口，可實作這些接口來定制自己的業務。例如：圖檔下載下傳等。
Module擴充
•1.Module擴充必須繼承 WXModule 類。 •2.擴充方法必須加上@WXModuleAnno 注解。Weex會根據注解來判斷目前方法是否要運作在 UI 線程，和目前方法是否是擴充方法。 •3. Weex是根據反射來進行調用 Module擴充方法，是以 Module中的擴充方法必須是 public類型 •4.Module 擴充的方法可以使用 int, double, float, String, Map, List 類型的參數 •5. 完成 Module後一定要在初始化時注冊 WXSDKEngine.registerModule("myModule", MyModule.class);
Component擴充
•1. Component 擴充類必須內建 WXComponent. •2. Component 對應的設定屬性的方法必須添加注解@WXComponentProp(name=value(value is attror style of dsl)) •3. Weex sdk 通過反射調用對應的方法，是以Component 對應的屬性方法必須是public，并且不能被混淆。請在混淆檔案中添加代碼 - •keep public class * extends com.taobao.weex.ui.component.WXComponent{*;} •4. Component 擴充的方法可以使用 int, double, float, String, Map, List 類型的參數 •5. 完成Component 後一定要在初始化時注冊WXSDKEngine.registerComponent("richtext",RichText.class);
Adapt擴充
•圖檔下載下傳： •需要時內建接口 IWXImgLoaderAdapter，實作 setImage 方法。
---- end --