掃雷是一個喜聞樂見的小遊戲，今天在看 Weex 文檔的過程中，無意中發現用 Weex 完全可以開發一個掃雷出來。當然這個掃雷和 Windows 那個有一點差距，不過麻雀雖小五臟俱全，隨機佈雷、自動挖雷、標雷那是必須有的。
最後的效果是這個樣子的：
界面是簡陋了一點，好歹是可以用的，要啥自行車。其實這個 demo 主要是爲了實踐幾件事情：
1. 界面指示器
2. 動態數據綁定
3. 更復雜的事件
掃雷的佈局裏面只需要用上 repeat 指示器，表示元素的重複出現，比如說一個 9*9 的雷區，佈局文件非常的簡單：
這樣的話我們用 script 裏面的 data binding 就能把重複的元素佈局好。例如：
但是如果真的這麼寫的話，一個 9*9 的佈局不知道要搞到什麼時候，幸虧 data-binding 也是支持動態化的。所以在遊戲開始後生成這個佈局就好了。
初始化的時候生成每個節點的值，是否是一個雷，計算周圍雷的總數，state 表示當前的狀態（正常、挖開、標記），同時用 tid 來標記一個塊（tile identifier）。
隨機的在雷區佈雷，直到滿足個數：
然後做一次計算，把每個塊周圍的雷總數計算得到，這裏有一個點可以優化，就是當點擊第一次之後纔去做佈雷的操作，這樣可以防止用戶第一次就掛了。（如果你對掃雷有點了解的話，會知道在 Windows 掃雷裏面，是出現過第一次點可能會掛和第一次點一定不會掛這兩種的，區別就在這裏）
這個計算做完之後，通過 Weex 的 data-binding 就徹底反映到了 View 上面，每個塊都有了數據。這裏面有個 map 函數，是定義在 script 裏面的一個用於枚舉位於 (x, y) 的塊周圍八個點的一個函數：
通過枚舉把塊 callback 回來，這個函數有多次用到。
然後綁定 onclick 和 onlongpress 函數，實現單擊挖雷，長按標雷的功能。這裏面的 tile 函數是通過事件發生的 event 對象取到元素的一個方法，值得一提的是這裏面我試過官網說的 e.target.id 方法，拿到的是 undefined，所以我纔在這裏用了 tid 來標記一個元素。
玩過掃雷的都知道，當你挖開一個點，發現這個點周圍一個雷都沒有，那麼程序會自動挖開這個點周圍的八個點，同時這個行爲會遞歸下去，直到一整片全部被挖開，在程序裏面就是上面的 dfs 函數。
發現某個點爲空之後進入 dfs，遞歸或者展示某個點。接下來就是對雷區局面的判定動作，分爲 onfail 和 judge 兩個部分。
當點開雷的時候直接進入 onfail，否則進入 judge，如果滿足勝利條件則遊戲也結束。Weex 的 data 模塊裏面可以定義一個 JSON 數據，除了做數據綁定，也可以方便的儲存其他的數據。
最後
Weex 提供的指示器和數據綁定是不錯的東西，用它們可以完成更靈活的界面佈局和數據展現。
尤其是數據綁定，他讓數值的變化可以直接反饋到界面上，省去了一些繁雜的界面更新邏輯。
這也許是一個不太實用的 demo，但我覺得很有趣。下面是源碼：
阿里百川（baichuan.taobao.com）是阿里巴巴集團的無線開放平臺，通過“技術、商業及大數據”的開放，提供移動場景下的高內聚、開放式、行業領先的技術產品矩陣、成熟的商業組件和完善的服務體系，幫助移動開發者快速搭建APP、加速APP商業化進程，全方位賦能移動開發者及移動創業者。
